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>


  • 相关阅读:
    基于VIP的keepalived高可用架构
    高性能Nginx最佳实践
    Ubuntu安装Nginx
    Synchronized总结及底层原理分析#网易微专业# #Java#
    springboot Restful开发
    Volatile详解
    IOC知识点详细汇总
    python 一个函数让你决定你的二维码
    用python批量生成简单的xml文档
    基于tensorflow搭建一个神经网络
  • 原文地址:https://www.cnblogs.com/zhoulitong/p/6412383.html
Copyright © 2011-2022 走看看