【HTML】2023跨年烟花代码

news2024/10/6 0:26:49

*2022年圣诞节到来啦，很高兴这次我们又能一起度过~

📂文章目录

  • 前言
  • 效果展示
    • 一、夜景烟花绽放动画效果
      • HTML源码
  • 2023年(新年)春节倒计时代码
    • 源码
  • 2023除夕倒计时
    • 效果展示
    • 源码
  • 宇宙星空-效果展示
    • 1.源码
    • 2.思路
    • 3.步骤(js部分)
  • 更多干货🚀

前言

时光荏苒，白驹过隙。
2022这一年又在忙碌中度过了，过去的一年，我们同努力，我们共欢笑，每一次成功都蕴藏着我们辛勤的劳动。
新的一年即将来到，我们不能停滞不前，一味只是骄傲。愿大家与时俱进，拼搏不懈，共创新的辉煌！
借着新年到来的喜庆，给大家分享一个新年烟花的前端代码，快拿着代码展示给你的朋友们看吧！！
转眼间已经到了2022的尾巴，这一年对于国家来说丰富充实,冬奥会在北京举行、中国共产党第二十次全国代表大会召开、社会共同抗击疫情的第三年、我国完成天宫空间站建造……对于我们每一个个体，2022也承载着我们的快乐与悲伤，它是无法替代的。
新的一年马上就要到了，让我们告别2022，迎接2023！
希望2023,全糖去冰。

效果展示

一、夜景烟花绽放动画效果

HTML源码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
	<style>
		body{margin:0;padding:0;overflow: hidden;}
		.city{width:100%;position:fixed;bottom: 0px;z-index: 100;}
		.city img{width: 100%;}
	</style>
	<title>html5夜景放烟花绽放动画效果</title>
</head>
<body onselectstart = "return false">

<div style="height:700px;overflow:hidden;">

	<canvas id='cas' style="background-color:rgba(0,5,24,1);">浏览器不支持canvas</canvas>
	<div class="city"><img src="img/city.png" alt="" /></div>
	<img src="img/moon.png" alt="" id="moon" style="visibility: hidden;"/>
	<div style="display:none">
		<div class="shape">新年快乐</div>
		<div class="shape">合家幸福</div>
        <div class="shape">万事如意</div>
        <div class="shape">心想事成</div>
        <div class="shape">财源广进</div>
	</div>
	
</div>
	
	<script>
		var canvas = document.getElementById("cas");
		var ocas = document.createElement("canvas");
		var octx = ocas.getContext("2d");
		var ctx = canvas.getContext("2d");
		ocas.width = canvas.width = window.innerWidth;
		ocas.height = canvas.height = 700;
		var bigbooms = [];
	
		window.onload = function(){
			initAnimate()
		}

		function initAnimate(){
			drawBg();

			lastTime = new Date();
			animate();
		}

		var lastTime;
		function animate(){
			ctx.save();
			ctx.fillStyle = "rgba(0,5,24,0.1)";
			ctx.fillRect(0,0,canvas.width,canvas.height);
			ctx.restore();


			var newTime = new Date();
            if(newTime-lastTime>500+(window.innerHeight-767)/2){
				var random = Math.random()*100>2?true:false;
				var x = getRandom(canvas.width/5 , canvas.width*4/5);
				var y = getRandom(50 , 200);
				if(random){
					var bigboom = new Boom(getRandom(canvas.width/3,canvas.width*2/3) ,2,"#FFF" , {x:x , y:y});
					bigbooms.push(bigboom)
				}
				else {
					var bigboom = new Boom(getRandom(canvas.width/3,canvas.width*2/3) ,2,"#FFF" , {x:canvas.width/2 , y:200} , document.querySelectorAll(".shape")[parseInt(getRandom(0, document.querySelectorAll(".shape").length))]);
					bigbooms.push(bigboom)
				}
				lastTime = newTime;
				console.log(bigbooms)
			}

			stars.foreach(function(){
				this.paint();
			})

			drawMoon();

			bigbooms.foreach(function(index){
				var that = this;
				if(!this.dead){
					this._move();
					this._drawLight();
				}
				else{
					this.booms.foreach(function(index){
						if(!this.dead) {
							this.moveTo(index);
						}
						else if(index === that.booms.length-1){
							bigbooms[bigbooms.indexOf(that)] = null;
						}
					})
				}
			});
			
			raf(animate);
		}

		function drawMoon(){
			var moon = document.getElementById("moon");
			var centerX = canvas.width-200 , centerY = 100 , width = 80;
			if(moon.complete){
				ctx.drawImage(moon , centerX , centerY , width , width )
			}
			else {
				moon.onload = function(){
					ctx.drawImage(moon ,centerX , centerY , width , width)
				}
			}
			var index = 0;
			for(var i=0;i<10;i++){
				ctx.save();
				ctx.beginPath();
				ctx.arc(centerX+width/2 , centerY+width/2 , width/2+index , 0 , 2*Math.PI);
				ctx.fillStyle="rgba(240,219,120,0.005)";
				index+=2;
				ctx.fill();
				ctx.restore();
			}
			
		}

		Array.prototype.foreach = function(callback){
			for(var i=0;i<this.length;i++){
				if(this[i]!==null) callback.apply(this[i] , [i])
			}
		}

		var raf = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); };
 		
		canvas.onclick = function(){
			var x = event.clientX;
			var y = event.clientY;
			var bigboom = new Boom(getRandom(canvas.width/3,canvas.width*2/3) ,2,"#FFF" , {x:x , y:y});
			bigbooms.push(bigboom)
		}

		// canvas.addEventLisener("touchstart" , function(event){
		// 	var touch = event.targetTouches[0];
		// 	var x = event.pageX;
		// 	var y = event.pageY;
		// 	var bigboom = new Boom(getRandom(canvas.width/3,canvas.width*2/3) ,2,"#FFF" , {x:x , y:y});
		// 	bigbooms.push(bigboom)
		// })

		var Boom = function(x,r,c,boomArea,shape){
			this.booms = [];
			this.x = x;
			this.y = (canvas.height+r);
			this.r = r;
			this.c = c;
			this.shape = shape || false;
			this.boomArea = boomArea;
			this.theta = 0;
			this.dead = false;
			this.ba = parseInt(getRandom(80 , 200));
		}
		Boom.prototype = {
			_paint:function(){
				ctx.save();
				ctx.beginPath();
				ctx.arc(this.x,this.y,this.r,0,2*Math.PI);
				ctx.fillStyle = this.c;
				ctx.fill();
				ctx.restore();
			},
			_move:function(){
				var dx = this.boomArea.x - this.x , dy = this.boomArea.y - this.y;
				this.x = this.x+dx*0.01;
				this.y = this.y+dy*0.01;

				if(Math.abs(dx)<=this.ba && Math.abs(dy)<=this.ba){
					if(this.shape){
						this._shapBoom();
					}
					else this._boom();
					this.dead = true;
				}
				else {
					this._paint();
				}
			},
			_drawLight:function(){
				ctx.save();
				ctx.fillStyle = "rgba(255,228,150,0.3)";
				ctx.beginPath();
				ctx.arc(this.x , this.y , this.r+3*Math.random()+1 , 0 , 2*Math.PI);
				ctx.fill();
				ctx.restore();
			},
			_boom:function(){
				var fragNum = getRandom(30 , 200);
				var style = getRandom(0,10)>=5? 1 : 2;
				var color;
				if(style===1){
					color = {
						a:parseInt(getRandom(128,255)),
						b:parseInt(getRandom(128,255)),
						c:parseInt(getRandom(128,255))
					}
				}

				var fanwei = parseInt(getRandom(300, 400));
				for(var i=0;i<fragNum;i++){
					if(style===2){
						color = {
							a:parseInt(getRandom(128,255)),
							b:parseInt(getRandom(128,255)),
							c:parseInt(getRandom(128,255))
						}
					}
					var a = getRandom(-Math.PI, Math.PI);
					var x = getRandom(0, fanwei) * Math.cos(a) + this.x;
					var y = getRandom(0, fanwei) * Math.sin(a) + this.y; 
					var radius = getRandom(0 , 2)
					var frag = new Frag(this.x , this.y , radius , color , x , y );
					this.booms.push(frag);
				}
			},
			_shapBoom:function(){
				var that = this;
				putValue(ocas , octx , this.shape , 5, function(dots){
					var dx = canvas.width/2-that.x;
					var dy = canvas.height/2-that.y;
					for(var i=0;i<dots.length;i++){
						color = {a:dots[i].a,b:dots[i].b,c:dots[i].c}
						var x = dots[i].x;
						var y = dots[i].y;
						var radius = 1;
						var frag = new Frag(that.x , that.y , radius , color , x-dx , y-dy);
						that.booms.push(frag);
					}
				})
			}
		}

		function putValue(canvas , context , ele , dr , callback){
			context.clearRect(0,0,canvas.width,canvas.height);
			var img = new Image();
			if(ele.innerHTML.indexOf("img")>=0){
				img.src = ele.getElementsByTagName("img")[0].src;
				imgload(img , function(){
					context.drawImage(img , canvas.width/2 - img.width/2 , canvas.height/2 - img.width/2);
					dots = getimgData(canvas , context , dr);
					callback(dots);
				})
			}
			else {
				var text = ele.innerHTML;
				context.save();
				var fontSize =200;
				context.font = fontSize+"px 宋体 bold";
				context.textAlign = "center";
				context.textBaseline = "middle";
				context.fillStyle = "rgba("+parseInt(getRandom(128,255))+","+parseInt(getRandom(128,255))+","+parseInt(getRandom(128,255))+" , 1)";
				context.fillText(text , canvas.width/2 , canvas.height/2);
				context.restore();
				dots = getimgData(canvas , context , dr);
				callback(dots);
			}
		}

		function imgload(img , callback){
			if(img.complete){
				callback.call(img);
			}
			else {
				img.onload = function(){
					callback.call(this);
				}
			}
		}

		function getimgData(canvas , context , dr){
			var imgData = context.getImageData(0,0,canvas.width , canvas.height);
			context.clearRect(0,0,canvas.width , canvas.height);
			var dots = [];
			for(var x=0;x<imgData.width;x+=dr){
				for(var y=0;y<imgData.height;y+=dr){
					var i = (y*imgData.width + x)*4;
					if(imgData.data[i+3] > 128){
						var dot = {x:x , y:y , a:imgData.data[i] , b:imgData.data[i+1] , c:imgData.data[i+2]};
						dots.push(dot);
					}
				}
			}
			return dots;
		}

		function getRandom(a , b){
			return Math.random()*(b-a)+a;
		}


		var maxRadius = 1 , stars=[];
		function drawBg(){
			for(var i=0;i<100;i++){
				var r = Math.random()*maxRadius;
				var x = Math.random()*canvas.width;
				var y = Math.random()*2*canvas.height - canvas.height;
				var star = new Star(x , y , r);
				stars.push(star);
				star.paint()
			}

		}

		var Star = function(x,y,r){
			this.x = x;this.y=y;this.r=r;
		}
		Star.prototype = {
			paint:function(){
				ctx.save();
				ctx.beginPath();
				ctx.arc(this.x , this.y , this.r , 0 , 2*Math.PI);
				ctx.fillStyle = "rgba(255,255,255,"+this.r+")";
				ctx.fill();
				ctx.restore();
			}
		}

		var focallength = 250;
		var Frag = function(centerX , centerY , radius , color ,tx , ty){
			this.tx = tx;
			this.ty = ty;
			this.x = centerX;
			this.y = centerY;
			this.dead = false;
			this.centerX = centerX;
			this.centerY = centerY;
			this.radius = radius;
			this.color = color;
		}

		Frag.prototype = {
			paint:function(){
				ctx.save();
				ctx.beginPath();
				ctx.arc(this.x , this.y , this.radius , 0 , 2*Math.PI);
				ctx.fillStyle = "rgba("+this.color.a+","+this.color.b+","+this.color.c+",1)";
				ctx.fill()
				ctx.restore();
			},
			moveTo:function(index){
				this.ty = this.ty+0.3;
				var dx = this.tx - this.x , dy = this.ty - this.y;
				this.x = Math.abs(dx)<0.1 ? this.tx : (this.x+dx*0.1);
				this.y = Math.abs(dy)<0.1 ? this.ty : (this.y+dy*0.1);
				if(dx===0 && Math.abs(dy)<=80){
					this.dead = true;
				}
				this.paint();
			}
		}
	</script>

</body>
</html>

再新建文件夹img把以下两张图片放进去

city.png

moon.png

2023年(新年)春节倒计时代码

2023年新年倒计时HTML源代码，2023年春节倒计时代码，直接运行index.html即可。

在这里插入图片描述

源码

NewYear.css

/*初始化*/
* {
  padding: 0;
  margin: 0 auto;
}
/*背景色*/
body,
html {
  background: url(./img/newyear.png) no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
  /* background-color: black; */
}
/*父盒子*/
.fa {
  color:#6c5ce7;
  margin-top: 200px;
  background-color: rgba(0, 17, 17, 0.5);
  /*边框圆角*/
  border-radius: 80px;
  /*伸缩布局*/
  display: flex;
  /*改变主轴方向  竖排*/
  flex-direction: column;
}
.fir {
  margin-left: 620px;
  margin-bottom: 100px;
  font-size: 80px;
}
.fa .sj {
  /*伸缩布局*/
  display: flex;
  /*改变主轴方向*/
  flex-direction: column;
}
.fa .sj div {
  width: 100%;
  /*伸缩布局*/
  display: flex;
  /*主轴排列方式*/
  justify-content: center;
  color: black;
  margin-bottom: 60px;
  /*多行侧轴排列方式*/
  align-content: space-around;
  color:#ff7675;
  font-size: 55px;
}
.fa .sj .zi {
  color:#d63031;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新年倒计时</title>
    <link rel="stylesheet" href="NewYear.css">
    <script src="NewYear.js"></script>
</head>
<body>
    <div class="fa">
        <span class="fir">距离2023春节(1-22)还有</span>
        <div class="sj">
            <div><span></span><span class="zi">天</span></div>
            <div><span></span><span class="zi">时</span></div>
            <div><span></span><span class="zi">分</span></div>
            <div><span></span><span class="zi">秒</span></div>
        </div>
    </div>
</body>
</html>

2023除夕倒计时

效果展示

在这里插入图片描述

源码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>新年快乐</title>
<style>
body{
  overflow: hidden;
  margin: 0;
}
h1{
  position: fixed;
  top: 30%;
  left: 0;
  width: 100%;
  text-align: center;
  transform:translateY(-50%);
  font-family: 'Love Ya Like A Sister', cursive;
  font-size: 60px;
  color: #c70012;
  padding: 0 20px;
}
h1 span{
  position: fixed;
  left: 0;
  width: 100%;
  text-align: center;
  margin-top:30px;
  font-size:40px;
}
</style>
 
</head>
<body>
<h1 id="h1"></h1>
<canvas></canvas>
 
<script>
var canvas = document.querySelector("canvas"),
  ctx = canvas.getContext("2d");
 
var ww,wh;
 
function onResize(){
  ww = canvas.width = window.innerWidth;
  wh = canvas.height = window.innerHeight;
}
 
ctx.strokeStyle = "pink";
ctx.shadowBlur = 25;
ctx.shadowColor = "hsla(0, 100%, 60%,0.5)";
 
var precision = 100;
var hearts = [];
var mouseMoved = false;
function onMove(e){
  mouseMoved = true;
  if(e.type === "touchmove"){
    hearts.push(new Heart(e.touches[0].clientX, e.touches[0].clientY));
    hearts.push(new Heart(e.touches[0].clientX, e.touches[0].clientY));
  }
  else{
    hearts.push(new Heart(e.clientX, e.clientY));
    hearts.push(new Heart(e.clientX, e.clientY));
  }
}
 
var Heart = function(x,y){
  this.x = x || Math.random()*ww;
  this.y = y || Math.random()*wh;
  this.size = Math.random()*2 + 1;
  this.shadowBlur = Math.random() * 10;
  this.speedX = (Math.random()+0.2-0.6) * 8;
  this.speedY = (Math.random()+0.2-0.6) * 8;
  this.speedSize = Math.random()*0.05 + 0.01;
  this.opacity = 1;
  this.vertices = [];
  for (var i = 0; i < precision; i++) {
    var step = (i / precision - 0.5) * (Math.PI * 2);
    var vector = {
      x : (15 * Math.pow(Math.sin(step), 3)),
      y : -(13 * Math.cos(step) - 5 * Math.cos(2 * step) - 2 * Math.cos(3 * step) - Math.cos(4 * step))
    }
    this.vertices.push(vector);
  }
}
 
Heart.prototype.draw = function(){
  this.size -= this.speedSize;
  this.x += this.speedX;
  this.y += this.speedY;
  ctx.save();
  ctx.translate(-1000,this.y);
  ctx.scale(this.size, this.size);
  ctx.beginPath();
  for (var i = 0; i < precision; i++) {
    var vector = this.vertices[i];
    ctx.lineTo(vector.x, vector.y);
  }
  ctx.globalAlpha = this.size;
  ctx.shadowBlur = Math.round((3 - this.size) * 10);
  ctx.shadowColor = "hsla(0, 100%, 60%,0.5)";
  ctx.shadowOffsetX = this.x + 1000;
  ctx.globalCompositeOperation = "screen"
  ctx.closePath();
  ctx.fill()
  ctx.restore();
};
 
 
function render(a){
  requestAnimationFrame(render);
 
  hearts.push(new Heart())
  ctx.clearRect(0,0,ww,wh);
  for (var i = 0; i < hearts.length; i++) {
    hearts[i].draw();
    if(hearts[i].size <= 0){
      hearts.splice(i,1);
      i--;
    }
  }
}
 
 
onResize();
window.addEventListener("mousemove", onMove);
window.addEventListener("touchmove", onMove);
window.addEventListener("resize", onResize);
requestAnimationFrame(render);
 
window.onload=function starttime(){
        time(h1,'2023/1/21');     // 2023年春节时间
        ptimer = setTimeout(starttime,1000); // 添加计时器
}
 
    function time(obj,futimg){
        var nowtime = new Date().getTime(); // 现在时间转换为时间戳
        var futruetime =  new Date(futimg).getTime(); // 未来时间转换为时间戳
        var msec = futruetime-nowtime; // 毫秒 未来时间-现在时间
        var time = (msec/1000);  // 毫秒/1000
        var day = parseInt(time/86400); // 天  24*60*60*1000
        var hour = parseInt(time/3600)-24*day;    // 小时 60*60 总小时数-过去的小时数=现在的小时数
        var minute = parseInt(time%3600/60); // 分 -(day*24) 以60秒为一整份 取余 剩下秒数 秒数/60 就是分钟数
        var second = parseInt(time%60);  // 以60秒为一整份 取余 剩下秒数
        obj.innerHTML="<br>2023年<br>除夕倒计时：<br>"+day+"天"+hour+"小时"+minute+"分"+second+"秒"+"<br><span>善良 勇敢 优秀 决不妥协<br>祝你也祝我<br>"
        return true;
    }
</script>
  <audio id="bgmusic" src="http://music.163.com/song/media/outer/url?id=1851244378.mp3" autoplay="autoplay" loop="loop" style="display: block; width: 3%; height:3%;"></audio>
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function () {
            function audioAutoPlay() {
                var audio = document.getElementById('bgmusic');
                audio.play();
                document.addEventListener("WeixinJSBridgeReady", function () {
                    audio.play();
                    }, false);
                 }
                 audioAutoPlay();
                 });
</script>
</body>
</html>

宇宙星空-效果展示

在这里插入图片描述
距离2023.1.1还有27天（天数我是乱写的，并不是按照文章发布时间来写的，大家可以自己修改源码）

1.源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
 
    <script>
        var count = document.getElementsByClassName('main');
        var times0 = document.getElementsByClassName('time');
        var inputtime = +new Date("2023/01/01 00:00:00");
        console.log(inputtime);
 
        var timer = null;
        clearInterval(timer)
        timer = setInterval(countdown,1000)
 
 
        function countdown(){
            var nowtime = +new Date();
            
            var times = parseInt((inputtime - nowtime ) / 1000);
            
            if(times >= 0){
                     
            var d = parseInt(times/60/60/24);
            d = d < 10 ? '0' + d : d ;
 
            var h = parseInt(times/60 /60%24);
            h = h < 10 ? '0' + h : h ;
 
           var m = parseInt(times/60%60);
            m = m < 10 ? '0' + m : m ;
 
            var s = parseInt(times%60);
            s = s < 10 ? '0' + s : s ;
 
            times0[0].innerHTML = d;
            times0[1].innerHTML = h;
            times0[2].innerHTML = m;
            times0[3].innerHTML = s;
            }else{
                clearInterval(timer)
            }
         }               
    </script>
 
 
    <style>
        *{
            margin: 0%;
            padding: 0%;
        }
 
        body{
            height: 100vh;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .block{
            display: inline-block;
            margin-left: 50px;
        }
        .block p{
            font-size: 40px;
            color: aliceblue;
            font-weight: bolder;
            text-align: center;
        }
        .block a{
            font-size: 20px;
            color: aliceblue;
        }
        #nyc{
            color: aliceblue;
            font-size: 50px;
        }
 
    </style>
</head>
 
 
<body background="图片\10523Q492-0.jpg">
    <div class="main">
        <p id="nyc"> New Year Countdown</p>
        <br>
        
        <div class="block">
            <p class="time">00</p>
            <a>days</a>
        </div>
        <div class="block">
            <p class="time">00</p>
            <a>hours</a>
        </div>
        <div class="block">
            <p class="time">00</p>
            <a>minutes</a>
        </div>
        <div class="block">
            <p class="time">00</p>
            <a>seconds</a>
        </div>
    </div>    
</body>
 
 
</html>

2.思路

创建一个计时器函数, 计算出当前时间和目标时间的距离.

利用"setInterval"方法不断调用计时器函数,达到数字变换, 也就是倒计时的效果.

3.步骤(js部分)

         var count = document.getElementsByClassName('main');
         var times0 = document.getElementsByClassName('time');
        
         var inputtime = +new Date("2023/01/01 00:00:00");
         var nowtime = +new Date();
         console.log(inputtime);
 
         var timer = null;
         clearInterval(timer)
         timer = setInterval(countdown,1000)

A."var"定义变量
利用"document.getElementsByClassName()"方法提取中已经创建的元素作为js对象.
类似的方法有:

在这里插入图片描述
B. 获取时间

"+new Date()"方法可以获取当前时间距离"1970年1月1日0时0分0秒’的毫秒数, 利用这点可以获取当前时间.
括号中若添加具体日期(写法: 年/月/日 时:分:秒 ), 则可以获取具体日期距离"1970年1月1日0时0分0秒’的毫秒数, 利用这点可以获取目标时间.

function countdown(){
            
            var times = parseInt((inputtime - nowtime ) / 1000);
            
            if(times >= 0){
            var d = parseInt(times/60/60/24);
            d = d < 10 ? '0' + d : d ;
 
            var h = parseInt(times/60 /60%24);
            h = h < 10 ? '0' + h : h ;
 
           var m = parseInt(times/60%60);
            m = m < 10 ? '0' + m : m ;
 
            var s = parseInt(times%60);
            s = s < 10 ? '0' + s : s ;
 
            times0[0].innerHTML = d;
            times0[1].innerHTML = h;
            times0[2].innerHTML = m;
            times0[3].innerHTML = s;
            }else{
                clearInterval(timer)
            }
        }

C.创建计时器函数
计算时间的距离:
(目标时间-当前时间)/1000=时间距离

 var times = parseInt((inputtime - nowtime ) / 1000);

时间距离转换成 天数,时数,分数,秒数:
并做一个简单判断:
如果计算出来的数字小于10, 则在数字面前添加一个0一保持美观和谐.

var d = parseInt(times/60/60/24);
            d = d < 10 ? '0' + d : d ;
 
            var h = parseInt(times/60 /60%24);
            h = h < 10 ? '0' + h : h ;
 
           var m = parseInt(times/60%60);
            m = m < 10 ? '0' + m : m ;
 
            var s = parseInt(times%60);
            s = s < 10 ? '0' + s : s ;

将计算所得数字添加到页面中:

利用到了 "innerhtml"方法, 主要用于改变中已经定义的元素.
最后做一个总的判断:
如果时间距离大于零, 则做计算, 展现倒计时效果.
如果距离等于零, 则对函数的反复调用停止, 计时终止

if(times >= 0){
 
 
 
 }else{
 clearInterval(timer)
            }

D.反复调用计时器函数

        var timer = null;
        clearInterval(timer)
        timer = setInterval(countdown,1000)

        var timer = null;
        clearInterval(timer)
        timer = setInterval(countdown,1000)

"setInterval()"方法中有两个参数:
第一个: 将要调用的函数名;
第二个: 调用的间隔时间, 单位为一毫秒, 自然, “1000"即代表"1秒钟调用一次”
"clearInterval(timer)"指在调用之前将调用器归零

更多干货🚀

  1. 如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
  2. 💗【👇🏻👇🏻👇🏻关注我| 💬获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多
    前端 开发者，一起探讨 前端 Node 知识，互相学习」！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/115122.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

图像处理：Tiler制作你的专属卡通头像和LOGO(圣诞特别篇)

图像处理：Tiler制作你的专属卡通头像和LOGO(圣诞特别篇)

目录0 前言1 安装与贴图2 算法原理2.1 计算像素频率2.2 计算像素相对距离2.3 计算合适贴图3 配置功能4 使用&#xff1a;以圣诞老人为例0 前言 Tiler是一种使用各种其他较小图像平铺创建新图像的工具&#xff0c;它与其他马赛克工具不同&#xff0c;因为它可以适应多种形状、大…
阅读更多...
微信开放平台之第三方平台开发，模板小程序如何提交？

微信开放平台之第三方平台开发，模板小程序如何提交？

大家好&#xff0c;我是悟空码字 12月25日&#xff0c;天气晴朗&#xff0c;阳光普照&#xff0c;今天是圣诞节。因为疫情影响&#xff0c;小羊人的增多&#xff0c;街上放眼望去&#xff0c;人烟稀少。楼下除了几个十一二岁的小男孩在玩耍&#xff0c;也没有像往日老人悠闲打…
阅读更多...
Java --- JUC之线程中断机制

Java --- JUC之线程中断机制

目录 一、什么是中断机制 二、三大中断方法 2.1、如何停止中断运行中的线程&#xff1f; 2.1.1、通过volatile实现线程中断停止 2.1.2、通过AtomicBoolean实现线程中断停止 2.1.3、通过interrupt()实现线程中断停止 2.2、interrupted()方法使用 一、什么是中断机制 一个…
阅读更多...
如何定制化Spring Boot Starter，这次我终于学会了

如何定制化Spring Boot Starter，这次我终于学会了

文章目录什么是Spring Boot Starter实现步骤启动器自动配置包总结自定义Starter的实现逻辑Spring Boot Starter官网描述&#xff1a;Spring Boot Starter官方介绍 什么是Spring Boot Starter Starters可以理解为启动器&#xff0c;它包含了一系列可以集成到应用里面的依赖包&…
阅读更多...
人工智能：通过Python实现语音合成的案例

人工智能：通过Python实现语音合成的案例

今天给大家介绍一下基于百度的AI语音技术SDK实现语音合成的案例&#xff0c;编程语言采用Python&#xff0c;希望对大家能有所帮助&#xff01; 注册百度AI平台应用百度AI开放平台-全球领先的人工智能服务平台 首先登陆自己的百度账户&#xff0c;打开百度的AI开发平台页面 搜索…
阅读更多...
python实战——阿里大药房自动化购买药品(selenium)

python实战——阿里大药房自动化购买药品(selenium)

前言 大家早好、午好、晚好吖 ❤ ~ 我给大家准备了一些资料&#xff0c;包括: 2022最新Python视频教程、Python电子书10个G &#xff08;涵盖基础、爬虫、数据分析、web开发、机器学习、人工智能、面试题&#xff09;、Python学习路线图等等 直接在文末名片自取即可&#x…
阅读更多...
循环神经网络-基础篇Basic-RNN

循环神经网络-基础篇Basic-RNN

循环神经网络-基础篇Basic-RNN 我们把全连接网络也叫做稠密网络DNN&#xff0c;其中X1到X8是不同样本的特征 而本文介绍的循环神经网络RNN主要处理的是具有序列关系的输入数据&#xff0c;即前面的输入和后面的输入是有关系的。例如天气&#xff0c;股市&#xff0c;金融数据和…
阅读更多...
iText如何提取PDF中的数据——1. 总览

iText如何提取PDF中的数据——1. 总览

作者&#xff1a;CuteXiaoKe 微信公众号&#xff1a;CuteXiaoKe | 原文 最近收到大家很多的私信提问&#xff0c;也是大家比较关心的问题:如果我有一个PDF&#xff0c;我该如何使用iText获取PDF里面的内容呢&#xff0c;比如文本、图片、表格等。iText官方给出了相关的整体解决…
阅读更多...
基于Xlinx的时序分析与约束（5）----衍生时钟约束

基于Xlinx的时序分析与约束（5）----衍生时钟约束

衍生时钟约束语法 衍生时钟&#xff08;Generated Clocks&#xff0c;又称为生成时钟&#xff09;是指由设计中已有的主时钟通过倍频、分频或者相移等操作后产生的新的时钟信号&#xff0c;如由MMCM或PLL或由组合逻辑生成的倍、分频时钟信号。 衍生时钟约束必须指定时钟源&…
阅读更多...
【高级篇04】MySQL逻辑架构

【高级篇04】MySQL逻辑架构

文章目录第四章&#xff1a;逻辑架构逻辑架构SQL执行流程数据库缓冲池第四章&#xff1a;逻辑架构 逻辑架构 第一层&#xff1a;连接层。客户端访问MySQL服务器&#xff0c;首先建立TCP连接&#xff0c;经过三次握手建立连接成功后&#xff0c;MySQL服务器对TCP传输过来的账号…
阅读更多...
各个集合比较

各个集合比较

1、 Queue与Deque的区别 引言&#xff1a; 在研究java集合源码的时候&#xff0c;发现了一个很少用但是很有趣的点&#xff1a;Queue以及Deque&#xff1b; 平常在写leetcode经常用LinkedList向上转型Deque作为栈或者队列使用&#xff0c;但是一直都不知道Queue的作用&#x…
阅读更多...
微信小程序入门

微信小程序入门

目录 一&#xff0c;简介 二&#xff0c;小程序开发环境搭建 1.申请账号 2.安装开发工具 3.小程序工具使用 三&#xff0c;目录结构以及json配置 1.目录结果 2.json配置 3.JSON 语法 4.WXML 5.wxss 6.JS 逻辑交互 四&#xff0c;小程序宿主环境 1.程序与页面 2.组件…
阅读更多...
DFMEA之严重度/频度/探测度/风险优先系数

DFMEA之严重度/频度/探测度/风险优先系数

文章目录介绍严重度频度探测度风险优先系数介绍 在实施DFMEA阶段中&#xff0c;要求、潜在失效模式、潜在失效后果、潜在失效原因和现有设计控制措施等 5 个为基础项, 它们的分析是决定 DFMEA实施成功与否的关键&#xff1b;严重度&#xff08;S&#xff09;&#xff0c;频度&a…
阅读更多...
4.2、网络层提供的两种服务

4.2、网络层提供的两种服务

1、面向连接的虚电路服务 虚电路服务的核心思想&#xff1a;可靠通信由网络自身来保证\color{red}可靠通信由网络自身来保证可靠通信由网络自身来保证 当两台计算机进行通信时&#xff0c;必须建立网络层的连接\color{red}网络层的连接网络层的连接----虚电路VC\color{red}虚…
阅读更多...
centos7搭建DNS服务(use)

centos7搭建DNS服务(use)

参考&#xff1a;centos7搭建DNS服务完整版 CentOS 7 配置DNS服务 Centos7 DNS 服务器配置步骤 --use DNS服务类型 主机记录记录类型记录值ns1A192.168.1.1ns2A192.168.1.2wwwA192.168.1.100bbsCNAMEwwwftpA192.168.1.110mailMX 10192.168.1.120 一、服务配置 1.1 关闭SELi…
阅读更多...
模型实战一之YOLOv7实例分割、模型训练自己数据集

模型实战一之YOLOv7实例分割、模型训练自己数据集

模型实战一之YOLOv7实例分割、模型训练自己数据集 1.环境准备 下载yolov7实例分割模型&#xff1a; git clone https://github.com/WongKinYiu/yolov7.git -b mask yolov7-maskcd yolov7-mask安装环境 #查看已安装环境 conda info --envs #查看安装了哪些包 conda list#创建…
阅读更多...
IMX6ULL学习笔记（15）——GPIO输出接口使用【官方SDK方式】

IMX6ULL学习笔记（15）——GPIO输出接口使用【官方SDK方式】

一、GPIO简介 i.MX6ULL 芯片的 GPIO 被分成 5 组,并且每组 GPIO 的数量不尽相同&#xff0c;例如 GPIO1 拥有 32 个引脚&#xff0c; GPIO2 拥有 22 个引脚&#xff0c; 其他 GPIO 分组的数量以及每个 GPIO 的功能请参考 《i.MX 6UltraLite Applications Processor Reference M…
阅读更多...
市级数字政府电子政务大数据中心项目建设和运营方案

市级数字政府电子政务大数据中心项目建设和运营方案

【版权声明】本资料来源网络&#xff0c;仅用于行业知识分享&#xff0c;供个人学习参考&#xff0c;不得作商业用途。【侵删致歉】如有侵权请联系小编&#xff0c;将在收到信息后第一时间进行删除&#xff01; 完整资料领取见文末&#xff0c;部分资料内容&#xff1a; 1.1 大…
阅读更多...
【QTimeEdit | QDateEdit | QDateTimeEdit | QCalendarWidget | QLCDNumber】

【QTimeEdit | QDateEdit | QDateTimeEdit | QCalendarWidget | QLCDNumber】

【QTimeEdit | QDateEdit | QDateTimeEdit | QCalendarWidget | QLCDNumber】【1】UI界面设计【2】相关头文件【3】构造函数初始化【4】setDate | setTime | setDateTime | currentDate | currentTime | currentDateTime【5】maximumDate | maximumTime | minimumDate | minimu…
阅读更多...
基于Java+SpringBoot+vue等疫情期间网课管理系统详细设计和实现

基于Java+SpringBoot+vue等疫情期间网课管理系统详细设计和实现

博主介绍&#xff1a;✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取联系&#x1f345;精彩专栏推荐订阅收藏&#x1f447;&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023