【小工具】簡單的倒計(jì)時(shí)（原生）

2024-04-27 15:18:46

字體：大中小

供稿：網(wǎng)友

這里寫圖片描述

【小工具】簡單的倒計(jì)時(shí)（原生）

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>倒計(jì)時(shí)</title></head><body><div id="div"></div><script type="text/javascript">window.onload=clock;function clock(){var today=new Date(),//當(dāng)前時(shí)間 h=today.getHours(), m=today.getMinutes(), s=today.getSeconds(); var stopTime=new Date("Feb 9 2017 00:00:00"),//結(jié)束時(shí)間 stopH=stopTime.getHours(), stopM=stopTime.getMinutes(), stopS=stopTime.getSeconds(); var shenyu=stopTime.getTime()-today.getTime(),//倒計(jì)時(shí)毫秒數(shù) shengyuD=parseInt(shenyu/(60*60*24*1000)),//轉(zhuǎn)換為天 D=parseInt(shenyu)-parseInt(shengyuD*60*60*24*1000),//除去天的毫秒數(shù) shengyuH=parseInt(D/(60*60*1000)),//除去天的毫秒數(shù)轉(zhuǎn)換成小時(shí) H=D-shengyuH*60*60*1000,//除去天、小時(shí)的毫秒數(shù) shengyuM=parseInt(H/(60*1000)),//除去天的毫秒數(shù)轉(zhuǎn)換成分鐘 M=H-shengyuM*60*1000;//除去天、小時(shí)、分的毫秒數(shù) S=parseInt((shenyu-shengyuD*60*60*24*1000-shengyuH*60*60*1000-shengyuM*60*1000)/1000)//除去天、小時(shí)、分的毫秒數(shù)轉(zhuǎn)化為秒 document.getElementById("div").innerHTML=(shengyuD+"天"+shengyuH+"小時(shí)"+shengyuM+"分"+S+"秒"+"<br>"); // setTimeout("clock()",500); setTimeout(clock,500);} </script></body></html>

cavas時(shí)鐘

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><canvas id="canvas" style="width:500px;">當(dāng)前瀏覽器不支持canvas，請(qǐng)更換瀏覽器后再試</canvas><script> var digit= [ [ [0,0,1,1,1,0,0], [0,1,1,0,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,0,1,1,0], [0,0,1,1,1,0,0] ],//0 [ [0,0,0,1,1,0,0], [0,1,1,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [1,1,1,1,1,1,1] ],//1 [ [0,1,1,1,1,1,0], [1,1,0,0,0,1,1], [0,0,0,0,0,1,1], [0,0,0,0,1,1,0], [0,0,0,1,1,0,0], [0,0,1,1,0,0,0], [0,1,1,0,0,0,0], [1,1,0,0,0,0,0], [1,1,0,0,0,1,1], [1,1,1,1,1,1,1] ],//2 [ [1,1,1,1,1,1,1], [0,0,0,0,0,1,1], [0,0,0,0,1,1,0], [0,0,0,1,1,0,0], [0,0,1,1,1,0,0], [0,0,0,0,1,1,0], [0,0,0,0,0,1,1], [0,0,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,1,1,0] ],//3 [ [0,0,0,0,1,1,0], [0,0,0,1,1,1,0], [0,0,1,1,1,1,0], [0,1,1,0,1,1,0], [1,1,0,0,1,1,0], [1,1,1,1,1,1,1], [0,0,0,0,1,1,0], [0,0,0,0,1,1,0], [0,0,0,0,1,1,0], [0,0,0,1,1,1,1] ],//4 [ [1,1,1,1,1,1,1], [1,1,0,0,0,0,0], [1,1,0,0,0,0,0], [1,1,1,1,1,1,0], [0,0,0,0,0,1,1], [0,0,0,0,0,1,1], [0,0,0,0,0,1,1], [0,0,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,1,1,0] ],//5 [ [0,0,0,0,1,1,0], [0,0,1,1,0,0,0], [0,1,1,0,0,0,0], [1,1,0,0,0,0,0], [1,1,0,1,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,1,1,0] ],//6 [ [1,1,1,1,1,1,1], [1,1,0,0,0,1,1], [0,0,0,0,1,1,0], [0,0,0,0,1,1,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,1,1,0,0,0], [0,0,1,1,0,0,0], [0,0,1,1,0,0,0], [0,0,1,1,0,0,0] ],//7 [ [0,1,1,1,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,1,1,0] ],//8 [ [0,1,1,1,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,0,1,1], [0,0,0,0,0,1,1], [0,0,0,0,0,1,1], [0,0,0,0,1,1,0], [0,0,0,1,1,0,0], [0,1,1,0,0,0,0] ],//9 [ [0,0,0,0,0,0,0], [0,0,1,1,1,0,0], [0,0,1,1,1,0,0], [0,0,1,1,1,0,0], [0,0,0,0,0,0,0], [0,0,0,0,0,0,0], [0,0,1,1,1,0,0], [0,0,1,1,1,0,0], [0,0,1,1,1,0,0], [0,0,0,0,0,0,0] ]//: ]; var canvas = document.getElementById('canvas'); if(canvas.getContext){ var cxt = canvas.getContext('2d'); } //聲明canvas的寬高 var H = 100,W = 700; canvas.height = H; canvas.width = W; //存儲(chǔ)時(shí)間數(shù)據(jù) var data = []; //存儲(chǔ)運(yùn)動(dòng)的小球 var balls = []; //設(shè)置粒子半徑 var R = canvas.height/20-1; (function(){ var temp = /(/d)(/d):(/d)(/d):(/d)(/d)/.exec(new Date()); //存儲(chǔ)時(shí)間數(shù)字，由十位小時(shí)、個(gè)位小時(shí)、冒號(hào)、十位分鐘、個(gè)位分鐘、冒號(hào)、十位秒鐘、個(gè)位秒鐘這7個(gè)數(shù)字組成 data.push(temp[1],temp[2],10,temp[3],temp[4],10,temp[5],temp[6]); })(); /*生成點(diǎn)陣數(shù)字*/ function renderDigit(index,num){ for(var i = 0; i < digit[num].length; i++){ for(var j = 0; j < digit[num][i].length; j++){ if(digit[num][i][j] == 1){ cxt.beginPath(); cxt.arc(14*(R+2)*index + j*2*(R+1)+(R+1),i*2*(R+1)+(R+1),R,0,2*Math.PI); cxt.closePath(); cxt.fill(); } } } } /*更新時(shí)鐘*/ function updateDigitTime(){ var changeNumArray = []; var temp = /(/d)(/d):(/d)(/d):(/d)(/d)/.exec(new Date()); var NewData = []; NewData.push(temp[1],temp[2],10,temp[3],temp[4],10,temp[5],temp[6]); for(var i = data.length-1; i >=0 ; i--){ //時(shí)間發(fā)生變化 if(NewData[i] !== data[i]){ //將變化的數(shù)字值和在data數(shù)組中的索引存儲(chǔ)在changeNumArray數(shù)組中 changeNumArray.push(i+'_'+(Number(data[i])+1)%10); } } //增加小球 for(var i = 0; i< changeNumArray.length; i++){ addBalls.apply(this,changeNumArray[i].split('_')); } data = NewData.concat(); } /*更新小球狀態(tài)*/ function updateBalls(){ for(var i = 0; i < balls.length; i++){ balls[i].stepY += balls[i].disY; balls[i].x += balls[i].stepX; balls[i].y += balls[i].stepY; if(balls[i].x > W + R || balls[i].y > H + R){ balls.splice(i,1); i--; } } } /*增加要運(yùn)動(dòng)的小球*/ function addBalls(index,num){ var numArray = [1,2,3]; var colorArray = ["#3BE","#09C","#A6C","#93C","#9C0","#690","#FB3","#F80","#F44","#C00"]; for(var i = 0; i < digit[num].length; i++){ for(var j = 0; j < digit[num][i].length; j++){ if(digit[num][i][j] == 1){ var ball = { x:14*(R+2)*index + j*2*(R+1)+(R+1), y:i*2*(R+1)+(R+1), stepX:Math.floor(Math.random() * 4 -2), stepY:-2*numArray[Math.floor(Math.random()*numArray.length)], color:colorArray[Math.floor(Math.random()*colorArray.length)], disY:1 }; balls.push(ball); } } } } /*渲染*/ function render(){ //重置畫布寬度，達(dá)到清空畫布的效果 canvas.height = 100; //渲染時(shí)鐘 for(var i = 0; i < data.length; i++){ renderDigit(i,data[i]); } //渲染小球 for(var i = 0; i < balls.length; i++){ cxt.beginPath(); cxt.arc(balls[i].x,balls[i].y,R,0,2*Math.PI); cxt.fillStyle = balls[i].color; cxt.closePath(); cxt.fill(); } } clearInterval(oTimer); var oTimer = setInterval(function(){ //更新時(shí)鐘 updateDigitTime(); //更新小球狀態(tài) updateBalls(); //渲染 render(); },50);</script></body></html>

上一篇：css基礎(chǔ)學(xué)習(xí)之文本和顏色屬性

下一篇：WebGIS中地圖恢復(fù)初始位置及狀態(tài)