HTML 之 定时器

最新推荐文章于 2024-04-13 16:57:13 发布
最新推荐文章于 2024-04-13 16:57:13 发布
阅读量2w 收藏 30
点赞数 5
文章标签： html 定时器 一次性定时器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huzongnan/article/details/79560720
版权

定时器

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>定时器</title>
        <style type="text/css">
            #first{
                width: 100px;
                height: 100px;
                background: red;
                position: absolute;
                left: 0px;
            }
        </style>
    </head>
    <body>
        <div id="first"></div>
    </body>
    <script type="text/javascript">
        // 一次性定时器/延时器
        // 第一种写法
        setTimeout(function(){

        }, 1000);
        // 第二种写法
        setTimeout(f, 1000);
        function f(){
            console.log("执行 f");
        }

        // 循环定时器
        var timer = setInterval(function(){
            console.log("循环定时器");
        }, 2000);

        setTimeout(function(){
            // 清除定时器
            clearInterval(timer);
            // clearTimeout()
        }, 8000);

        var first = document.getElementById("first");
        first.onclick = function(){
            var move = setInterval(function(){
                first.style.left = first.offsetLeft + 5 + "px";
                if (first.offsetLeft >= 500) {
                    clearInterval(move);
                }
            }, 20)
        }
    </script>
</html>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>轮播图</title>
        <style type="text/css">
            .box{
                margin: 50px auto;
                height: 400px;
                width: 600px;
                border: 5px green solid;
                overflow: hidden;
                position: relative;
            }
            .hidebox{
                position: absolute;
                width: 3600px;
                height: 400px;
                z-index: 1;
            }
            .hidebox div{
                height: 400px;
                width: 600px;
                float: left;
                font-size: 50px;
                line-height: 400px;
                text-align: center;
                background-size:600px 400px;
            }
            .one{
                background: url("images/8.png");
            }
            .two{
                background: url("images/5.jpg");
            }
            .three{
                background: url("images/4.jpg");
            }
            .four{
                background: url("images/3.jpg");
            }
            input{
                /*-webkit-appearance: button;*/
                position: relative;
                z-index: 100;
                top: 185px;
                width: 30px;
                height: 30px;
                background-color: #03030355;
                border: 0;
                color: white;
                display: none;
            }
            .box:hover input{
                display: inline-block;
            }
            .left{
                border-radius: 0 15px 15px 0;
                margin-left: -5px;
                float: left;
            }
            .left:hover, .right:hover{
                background-color: #03030399;
            }
            .right{
                border-radius: 15px 0 0 15px;
                margin-right: -5px;
                float: right;
            }
            .list{
                height:20px;
                width:100px;
                position: absolute;
                left:200px;
                bottom: 0px;
                opacity: 0.8;
                filter: alpha(opacity=80); 
                z-index: 100;
            }
            .list li{
                height:20px;
                width:20px;
                background: #ccc;
                border-radius: 50%;
                float: left;
                margin-right:5px;
                cursor: pointer;
                list-style: none;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <input type="button" value="&lt" class="left">
            <div class="hidebox">
                <div class="four"></div>
                <div class="one"></div>
                <div class="two"></div>
                <div class="three"></div>
                <div class="four"></div>
                <div class="one"></div>
            </div>
            <input type="button" value="&gt" class="right">
            <ul class="list">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </body>
    <script type="text/javascript">
        var hidebox = document.getElementsByClassName("hidebox")[0];
        var left = document.getElementsByClassName("left")[0];
        var right = document.getElementsByClassName("right")[0];
        var box = document.getElementsByClassName("box")[0];
        var list = document.getElementsByTagName("li");
        hidebox.style.left = hidebox.offsetLeft - 600 + "px";
        var temptimer;
        function play(){
            temptimer = setInterval(function(){
                var timer = setInterval(function(){
                    hidebox.style.left = hidebox.offsetLeft - 50 + "px";
                }, 10);
                setTimeout(function(){
                    clearInterval(timer);
                }, 120);
                if (hidebox.offsetLeft <= -2400) {
                    hidebox.style.left = 0;
                }
                for (var i = 0; i < list.length; i++) {
                    list[i].style.backgroundColor = "grey";
                }
                var num = hidebox.offsetLeft / -600;
                list[num].style.backgroundColor = "black";
            }, 2000);
        }
        play();
        function stop(){
            setTimeout(function(){
                clearInterval(temptimer);
            });
        }
        box.onmouseover = stop;
        box.onmouseout = play;
        list[0].style.backgroundColor = "black";
        for (var i = 0; i < list.length; i++) {
            list[i].temp = i;
            var width = -600;
            list[i].onmouseover = function(){
                hidebox.style.left = width * (this.temp + 1) + "px";
                for (var i = 0; i < list.length; i++) {
                    list[i].style.backgroundColor = "grey";
                }
                list[this.temp].style.backgroundColor = "black";
            }
        }

        left.onclick = function(){
            var timers = setInterval(function(){
                hidebox.style.left = hidebox.offsetLeft + 50 + "px";
            }, 10);
            setTimeout(function(){
                clearInterval(timers);
            }, 120);
            if (hidebox.offsetLeft == -600) {
                hidebox.style.left = -3000 + "px";
            }
            for (var i = 0; i < list.length; i++) {
                    list[i].style.backgroundColor = "grey";
            }
            var num = hidebox.offsetLeft / -600 - 2;
            list[num].style.backgroundColor = "black";
        };

        right.onclick = function(){
            var timers = setInterval(function(){
                hidebox.style.left = hidebox.offsetLeft - 50 + "px";
            }, 10);
            setTimeout(function(){
                clearInterval(timers);
            }, 120);
            if (hidebox.offsetLeft == -2400) {
                hidebox.style.left = 0 + "px";
            }
            for (var i = 0; i < list.length; i++) {
                    list[i].style.backgroundColor = "grey";
            }
            var num = hidebox.offsetLeft / -600;
            list[num].style.backgroundColor = "black";
        };
    </script>
</html>

这里写图片描述

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            .item{
                width: 60px;
                border-radius: 50px;
                position: absolute;
                left: 10px;
                top: 0
            }
        </style>
    </head>
    <body>
        <input type="button" value="开始" id="start">
        <input type="button" value="停止" id="stop">
    </body>
    <script type="text/javascript">
        var start = document.getElementById("start");
        var stop = document.getElementById("stop");
        var createTimer;
        stop.onclick = function(){
            clearInterval(createTimer);
        };
        start.onclick = function(){
            createTimer = setInterval(function(){
                var gold = document.createElement("img");
                gold.src = "images/金币.jpg";
                gold.className = "item";
                gold.style.left = Math.random() * 960 + 100 + "px";
                document.getElementsByTagName("body")[0].appendChild(gold);
                var downTimer = setInterval(function(){
                    gold.style.top = gold.offsetTop + 5 + "px";
                    if (gold.offsetTop >= 500) {
                        gold.remove();
                        clearInterval(downTimer);
                    }
                }, 20);
            }, 200);
        };
    </script>
</html>

这里写图片描述

http://blog.csdn.net/huzongnan/article/list

一個頭像用四年
关注
  • 5
    点赞
  • 踩
  • 30
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
html中加定时器,怎么用HTML设置一个定时器
weixin_42353996的博客
05-31 6838
用HTML设置一个定时器的方法：首先新建一个html页面，并设置一个按钮；然后给这个按钮绑定一个函数；接着设置一个变量用来保存定时器；最后在function里面写实现代码即可。本文操作环境：windows7系统、html5&&javascript1.8.5版、Dell G3电脑。新建一个html页面，然后设置一个按钮，并且给这个按钮绑定一个函数。比如设置一个函数timer。现在要做...
HTML延迟事件触发 # 定时器 || 延时器
long_songs的博客
03-17 8887
想要让HTML里面的事件等一下再出发，大概可以分成定时器和延时器两种： 两者的区别是：延时器是只触发一次，定时器是每次都延迟这么久才开始执行 通过JavaScript使用的有两个关键的方法： setTimeout(function,milliseconds) 在等待指定的毫秒数后执行函数。 setInterval(function,milliseconds) 等同于setTimeout()，但持续重复执行该函数。 setTimeout()和set...
使用 HTML、CSS 和 JS 的简单倒数计时器(1)
最新发布
2401_83641180的博客
04-13 1118
担。**[外链图片转存中…(img-ox8dQr7q-1712998621948)][外链图片转存中…(img-2y9QQIv6-1712998621948)][外链图片转存中…(img-0MkEODxv-1712998621949)][外链图片转存中…(img-XqaiYXXm-1712998621949)]
超详细解释:使用定时器实现轮播图效果(HTML、CSS、JavaScript)
weixin_56296642的博客
10-02 1834
超详细解释使用HTML、CSS、Javascript运用定时器知识实现轮播图效果
html倒计时timer,js定时器倒计时
weixin_32141253的博客
06-25 105
function p(s) {return s < 10 ? '0' + s : s;}$(function() {function mydata() {var myDate = new Date();//获取年var year = myDate.getFullYear();var month = myDate.getMonth() + 1;var day = myDate.getDate(...
Javascript完成html页面定时器设定
08-14
Javascript完成html页面定时器设定
html界面定时器的应用
hason3417509的博客
07-04 367
public class TimeClass { public long s=0; public String getTime() throws ParseException{ String strTime=null; //1.页面设置初始时，当前时间(begin)大于定设置时间(end)时会显示出剩余时间和修改按钮 SimpleDateFormat...
深入理解HTML5定时器requestAnimationFrame的使用
09-22
计时器一直是javascript动画的核心技术。这篇文章主要介绍了深入理解HTML5定时器requestAnimationFrame的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JavaScript学习笔记之定时器
10-24
`setInterval` 与 `setTimeout` 类似，但不同之处在于它会以指定的时间间隔不断重复执行指定的函数或代码。基本语法如下： ```javascript setInterval(function, delay); ``` - 同样，`function` 是要执行的函数或...
(18)JS的定时器的用法
虚心求学_一点一滴
05-29 1104
定时器中可以使用
html-timer:html计时器小部件，用于概念嵌入
03-17
html-timer html计时器小部件，用于概念嵌入
html时间代码
02-27
html动态时间代码，可以获取系统时间在页面进行动态显示
定时刷新html页面demo
大头皮鞋的博客
09-23 1473
定时刷新html页面
html定时器，实现倒数
qq_38292703的博客
10-01 1408
  function countSecond(SecondTime,Id) {                 if(SecondTime==undefined)return;                 if(Id==undefined)return;                                  Time = SecondTime;                ...
HTML 定时页面跳转
弹指间的时光的博客
10-11 4789
有 2 种方法可以实现 html 的定时页面跳转，1、meta refresh 实现。2、JavaScript 实现。原文传送门 1、通过 meta refresh 实现 3 秒后自动跳转到 http://www.cssue.com/ 页面。 [html] view plain copy html>   head>   meta
在HTML中如何动态显示时间
时光不顾的博客
12-13 4910
无标题文档              var timer=null;         function displayClock(num){//num是传入的startClock中的动态值             if(num                 return "0"+num;             }             else{               
html倒计时timer,JavaScript定时器设置、使用与倒计时案例详解
weixin_39988164的博客
06-25 387
本文实例讲述了JavaScript定时器设置、使用与倒计时案例。分享给大家供大家参考，具体如下：1、设置定时器定时器，适用于定时执行的任务中。在BOM的window对象中，有这样的两个函数是用于设置定时器setTimeout(function,delay);//设置延时多少毫秒执行该函数，只执行一次，返回值是一个idsetInterval(function,delay);//设置间隔多少毫米一直执...
html每隔5秒自动执行一次,web前端：定时器每隔10秒钟刷新一次jqgrid
weixin_30364109的博客
06-02 3226
掌握HTML是网页的核心，是一种制作万维网页面的标准语言，是万维网浏览器使用的一种语言，它消除了不同计算机之间信息交流的障碍。因此，它是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言，学好HTML是成为Web开发人员的基本条件。定时器每隔10秒钟刷新一次jqgrid//console.log('每隔*秒钟刷新一次');vartimer=window.setInterval(functio...
html中和定时器相关的方法
05-30
在 HTML 中，可以使用以下两种方法与定时器相关： 1. `setTimeout()` 方法：用于在指定的时间间隔后执行一次指定的函数。该方法接受两个参数，第一个参数为要执行的函数，第二个参数为延迟的毫秒数。例如： ``` setTimeout(function() { console.log('Hello, world!'); }, 1000); // 一秒后输出 "Hello, world!" ``` 2. `setInterval()` 方法：用于以指定的时间间隔重复执行指定的函数。该方法接受两个参数，第一个参数为要执行的函数，第二个参数为时间间隔的毫秒数。例如： ``` var count = 0; var intervalId = setInterval(function() { console.log(count); count++; }, 1000); // 每秒输出一个数字，直到手动停止 ``` 除了这两个方法，还有一些与定时器相关的方法，例如 `clearTimeout()` 和 `clearInterval()` 方法，用于停止定时器的执行。这些方法可以帮助开发者实现各种定时任务，例如定时更新页面内容、定时检查用户输入等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值