https://c.runoob.com/front-end/61
<!DOCTYPE html>
<html>
<head>
<title>放假倒计时</title>
<meta charset="utf-8">
<style type="text/css">
.gradient{
background: -moz-linear-gradient(top, #00FF00 0%, #FFFF00 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#66FFFF), color-stop(60%%,#FFFF00));
background: -webkit-linear-gradient(top, #00FF00 0%,#FF00FF 60%);
background: -o-linear-gradient(top, FF00FF 0%,#66FFFF 80%);
background: -ms-linear-gradient(top, #00FF00 0%,#FF00FF 70%);
background: linear-gradient(to bottom, #66FFFF 0%,#FFFF00 90%);
}
</style>
</head>
<body class ="gradient">
<canvas id='cavs' style='position:fixed; z-index:-1;'></canvas>
<p style ="color:#EE82EE;text-align: center;font-size:75px">你距离放假还有：</p>
<div style ="text-align: center;font-size:75px">
<span id="t_d"style ="color:orange" >00 天</span>
<span id="t_h" style ="color:orange">00 时</span>
<span id="t_m" style ="color:orange">00 分</span>
<span id="t_s" style ="color:orange">00 秒</span>
</div>
</body>
</html>
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
var canvas = document.getElementById("cavs");
const WIDTH = window.innerWidth;
const HEIGHT = window.innerHeight;
canvas.setAttribute("width", WIDTH);
canvas.setAttribute("height", HEIGHT);
var context = canvas.getContext("2d");
var start =
{
loves: [],
DURATION: 30,
begin: function()
{
this.createLove();
},
createLove: function()
{
for (var i = 0; i < WIDTH / 59; i++)
{
var love = new Love();
this.loves.push(love);
}
setInterval(this.drawLove.bind(this), this.DURATION);
},
drawLove: function()
{
context.clearRect(0, 0, WIDTH, HEIGHT);
for (var key in this.loves)
{
this.loves[key].draw();
}
}
}
function Love()
{
var me = this;
function rand()
{
me.maxScale = (Math.random() * 3.2 + 1.2) * WIDTH / 521;
me.curScale = 1.2 * WIDTH / 521;
me.x = Math.floor(Math.random() * WIDTH - 40);
me.y = Math.floor(HEIGHT - Math.random() * 200);
me.ColR = Math.floor(Math.random() * 255);
me.ColG = Math.floor(Math.random() * 255);
me.ColB = Math.floor(Math.random() * 255);
me.alpha = Math.random() * 0.2 + 0.8;
me.vector = Math.random() * 5 + 0.4;
}
(function(){rand();} ());
me.draw = function()
{
if (me.alpha < 0.01) rand();
if(me.curScale < me.maxScale) me.curScale += 0.3;
x = me.x;
y = me.y;
scale = me.curScale;
context.fillStyle = "rgba(" + me.ColR + "," + me.ColG + "," + me.ColB + "," + me.alpha + ")";
context.shadowBlur = 10;
context.shadowColor = "rgb(" + me.ColR + "," + me.ColG + "," + me.ColB + ")";
context.beginPath();
context.bezierCurveTo( x + 2.5*scale, y + 2.5*scale, x + 2.0*scale, y, x, y );
context.bezierCurveTo( x - 3.0*scale, y, x - 3.0*scale, y + 3.5*scale,x - 3.0*scale,y + 3.5*scale );
context.bezierCurveTo( x - 3.0*scale, y + 5.5*scale, x - 1.0*scale, y + 7.7*scale, x + 2.5*scale, y + 9.5*scale );
context.bezierCurveTo( x + 6.0*scale, y + 7.7*scale, x + 8.0*scale, y + 5.5*scale, x + 8.0*scale, y + 3.5*scale );
context.bezierCurveTo( x + 8.0*scale, y + 3.5*scale, x + 8.0*scale, y, x + 5.0*scale, y );
context.bezierCurveTo( x + 3.5*scale, y, x + 2.5*scale, y + 2.5*scale, x + 2.5*scale, y + 2.5*scale );
context.fill();
context.closePath();
me.y -= me.vector;
me.alpha -= (me.vector / 2.9 * 3.5 / HEIGHT);
}
}
window.onload = function()
{
start.begin();
}
function getRTime(){
var EndTime= new Date('2020/9/30 17:30:00'); //截止时间
var NowTime = new Date();
var t =EndTime.getTime() - NowTime.getTime();
var d=Math.floor(t/1000/60/60/24);
var h=Math.floor(t/1000/60/60%24);
var m=Math.floor(t/1000/60%60);
var s=Math.floor(t/1000%60);
document.getElementById("t_d").innerHTML = d + "天";
document.getElementById("t_h").innerHTML = h + "时";
document.getElementById("t_m").innerHTML = m + "分";
document.getElementById("t_s").innerHTML = s + "秒";
}
setInterval(getRTime,1000);
</script>
浙公网安备 33010602011771号