【小工具】簡單的倒計時（原生）

2024-04-27 15:18:46

字體：大中小

來源：轉載

供稿：網友

這里寫圖片描述

【小工具】簡單的倒計時（原生）

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

cavas時鐘

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><canvas id="canvas" style="width:500px;">當前瀏覽器不支持canvas，請更換瀏覽器后再試</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; //存儲時間數據 var data = []; //存儲運動的小球 var balls = []; //設置粒子半徑 var R = canvas.height/20-1; (function(){ var temp = /(/d)(/d):(/d)(/d):(/d)(/d)/.exec(new Date()); //存儲時間數字，由十位小時、個位小時、冒號、十位分鐘、個位分鐘、冒號、十位秒鐘、個位秒鐘這7個數字組成 data.push(temp[1],temp[2],10,temp[3],temp[4],10,temp[5],temp[6]); })(); /*生成點陣數字*/ 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(); } } } } /*更新時鐘*/ 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--){ //時間發生變化 if(NewData[i] !== data[i]){ //將變化的數字值和在data數組中的索引存儲在changeNumArray數組中 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(); } /*更新小球狀態*/ 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--; } } } /*增加要運動的小球*/ 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(){ //重置畫布寬度，達到清空畫布的效果 canvas.height = 100; //渲染時鐘 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(){ //更新時鐘 updateDigitTime(); //更新小球狀態 updateBalls(); //渲染 render(); },50);</script></body></html>

上一篇：css基礎學習之文本和顏色屬性

下一篇：WebGIS中地圖恢復初始位置及狀態