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歷險記之計時器

代碼如下：

效果如下：

您的項目需求