Welcome to blogs.|
收藏闪存小组博问

anekos

园龄：9年11个月粉丝：6关注：2

关于JavaScript的一些用法

复制代码

关于JavaScript的死链设置问题

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript">


    </script>
</head>
<body>
    <input type="button" id="btn" value="单击" onclick="alert('添加')" />
    
    <br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <a href="#" onclick="alert('点中的是#')">方法1</a>   弹窗并返回页面最上边
    <br />
    <a href="JavaScript:Void(0)" onclick="alert('点中的是Void')">方法2</a>  弹窗但停留在当前页面




    <br />
    <a href="JavaScript:alert('点中的是Href')">方法3</a>      弹窗但停留在当前页面
 

</body>
</html>
复制代码

 

关于JavaScript 的setInterval定时器的测试

复制代码
<body>
    
    <input type="button" name="name" id="btn" />
    
</body>
</html>
<script type="text/javascript">
   var setId= setInterval(function () {
        alert('');
   }, 2000);//声明一个计时器，2000毫秒执行一次

   window.onload = function () {
       document.getElementById('btn').onclick = function () {
           clearInterval(setId);
       };      //注销指定计时器
   }
复制代码

 setInterVal 定时器的小Demo--跑马灯

复制代码
 <title>这是什么事呢</title>
</head>
<body><input type="button" name="name" id="left" />
    <input type="button" name="name" id="right" /></body>
</html>
<script type="text/javascript">
   
    function Demo(num) {
        if (num == 1) {
            setInterval(function () {
                var text = document.title;
                document.title = text.charAt(text.length-1) + text.substr(0, text.length - 1);
            }, 1000);
        } else {
            setInterval(function () {
                var text = document.title;
                document.title = text.substr(1) + text.charAt(0);
            }, 1000);
        }

    }


    document.getElementsByTagName(right‘).onclick = function () {     //
        Demo(1);
    };
    document.getElementById('left').onclick = function () {
        Demo(0);
    };
复制代码

 浏览器的   粘贴，复制事件

复制代码
<body>
     现在测试一下代码！看看会出现什么问题
    <input  type="text" id="txt"/>
</body>
</html>
<script type="text/javascript">
  
    onload = function () {
        document.body.onpaste = function () {
            return false;        //禁止在Body中粘贴

        }
        document.body.oncopy = function () {
            return false;        //禁止复制Boby中的文字
        }
          ///方法3 在复制的文字结尾添加  标签
        document.body.oncopy = function () {
            setTimeout(function () {
                clipboardData.setData('text', clipboardData.getData('text') + '自定义文字');   //text 为 获取粘贴板中那种类型数据
            }, 100);   //100为时间间隔让复制操作与添加字符串操作互不冲突
        }
    }
    }
复制代码

 关于事件冒泡

事件冒泡：如果元素A嵌套在元素B中，那么A被点击不仅A的onclick事件会被触发，B的onclick也会被触发。触发的顺序是“由内而外”
。

复制代码
 <script type="text/javascript">
        onload = function () {


            document.getElementById('dv').onclick = function () {
                // alert(this.id);
                alert(window.event.srcElement.id);//事件源
            };
            document.getElementById('p1').onclick = function () {
                alert(this.id);
            };
            function stop(e) {

                alert(this.id);
        function stopBubble（e）{
                  if(e||e.stopPropagation){
                 e.stopPropagation();                  //火狐中取消事件冒泡
                }
                else{
                 window.event.cancelBubble=true;       //IE中取消事件冒泡
                }
 }


             
            };
        };
    
    </script>
</head>
<body>
    <div id="dv1" style=" width:300px; height:200px; onclick='stop(event)'>

        <div id="dv" style=" width:300px; height:200px; background-color:Yellow; cursor:pointer;">
        <p id="p1" style=" width:150px; height:100px; background-color:Green;cursor:pointer;">
        
        <span id="sp" style="  cursor:pointer;">这是span</span>

        </p>
    </div>
</body>
复制代码

 

本文作者：anekos

本文链接：https://www.cnblogs.com/workcn/p/4355368.html

版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   anekos  阅读(145)  评论(0)  编辑  收藏  举报
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
收起