zoukankan      html  css  js  c++  java
  • JavaScript之DOM实践

    前言

        HTMLDOMJavaScript有能力对HTML作出反应,有时候,我们需要一些网页效果,为了更好地适应用户的效果,比如,我们平时接触,点击某个按钮,按下去的瞬间会变色,再比如,有时候鼠标经过的时候会显示下面的页面,离开时显示的页面消失,这些都可以通过JavaScript实现。

    内容

    点击按钮效果

    运行效果

     

    Demo

     

    <!DOCTYPE html>
    <html>
    <body>
    
    <div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green;color:#ffffff;90px;height:20px;padding:40px;font-size:12px;">请点击这里</div>
    
    <script>
    function mDown(obj)
    {
    obj.style.backgroundColor="#1ec5e5";
    }
    
    function mUp(obj)
    {
    obj.style.backgroundColor="green";
    }
    </script>
    </body>
    </html>

    鼠标事件控制显示页面

    运行效果


    Demo

    <span style="font-family:Microsoft YaHei;font-size:18px;"><!DOCTYPE html>
    <html>
    <body>
    
    <div onmouseover="mOver()" onmouseout="mOut()" style="background-color:green;120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>
    <br>
    <br>
    <div id="demo" onload="my()" style="background-color:red;120px;height:10px;padding:40px;"><strong>欢迎光临</strong></div>
    <script>
    function mOut()
    {
    document.getElementById('demo').style.visibility='hidden'
    }
    
    function mOver()
    {
    document.getElementById('demo').style.visibility='visible'
    }
    </script>
    </body>
    </html></span>


  • 相关阅读:
    Android开发技术周报 Issue#101
    Android开发技术周报 Issue#102
    Android开发技术周报 Issue#100
    Android开发技术周报 Issue#98
    Android开发技术周报 Issue#99
    ANDROID开发技术周报 ISSUE#90
    ANDROID开发技术周报 ISSUE#91
    Android开发技术周报 Issue#0
    Android开发技术周报 Issue#2
    c#中的delegate(委托)和event(事件)
  • 原文地址:https://www.cnblogs.com/zhoulitong/p/6412383.html
Copyright © 2011-2022 走看看