DOM事件的处理

最新推荐文章于 2024-08-20 17:01:17 发布

无盐海

最新推荐文章于 2024-08-20 17:01:17 发布

阅读量998

点赞数

CC 4.0 BY-SA版权

分类专栏： DOM 文章标签： dom

本文链接：https://blog.youkuaiyun.com/Fanbin168/article/details/21827267

DOM 专栏收录该内容

19 篇文章

订阅专栏

本文探讨了JavaScript在网页交互中的应用，包括事件处理、确认对话框、屏幕分辨率检测、页面刷新、按钮状态变化等。同时，介绍了如何在用户尝试复制文章时添加版权信息，以及如何阻止用户复制和粘贴内容。此外，还展示了如何通过脚本获取并显示当前网页的URL。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function f1() {
            alert("调用f1");
        }
        function f2() {
            alert("调用f2");
        }

//        ----------------------------------------------------------------------------------
        function bodymousedown() {
            alert("你好");
            alert("我好");

        }
//        ------------------------------------------------------------------------------------
        function com() {
            if (confirm("是否进入")) {
                alert("进入了");
            }
            else {
                alert("退出");
            }
        }
//        -------------------------------------------------------------------------------------
        
        var interval;
        function getinterval() {
            if (confirm("确定要执行吗？")) {

                interval = setInterval("alert('每隔2000毫秒执行一次')", 3000);
                
            }
            else {
                alert("不执行");
            }
        }
//        ---------------------------------------------------------------------------------------
        function setTimeOut1() {
            setTimeout("alert('3000毫秒后执行这段代码')", 3000);
        }

//        ---------------------------------------------------------------------------------------
//      如果用户复制文章，在复制内容的后面添加"本文章转自优快云,文章来源及文章的网址"
        function getCopy() {
            var tex = clipboardData.getData("Text");
            tex = tex + "本文章转自优快云,文章来源：" + location.href;
            clipboardData.setData("Text", tex);
        }
        
    </script>
</head>
<!--" --> 
<!--<body onmousedown ="bodymousedown()">-->
<body>
<!--ondblclick是双击事件,onclick是单击事件-->
<input type="button" onclick="document.ondblclick=f1" value="关联事件1" />
<input type="button" onclick="document.ondblclick=f2" value="关联事件2" />
<!-------------------------------------------------------------------------------------------->
<input type="button" ondblclick="bodymousedown()" value="调用函数" />
<input type="button" onclick="com()" value="confirm的用法" />

<!--------------------------------------------------------------------------------------------->
<input type="button" onclick="getinterval()" value="setInterval的用法，每隔一段时间执行指定的代码" />

<!--clearInterval取消setInterval的定时执行，相当于Timer中的Enabled=False-->
<input type="button" onclick="clearInterval(interval)" value="取消执行setinterval代码" />

<input type="button" onclick="setTimeOut1()" value="setTimeOut，某个时间执行代码" />
<!---------------------------------------------------------------------------------------------->

<!--clipboardData.setData('Text','我发现很好玩的网址，快来看吧'+location.href)；这段代码的意思就是往粘贴板填值-->
<!--clipboardData.get("Text")的意思为获取用户Copy的值-->
<input type="button" value="把当前网址分享给好友" onclick="clipboardData.setData('Text','我发现很好玩的网址，快来看吧'+location.href),alert('已经复制到剪切版，请快通过QQ发送给好友吧！')" /><br /><br />

<!----------------------------------------------------------------------------------------------->
<!-- oncopy="alert('禁止复制');return false"的作用就是禁止复制-->
<textarea rows ="5",cols="10" oncopy="alert('禁止复制');return false">
这是一篇文章，你只可以阅读，但是不可以复制到别的地方的哦！
</textarea>
<!--手机号码充值功能-->
手机号码<input type="text" />
重复手机号码：<input type="text" onpaste="alert('禁止粘贴');return false" />
<!---------------------------------------------------------------------------------------------->

<textarea rows="5" cols="20" oncopy="setTimeout('getCopy()',100)">
    如果用户要Copy文章内容转到自己博客去，就自动在文章的后面加上转自文章的出处网址
</textarea>
<!--------------------------------------------------------------------------------------------->

<a href="HTMLPage2.htm" >第二页</a>
<a href="javascript:window.history.forward()">前进</a>


</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>走马灯的特效</title>
    <script type="text/javascript">
//    ---------------------------------------------------------------------------------------
        function scroll() {
            //           将头文件标题赋值给 tit
            var tit = document.title;
            //            获取tit的第一个字符
            var fir = tit.charAt(0);
            //            获取tit剩余的字符
            var left = tit.substring(1, tit.length)
            //            将头文件标题重新赋值为 （原标题的第二个字符到最后一个字符+原标的的第一个字符）
            document.title = left + fir;
        } 
        
            //        让scroll每隔2000毫秒就执行scroll()一次，从而实现走马灯的效果
        setInterval("scroll()", 2000);

//        ------------------------------------------------------------------------------------
        function getconfirm() {
            if (confirm("大爷您确定要离开吗？")) {

                location.href("http://www.baidu.com");
//              document.write("<a href='http://www.baidu.com'>百度</a>")
            }
            else{
                alert("大爷我不走了！")
            }
        }
//        ------------------------------------------------------------------------------------
        function getpingmu() {
            if (screen.width < 1920 || screen.height < 1080) {
                alert("你的屏幕分辨率弱爆了");
            }
            else if (screen.width > 1920 || screen.height > 1080) {
                alert("您的屏幕分辩率屌爆了");
            }
            else {
                alert("你的屏幕分辩率是1920*1080，还算及格");
            }
            
        }
//        -------------------------------------------------------------------------------------
        //        screen对象，屏幕的信息
        function getResolution() {
            alert("分辨率：" + screen.width + "*" + screen.height);
        }
    </script>
</head>
<!-- onbeforeunload="window.event.returnValue='提示内容'"  ：其效果为在关闭窗口是弹出一个对话框。然客户确认是否关闭窗口-->
<!--<body onbeforeunload="window.event.returnValue='文章会被丢失'">-->
<body>

<input type="button" value="获取当前屏幕的分辨率" onclick="getResolution()" />
<input type="button" value=" 获取屏幕信息" onclick="getpingmu()" />

    <!--window.location.reload() ,这段代码的意思就是实现页面刷新的功能-->
<input type="button" onclick="window.location.reload()" value="刷新" />

<!--onfocus()与onblur()的使用-->
<input type="button" value="修改button名称" ondblclick="document.onload=but.value='ok'" />
<input  type="button" id="but" value="onfocus()与onblur()的使用" onfocus="alert('大爷好!')"  onblur="getconfirm()" />
<br />
<textarea  rows="5" cols="30" ></textarea>
<input type="text" id ="tex" name="123" value="请输入用户名" onmouseover="tex.value=null" />
<br />
<!--location.href 表示获取当前页面的地址-->
<input type="button" value="获取网页地址" onclick="alert(location.href)" />

</body>

</html>