html时钟特效
效果图:https://www.ddosi.com/sz.html
截屏:
html代码:
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>html时钟</title>
<style>
body{
background-color:black;
}
div{
margin:auto;
width:500px;
position:absolute;
position: absolute;
left:50%;
top:50%;
margin-left:-250px;
margin-top:-250px;
}
</style>
<style type="text/css">object,embed{ -webkit-animation-duration:.001s;-webkit-animation-name:playerInserted; -ms-animation-duration:.001s;-ms-animation-name:playerInserted; -o-animation-duration:.001s;-o-animation-name:playerInserted; animation-duration:.001s;animation-name:playerInserted;} @-webkit-keyframes playerInserted{from{opacity:0.99;}to{opacity:1;}} @-ms-keyframes playerInserted{from{opacity:0.99;}to{opacity:1;}} @-o-keyframes playerInserted{from{opacity:0.99;}to{opacity:1;}} @keyframes playerInserted{from{opacity:0.99;}to{opacity:1;}}</style></head>
<body>
<div>
<canvas id="canvas" width="500" height="500">
</canvas></div>
<script>
var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d");ctx.strokeStyle='#7FFF00';ctx.lineWidth=3;ctx.shadowBlur=5;ctx.shadowColor='#7FFF00';var milliseconds=0;var minutes=0;var hour=0;var date="";var ctxBack=canvas.getContext("2d");var numBack=canvas.getContext("2d");ctxBack.lineWidth=1;ctxBack.shadowBlur=0;ctxBack.shadowColor='#ADFF2F';function pageInit(){showTime();showBack();drawSecPin();drawMinPin();drawHouPin();setPoint();setNum();}
function setNum(){numBack.save();numBack.translate(250,250);numBack.beginPath();numBack.fillStyle='#7FFF00';numBack.font="30px Helvetica";for(var i=0;i<60;i++){if(i%5==0){numBack.lineWidth=5;var xPoint=Math.sin(i*6*2*Math.PI/360)*195;var yPoint=-Math.cos(i*6*2*Math.PI/360)*195;numBack.fillText(i==0?12:i/5,i==0?-15:xPoint-10,i==0?-185:i<=30?yPoint+5:yPoint+10);}}
numBack.stroke();numBack.closePath();numBack.restore();}
function drawSecPin(){ctxBack.save();ctxBack.translate(250,250);ctxBack.rotate(milliseconds/60*2*Math.PI);ctxBack.beginPath();ctxBack.strokeStyle='#ADFF2F';ctxBack.lineWidth=1;ctxBack.lineJoin="bevel";ctxBack.miterLimit=10;ctxBack.moveTo(0,30);ctxBack.lineTo(3,-175);ctxBack.lineTo(13,-165);ctxBack.lineTo(0,-210);ctxBack.lineTo(-13,-165);ctxBack.lineTo(-3,-175);ctxBack.lineTo(0,30);ctxBack.stroke();ctxBack.closePath();ctxBack.restore();}
function drawMinPin(){ctxBack.save();ctxBack.translate(250,250);ctxBack.rotate(minutes*6*Math.PI/180);ctxBack.beginPath();ctxBack.strokeStyle='#00FFFF';ctxBack.lineWidth=1;ctxBack.lineJoin="bevel";ctxBack.miterLimit=10;ctxBack.moveTo(0,20);ctxBack.lineTo(3,-145);ctxBack.lineTo(10,-135);ctxBack.lineTo(0,-180);ctxBack.lineTo(-10,-135);ctxBack.lineTo(-3,-145);ctxBack.lineTo(0,20);ctxBack.stroke();ctxBack.closePath();ctxBack.restore();}
function drawHouPin(){ctxBack.save();ctxBack.translate(250,250);ctxBack.rotate(hour*30*Math.PI/180);ctxBack.beginPath();ctxBack.strokeStyle='#FF0000';ctxBack.lineWidth=1;ctxBack.lineJoin="bevel";ctxBack.miterLimit=10;ctxBack.moveTo(0,20);ctxBack.lineTo(3,-110);ctxBack.lineTo(10,-100);ctxBack.lineTo(0,-150);ctxBack.lineTo(-10,-100);ctxBack.lineTo(-3,-110);ctxBack.lineTo(0,20);ctxBack.stroke();ctxBack.closePath();ctxBack.restore();}
function setPoint(){ctxBack.beginPath();ctxBack.fillStyle='black';ctxBack.arc(250,250,3,0,2*Math.PI);ctxBack.stroke();}
function showBack(){for(var i=0;i<60;i++){ctxBack.save();ctxBack.translate(250,250);ctxBack.rotate(i/60*2*Math.PI);ctxBack.beginPath();ctxBack.strokeStyle='#7FFF00';ctxBack.moveTo(0,-250);ctxBack.lineWidth=i%5==0?5:2;ctxBack.lineTo(0,-230);ctxBack.stroke();ctxBack.closePath();ctxBack.restore();}
ctxBack.beginPath();ctxBack.arc(250,250,230,0,2*Math.PI);ctxBack.stroke();}
function degToRad(degree){var result;var factor=Math.PI/180;if(degree==0){result=270*factor;}else{result=degree*factor;}
return result;}
function showTime(){var now=new Date();var today=now.toLocaleDateString();var time=now.toLocaleTimeString();var day=now.getDay();var hrs=now.getHours();var min=now.getMinutes();var sec=now.getSeconds();var mil=now.getMilliseconds();var smoothsec=sec+(mil/1000);var smoothmin=min+(smoothsec/60);var hours=hrs+(smoothmin/60);milliseconds=smoothsec;minutes=smoothmin;hour=hours;switch(day){case 1:date='一'
break;case 2:date='二'
break;case 3:date='三'
break;case 4:date='四'
break;case 5:date='五'
break;case 6:date='六'
break;case 0:date='日'
break;}
gradient=ctx.createRadialGradient(250,250,5,250,250,300);gradient.addColorStop(0,"#03303a");gradient.addColorStop(1,"black");ctx.fillStyle=gradient;ctx.fillRect(0,0,500,500);ctx.beginPath();ctx.strokeStyle='#FF0000';ctx.arc(250,250,215,degToRad(0),degToRad((hours*30)-90));ctx.stroke();ctx.beginPath();ctx.strokeStyle='#00FFFF';ctx.arc(250,250,220,degToRad(0),degToRad(smoothmin*6-90));ctx.stroke();ctx.beginPath();ctx.strokeStyle='#ADFF2F';ctx.arc(250,250,225,degToRad(0),degToRad(smoothsec*6-90));ctx.stroke();ctx.font="25px Helvetica Bold";ctx.fillStyle='#7FFF00';ctx.fillText(today+"/星期"+date,150,230);ctx.font="23px Helvetica Bold";ctx.fillStyle='#7FFF00';ctx.fillText(time,190,280);}
setInterval(pageInit,50);
</script>
</body></html> <!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />gb2312编码
<title>html时钟</title>
<style>
body{
background-color:black;
}
div{
margin:auto;
width:500px;
position:absolute;
position: absolute;
left:50%;
top:50%;
margin-left:-250px;
margin-top:-250px;
}
</style>
<style type="text/css">object,embed{ -webkit-animation-duration:.001s;-webkit-animation-name:playerInserted; -ms-animation-duration:.001s;-ms-animation-name:playerInserted; -o-animation-duration:.001s;-o-animation-name:playerInserted; animation-duration:.001s;animation-name:playerInserted;} @-webkit-keyframes playerInserted{from{opacity:0.99;}to{opacity:1;}} @-ms-keyframes playerInserted{from{opacity:0.99;}to{opacity:1;}} @-o-keyframes playerInserted{from{opacity:0.99;}to{opacity:1;}} @keyframes playerInserted{from{opacity:0.99;}to{opacity:1;}}</style></head>
<body>
<div>
<canvas id="canvas" width="500" height="500">
</canvas></div>
<script>
var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d");ctx.strokeStyle='#7FFF00';ctx.lineWidth=3;ctx.shadowBlur=5;ctx.shadowColor='#7FFF00';var milliseconds=0;var minutes=0;var hour=0;var date="";var ctxBack=canvas.getContext("2d");var numBack=canvas.getContext("2d");ctxBack.lineWidth=1;ctxBack.shadowBlur=0;ctxBack.shadowColor='#ADFF2F';function pageInit(){showTime();showBack();drawSecPin();drawMinPin();drawHouPin();setPoint();setNum();}
function setNum(){numBack.save();numBack.translate(250,250);numBack.beginPath();numBack.fillStyle='#7FFF00';numBack.font="30px Helvetica";for(var i=0;i<60;i++){if(i%5==0){numBack.lineWidth=5;var xPoint=Math.sin(i*6*2*Math.PI/360)*195;var yPoint=-Math.cos(i*6*2*Math.PI/360)*195;numBack.fillText(i==0?12:i/5,i==0?-15:xPoint-10,i==0?-185:i<=30?yPoint+5:yPoint+10);}}
numBack.stroke();numBack.closePath();numBack.restore();}
function drawSecPin(){ctxBack.save();ctxBack.translate(250,250);ctxBack.rotate(milliseconds/60*2*Math.PI);ctxBack.beginPath();ctxBack.strokeStyle='#ADFF2F';ctxBack.lineWidth=1;ctxBack.lineJoin="bevel";ctxBack.miterLimit=10;ctxBack.moveTo(0,30);ctxBack.lineTo(3,-175);ctxBack.lineTo(13,-165);ctxBack.lineTo(0,-210);ctxBack.lineTo(-13,-165);ctxBack.lineTo(-3,-175);ctxBack.lineTo(0,30);ctxBack.stroke();ctxBack.closePath();ctxBack.restore();}
function drawMinPin(){ctxBack.save();ctxBack.translate(250,250);ctxBack.rotate(minutes*6*Math.PI/180);ctxBack.beginPath();ctxBack.strokeStyle='#00FFFF';ctxBack.lineWidth=1;ctxBack.lineJoin="bevel";ctxBack.miterLimit=10;ctxBack.moveTo(0,20);ctxBack.lineTo(3,-145);ctxBack.lineTo(10,-135);ctxBack.lineTo(0,-180);ctxBack.lineTo(-10,-135);ctxBack.lineTo(-3,-145);ctxBack.lineTo(0,20);ctxBack.stroke();ctxBack.closePath();ctxBack.restore();}
function drawHouPin(){ctxBack.save();ctxBack.translate(250,250);ctxBack.rotate(hour*30*Math.PI/180);ctxBack.beginPath();ctxBack.strokeStyle='#FF0000';ctxBack.lineWidth=1;ctxBack.lineJoin="bevel";ctxBack.miterLimit=10;ctxBack.moveTo(0,20);ctxBack.lineTo(3,-110);ctxBack.lineTo(10,-100);ctxBack.lineTo(0,-150);ctxBack.lineTo(-10,-100);ctxBack.lineTo(-3,-110);ctxBack.lineTo(0,20);ctxBack.stroke();ctxBack.closePath();ctxBack.restore();}
function setPoint(){ctxBack.beginPath();ctxBack.fillStyle='black';ctxBack.arc(250,250,3,0,2*Math.PI);ctxBack.stroke();}
function showBack(){for(var i=0;i<60;i++){ctxBack.save();ctxBack.translate(250,250);ctxBack.rotate(i/60*2*Math.PI);ctxBack.beginPath();ctxBack.strokeStyle='#7FFF00';ctxBack.moveTo(0,-250);ctxBack.lineWidth=i%5==0?5:2;ctxBack.lineTo(0,-230);ctxBack.stroke();ctxBack.closePath();ctxBack.restore();}
ctxBack.beginPath();ctxBack.arc(250,250,230,0,2*Math.PI);ctxBack.stroke();}
function degToRad(degree){var result;var factor=Math.PI/180;if(degree==0){result=270*factor;}else{result=degree*factor;}
return result;}
function showTime(){var now=new Date();var today=now.toLocaleDateString();var time=now.toLocaleTimeString();var day=now.getDay();var hrs=now.getHours();var min=now.getMinutes();var sec=now.getSeconds();var mil=now.getMilliseconds();var smoothsec=sec+(mil/1000);var smoothmin=min+(smoothsec/60);var hours=hrs+(smoothmin/60);milliseconds=smoothsec;minutes=smoothmin;hour=hours;switch(day){case 1:date='一'
break;case 2:date='二'
break;case 3:date='三'
break;case 4:date='四'
break;case 5:date='五'
break;case 6:date='六'
break;case 0:date='日'
break;}
gradient=ctx.createRadialGradient(250,250,5,250,250,300);gradient.addColorStop(0,"#03303a");gradient.addColorStop(1,"black");ctx.fillStyle=gradient;ctx.fillRect(0,0,500,500);ctx.beginPath();ctx.strokeStyle='#FF0000';ctx.arc(250,250,215,degToRad(0),degToRad((hours*30)-90));ctx.stroke();ctx.beginPath();ctx.strokeStyle='#00FFFF';ctx.arc(250,250,220,degToRad(0),degToRad(smoothmin*6-90));ctx.stroke();ctx.beginPath();ctx.strokeStyle='#ADFF2F';ctx.arc(250,250,225,degToRad(0),degToRad(smoothsec*6-90));ctx.stroke();ctx.font="25px Helvetica Bold";ctx.fillStyle='#7FFF00';ctx.fillText(today+"/星期"+date,150,230);ctx.font="23px Helvetica Bold";ctx.fillStyle='#7FFF00';ctx.fillText(time,190,280);}
setInterval(pageInit,50);
</script>
</body></html> 软件技术测试 发表于 2019-1-4 10:41
大神帮忙弄成一键桌面或屏保或者咋弄成会动桌面屏保
楼上有人已经说出软件名字了 看着不错试一试 不错，谢分享代码！ 我copy了不介意吧？ 谢谢分享 {:1_893:}不错，特炫酷。 哎呦不错哦，很好看 谢谢分享
大神威武 挺不错的。