js定时器

最新推荐文章于 2025-07-28 20:29:32 发布

原创最新推荐文章于 2025-07-28 20:29:32 发布 · 126 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

js内容专栏收录该内容

25 篇文章

订阅专栏

本文介绍了JavaScript中定时器的基本用法，包括setTimeout单次定时和setInterval多次定时的使用方式及其清除方法，并通过实例展示了如何实现元素的拖拽功能。

定时器

setTimeout 单次定时
第一个参数是匿名函数第二参数是多少毫秒后执行第三个函数是返回值(返回的是地址)
clearTimeout() 清除定时器
setInterval 多次定时
第一个参数是匿名函数第二参数是多少毫秒后执行第三个函数是返回值(返回的是地址)
clearInterval() 清除定时器

拖拽

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拖拽效果</title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: black;
            position: relative;
            left:100px;
        }
    </style>
</head>
<body>
    <div id='box' οnmοusedοwn="mv(this)" >

    </div>
    <script>
        function mv(_this){
            // console.log('我是鼠标按下事件')

            _this.οnmοusemοve=function(event){
                console.log('我是移动事件')
                // console.log(event)
                // console.log(_this)
                _this.style.left = event.clientX-100+"px"
                _this.style.top = event.clientY-100+"px"
            }

            _this.οnmοuseup=function(){
                _this.οnmοusemοve=null
            }
            
           



        }
    </script>
</body>
</html>