javascript历险记之计时器

ello,大家好，我们来谈论javascript的计时器

clearInterval

取消用setInterval设置的重复定时任务。

clearTimeout

clearTimeout()方法取消了先前通过调用setTimeout()建立的定时器。

例子：

上图是一个时钟倒计时，上代码：

html结构部分：

js代码部分：

延迟加载小例子：

大家都会在写js的时候会遇到鼠标移入的时候有提示框，下面是示例代码：

好了，今天的分享已经总结完毕了，暖夕H2会继续分享工作中的js干货，希望大家关注我

个是我用htmlcssrScrip写出来的东西，它包括两个部分，一个是上面的转盘，一个是下面的计时器。

·点击spin旋转，它就转，stop停止，停止以后就会反馈，就是获得了什么，学习两个小时。获得这个以后就可以start timer，开始学习。

·这个是重置，重置timer，计时器。如果学完了两个小时再转一次，转完以后又是学习两个小时，再开计时器，学完又重置一遍，再转一下，学习30分钟，再去学30分钟，再开，再关。

这么一个东西要怎么做？等一下我教你们怎么做。

·首先先在桌面新建一个文本文档，给它命名成learning，learning，will，叫什么？学习的转盘，带有WIS，WIS什么timer，计时timer，计时器。

·把它的后缀改一下，改成html覆盖，保存。

·保存完了以后用vs code打开，打开完以后就是一个空白的页面。

·接下来敲代码的时间，写一个前端代码，实现刚刚那个小东西。

·首先把框架给卸了，然后是Id doctyper，html，这个好像是浏览器之类的问题的，管它HML后，这是language的缩写，它就等于English的缩写。

·下面是made，chaset，这是设置一个字符编码的UTF-8，name，这是一个4口属性。

·内容是content，content的宽度是等于设备的宽度。

·它的initial SCA，SCA就是它的初始规模，是等于1.0，就是跟网页的大小是一样的。

·接下来是一个title，就是标题，标题就是learning，learning，will学习的，转盘带有time，就是带有计时器的一个学习的转盘。

·下面是CS的内容，就是style样式，这是CSS的内容。

·接下来就是到波底，接下来就是body的内容，body，head还没结束是吧？不对，我的head去哪了？问题好大，这里有一个head，我是觉得是先写大皇家是比较好的，就是the head。

·head里面包括几个部分，就是title，标题还有style，就是CSS，body，body里面，波波底下面是h，是HGL结束了。

·body里面包含两个东西，两个div就是两个块，这块一个是用来做抽奖的转盘的，一个是用来做timer，就是计时器。

·记下来是叫script东西，就是script，screw script。

·这就是整个的框架，就是这里是CSS的地方，这里是title，它的标题就是网页上它给出的标题，就是地址栏那里的标题。

·这里是两个div，就是两个块，到时候就是用两个容器来装抽奖的转盘和计时器。

·这里是加入script的代码。

大概就讲到这里。

代码如下：

<!DOCTYPE html>

<html>

<head>

margin:0;

bottom:0;

}

h1{

height:20px;

}

#timePic{

margin-top:50px;

}

</style>

setInterval(jishi,1000);

function jishi(){

var time=new Date();

var year=time.getFullYear();

var month=time.getMonth();

var iday=time.getDate();

var day=time.getDay();

var hour=time.getHours();

var minute=time.getMinutes();

var seconds=time.getSeconds();

var pic=document.getElementsByClassName("timePic");

switch (day){

case 0:day="星期日";break;

case 1:day="星期一";break;

case 2:day="星期二";break;

case 3:day="星期三";break;

case 4:day="星期四";break;

case 5:day="星期五";break;

case 6:day="星期六";break;

}

var str=year+"年"+(month+1)+"月"+iday+'日'+day+' '+changTime(hour)+':'+changTime(minute)+':'+changTime(seconds);

var str1=changTime(hour)+''+changTime(minute)+''+changTime(seconds);

console.log(str1.length);

for(var i=0;i<6;i++){

pic[i].src="Image/"+str1.charAt(i)+".JPG";

}

var ti=document.getElementsByTagName("h1");

ti[0].innerHTML=str;

}

function changTime(obj){

return obj<10 ? ('0'+obj):obj;

}

</script>

</head>

<body>

</p>

</body>

</html>

效果如下：

这是一个计时器效果，使用Js里面的Date()对象实现。想要图片素材点击关注私信我！

在线咨询

上一篇：HTML 属性
下一篇：易语言简单超文本框的使用方法

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

javascript历险记之计时器

代码如下：

效果如下：

您的项目需求