关于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>

巴特西

关于JavaScript的一些用法

最新文章

热门文章