几种常见的JavaScript特效

最新推荐文章于 2024-08-14 17:24:57 发布

会开花的树-

最新推荐文章于 2024-08-14 17:24:57 发布

阅读量1.9k

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/u013830811/article/details/49178627

版权

javascript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

①页面显示大广告图片及其自动关闭
在打开一个页面时，常常会出现一个大广告图片显示网站的最新活动等，一般广告显示5秒左右，广告又会自己关闭，这个是怎么实现的？
其实只需要将图片加在网页合适的位置，然后再写一个删去隐藏图片元素的函数，并设置n秒后执行：

        function showAd(){
        //默认图片所在div的id为ad
            var Pic = document.getElementById('ad');
            setTimeout(function() {
                Pic.style.display = 'none';
            },5000);
        }
        window.onload=showAd;

②输入完成后进行校验
实际上只需要在input标签里面添加一个onblur属性，该属性绑定一个用于校验的函数即可：

<input type="text" id="name" onblur="validateTel()"/>
    <script>
      function validateTel(){
            alert("do something");

      }
    </script>

③勾选全部复选框
在网站中，如果复选框较多，会有一个全选按钮，点击后，所有复选框会被选中：

<html>
<head>
   <meta charset="utf-8" />
</head>
<body>
    你的爱好是：</br>
     <input type="checkbox" name="hobby" value="" />篮球
     <input type="checkbox" name="hobby" value=""/>足球
     <input type="checkbox" name="hobby" value=""/>网球
     <input type="checkbox" name="hobby" value=""/>乒乓
     <input type="checkbox" name="hobby" value=""/>游泳
     <input type="checkbox" name="hobby" id="selectall" value=" " onclick="SelectAll()"/>全选

    <script>
      function SelectAll(){
          if(document.getElementById('selectall').checked == true){
              var allValue = document.getElementsByName('hobby');
              for(var i=0;i<allValue.length;i++){
                  allValue[i].checked=true;
              }
          }

      }
    </script>
</body>

</html>