前端黑洞网 首页
资源下载

前端电子书

前端视频教程

前端小游戏

前端脚本

前端项目实战

其他资源

博客 问答 程序员的那些事
写博客 注册
本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2024-11(4)

canvas绘制倒计时

发布于2021-03-07 22:18     阅读(1252)     评论(0)     点赞(14)     收藏(3)

无图不欢，先上图
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta name="keywords" content="风舞红枫,前端技术,canvas"/>
	<meta name="description" content="风舞红枫,前端技术,canvas,vue,react,node,个人博客"/>
	<meta charset="utf-8">
	<title>倒计时</title>
	<link rel="icon" href="../image/icon2.ico">
	<style type="text/css">
		*{margin:0;padding:0;}
		html,body{height:100%;background:rgba(255,0,45);cursor: none;overflow: hidden;}

		.cur{width:6px;height:6px;background: rgb(255,255,255);border-radius:50%;position:absolute;z-index:1;opacity: 0;}

		.Date{position: absolute;z-index:3;width: 200px;height:120px;background: rgb(0,0,255,0.1);left:0;right:0;margin:0 auto;border-radius: 10px 10px 20px 20px;}
		.Date h3{height:20px;text-align: center;font-size: 16px;font-weight: normal;}
		.Date p{height:100px;background: rgba(255,255,255,0.4);font-size: 12px;text-align: center;line-height: 100px;border-radius: 0 0 20px 20px;}
		.Date p .DateCxt{font-size: 30px;}

		.time{height:100%;width:100%;display: flex;justify-content: space-around;align-items: center;position: absolute;z-index:3;}
		.num{width: 100px;height:140px;}
		.num span{float:left;width:10px;height:10px;border-radius:50%;}
		.num .Tcolor{background:rgba(255,255,255,1);}
		.num .Fcolor{background: rgba(255,255,255,0);}

		.snowflake{position: absolute;z-index: 3;display: block;}
		.decorate{position: absolute;z-index: 1;display: block;}
		.say{position: absolute;z-index: 3;display: block;left: 0;right:0;bottom:20px;margin:0 auto;}

		img{position:absolute;z-index:-1;}
		audio{position:absolute;z-index:-1;}

		.c3{position:absolute;z-index:2;bottom:0;left:-250px;width:250px;height:91px;background: url(5-3.png) no-repeat;transform: rotateY(180deg);animation: startSD 4s steps(1,start) infinite;}
		@-webkit-keyframes startSD{
			0%{background-position:-0px 0px;}
			25%{background-position:-250px 0px;}
			50%{background-position:-500px 0px;}
			75%{background-position:-750px 0px;}
			100%{background-position:-0px 0px;}
		}

		.lr{width:70px;height:70px;position:absolute;z-index:1;bottom:0px;left:0;right:0;margin:0 auto;}
		.img4{width:40px;position:absolute;z-index:1;bottom:20px;left:0;right:0;margin:0 auto;display: none;}
	</style>
</head>
<body>
	<div class="cur"></div>
	<div class="Date">
		<h3>Count down</h3>
		<p>The remaining <span class="DateCxt"></span> days</p>
	</div>
	<div class="time">
		<div class="num1 num"></div>
		<div class="num2 num"></div>
		<div class="num0 num"></div>
		<div class="num3 num"></div>
		<div class="num4 num"></div>
		<div class="num0 num"></div>
		<div class="num5 num"></div>
		<div class="num6 num"></div>
	</div>
	<canvas class="snowflake"></canvas>
	<canvas class="decorate"></canvas>
	<img src="5-1.png" class="img1">
	<img src="5-2.png" class="img2">
	<img src="5-5.png" class="img3">
	<div class="c3"></div>
	<div class="lr"></div>
	<img src="5-7.png" class="img4">
	<canvas class="say"></canvas>
	<audio src="2278.wav" autoplay loop></audio>
</body>
<script type="text/javascript">
window.onload = function(){
	//倒计时效果
	var num = [
				[
					1,1,1,1,1,1,1,1,1,1,
					1,1,1,1,1,1,1,1,1,1,
					1,1,0,0,0,0,0,0,1,1,
					1,1,0,0,0,0,0,0,1,1,
					1,1,0,0,0,0,0,0,1,1,
					1,1,0,0,0,0,0,0,1,1,
					1,1,0,0,0,0,0,0,1,1,
					1,1,0,0,0,0,0,0,1,1,
					1,1,0,0,0,0,0,0,1,1,
					1,1,0,0,0,0,0,0,1,1,
					1,1,0,0,0,0,0,0,1,1,
					1,1,0,0,0,0,0,0,1,1,
					1,1,1,1,1,1,1,1,1,1,
					1,1,1,1,1,1,1,1,1,1
				],
				[
					0,0,0,0,1,1,0,0,0,0,
					0,0,0,1,1,1,0,0,0,0,
					0,0,1,1,1,1,0,0,0,0,
					0,1,1,0,1,1,0,0,0,0,
					1,1,0,0,1,1,0,0,0,0,
					0,0,0,0,1,1,0,0,0,0,
					0,0,0,0,1,1,0,0,0,0,
					0,0,0,0,1,1,0,0,0,0,
					0,0,0,0,1,1,0,0,0,0,
					0,0,0,0,1,1,0,0,0,0,
					0,0,0,0,1,1,0,0,0,0,
					0,0,0,0,1,1,0,0,0,0,
					1,1,1,1,1,1,1,1,1,1,
					1,1,1,1,1,1,1,1,1,1
				],
				[
					1,1,1,1,1,1,1,1,1,1,
					1,1,1,1,1,1,1,1,1,1,
					0,0,0,0,0,0,0,0,1,1,
					0,0,0,0,0,0,0,0,1,1,
					0,0,0,0,0,0,0,0,1,1,
					0,0,0,0,0,0,0,0,1,1,
					1,1,1,1,1,1,1,1,1,1,
					1,1,1,1,1,1,1,1,1,1,
					1,1,0,0,0,0,0,0,0,0,
					1,1,0,0,0,0,0,0,0,0,
					1,1,0,0,0,0,0,0,0,0,
					1,1,0,0,0,0,0,0,0,0,
					1,1,1,1,1,1,1,1,1,1,
					1,1,1,1,1,1,1,1,1,1
				],
				[
					1,1,1,1,1,1,1,1,1,1,
					1,1,1,1,1,1,1,1,1,1,
					0,0,0,0,0,0,0,0,1,1,
					0,0,0,0,0,0,0,0,1,1,
					0,0,0,0,0,0,0,0,1,1,
					0,0,0,0,0,0,0,0,1,1,
					1,1,1,1,1,1,1,1,1,1,
					1,1,1,1,1,1,1,1,1,1,
					0,0,0,0,0,0,0,0,1,1,
					0,0,0,0,0,0,0,0,1,1,
					0,0,0,0,0,0,0,0,1,1,
					0,0,0,0,0,0,0,0,1,1,
					1,1,1,1,1,1,1,1,1,1,
					1,1,1,1,1,1,1,1,1,1
				],
				[
					1,1,0,0,0,0,0,0,1,1,
					1,1,0,0,0,0,0,0,1,1,
					1,1,0,0,0,0,0,0,1,1,
					1,1,0,0,0,0,0,0,1,1,
					1,1,0,0,0,0,0,0,1,1,
					1,1,0,0,0,0,0,0,1,1,
					1,1,1,1,1,1,1,1,1,1,
					1,1,1,1,1,1,1,1,1,1,
					0,0,0,0,0,0,0,0,1,1,
					0,0,0,0,0,0,0,0,1,1,
					0,0,0,0,0,0,0,0,1,1,
					0,0,0,0,0,0,0,0,1,1,
					0,0,0,0,0,0,0,0,1,1,
					0,0,0,0,0,0,0,0,1,1
				],
				[
					1,1,1,1,1,1,1,1,1,1,
					1,1,1,1,1,1,1,1,1,1,
					1,1,0,0,0,0,0,0,0,0,
					1,1,0,0,0,0,0,0,0,0,
					1,1,0,0,0,0,0,0,0,0,
					1,1,0,0,0,0,0,0,0,0,
					1,1,1,1,1,1,1,1,1,1,
					1,1,1,1,1,1,1,1,1,1,
					0,0,0,0,0,0,0,0,1,1,
					0,0,0,0,0,0,0,0,1,1,
					0,0,0,0,0,0,0,0,1,1,
					0,0,0,0,0,0,0,0,1,1,
					1,1,1,1,1,1,1,1,1,1,
					1,1,1,1,1,1,1,1,1,1
				],
				[
					1,1,1,1,1,1,1,1,1,1,
					1,1,1,1,1,1,1,1,1,1,
					1,1,0,0,0,0,0,0,0,0,
					1,1,0,0,0,0,0,0,0,0,
					1,1,0,0,0,0,0,0,0,0,
					1,1,0,0,0,0,0,0,0,0,
					1,1,1,1,1,1,1,1,1,1,
					1,1,1,1,1,1,1,1,1,1,
					1,1,0,0,0,0,0,0,1,1,
					1,1,0,0,0,0,0,0,1,1,
					1,1,0,0,0,0,0,0,1,1,
					1,1,0,0,0,0,0,0,1,1,
					1,1,1,1,1,1,1,1,1,1,
					1,1,1,1,1,1,1,1,1,1
				],
				[
					1,1,1,1,1,1,1,1,1,1,
					1,1,1,1,1,1,1,1,1,1,
					0,0,0,0,0,0,0,0,1,1,
					0,0,0,0,0,0,0,0,1,1,
					0,0,0,0,0,0,0,0,1,1,
					0,0,0,0,0,0,0,0,1,1,
					0,0,0,0,0,0,0,0,1,1,
					0,0,0,0,0,0,0,0,1,1,
					0,0,0,0,0,0,0,0,1,1,
					0,0,0,0,0,0,0,0,1,1,
					0,0,0,0,0,0,0,0,1,1,
					0,0,0,0,0,0,0,0,1,1,
					0,0,0,0,0,0,0,0,1,1,
					0,0,0,0,0,0,0,0,1,1
				],
				[
					1,1,1,1,1,1,1,1,1,1,
					1,1,1,1,1,1,1,1,1,1,
					1,1,0,0,0,0,0,0,1,1,
					1,1,0,0,0,0,0,0,1,1,
					1,1,0,0,0,0,0,0,1,1,
					1,1,0,0,0,0,0,0,1,1,
					1,1,1,1,1,1,1,1,1,1,
					1,1,1,1,1,1,1,1,1,1,
					1,1,0,0,0,0,0,0,1,1,
					1,1,0,0,0,0,0,0,1,1,
					1,1,0,0,0,0,0,0,1,1,
					1,1,0,0,0,0,0,0,1,1,
					1,1,1,1,1,1,1,1,1,1,
					1,1,1,1,1,1,1,1,1,1
				],
				[
					1,1,1,1,1,1,1,1,1,1,
					1,1,1,1,1,1,1,1,1,1,
					1,1,0,0,0,0,0,0,1,1,
					1,1,0,0,0,0,0,0,1,1,
					1,1,0,0,0,0,0,0,1,1,
					1,1,0,0,0,0,0,0,1,1,
					1,1,1,1,1,1,1,1,1,1,
					1,1,1,1,1,1,1,1,1,1,
					0,0,0,0,0,0,0,0,1,1,
					0,0,0,0,0,0,0,0,1,1,
					0,0,0,0,0,0,0,0,1,1,
					0,0,0,0,0,0,0,0,1,1,
					1,1,1,1,1,1,1,1,1,1,
					1,1,1,1,1,1,1,1,1,1
				],
				[
					0,0,0,0,0,0,0,0,0,0,
					0,0,0,0,0,0,0,0,0,0,
					0,0,0,1,1,1,1,0,0,0,
					0,0,0,1,1,1,1,0,0,0,
					0,0,0,1,1,1,1,0,0,0,
					0,0,0,1,1,1,1,0,0,0,
					0,0,0,0,0,0,0,0,0,0,
					0,0,0,0,0,0,0,0,0,0,
					0,0,0,1,1,1,1,0,0,0,
					0,0,0,1,1,1,1,0,0,0,
					0,0,0,1,1,1,1,0,0,0,
					0,0,0,1,1,1,1,0,0,0,
					0,0,0,0,0,0,0,0,0,0,
					0,0,0,0,0,0,0,0,0,0
				]

			]

	for(var i = 0;i < 8;i++){
		for( var j = 0; j < 140;j++){
			document.getElementsByClassName('num')[i].innerHTML += "<span class=span"+i+"></span>"
		}
	}

	start();
	Connector(2);
	Connector(5);
	var d=0,h=0,m=0,s=0;

	var time = setInterval(function(){
		start();
	},1000);

	function getYmdHms(time){
		let date = time === undefined ? new Date() : new Date(time);
		if((date.getMonth()+1) < 12 && date.getHours() < 25){
			return date.getFullYear() + '/12/25 00:00:00'
		}else{
			return date.getFullYear() + 1 + '/12/25 00:00:00'
		}
	}
	function start(){
		var future = new Date(getYmdHms());
		var now = new Date();

		var lastd=d,lasth=h,lastm=m,lasts=s;

		d = parseInt(((future.getTime() - now.getTime())/1000/3600/24))
		h = parseInt((future.getTime() - now.getTime())/1000/3600 - d*24);
		m = parseInt(((future.getTime() - now.getTime())/1000/60) - h*60 - d*24*60);
		s = parseInt(((future.getTime() - now.getTime())/1000) - m*60 - h*60*60 - d*24*60*60);

		if(lastd != d){
			document.getElementsByClassName('DateCxt')[0].innerHTML = d;
		}

		if(d <= 0 && h <= 0  && m <= 0  && s <= 0 ){
			clearInterval(time);
		}else{
			if(lasth != h){
				print(h , 0 , 1);
			}
			if(lastm != m){
				print(m , 3 , 4);
			}
			if(lasts != s){
				print(s , 6 , 7);
			}
		}
	}

	function print(index , n , m){
		if(index>=10){
			for(var i = 0;i<140;i++){
				if(num[parseInt(index/10)][i] == 1){
					document.getElementsByClassName('span'+n)[i].className = "span"+n+" Tcolor";
				}else{
					document.getElementsByClassName('span'+n)[i].className = "span"+n+" Fcolor";
				}
			}
		}else{
			for(var i = 0;i<140;i++){
				if(num[0][i] == 1){
					document.getElementsByClassName('span'+n)[i].className = "span"+n+" Tcolor";
				}else{
					document.getElementsByClassName('span'+n)[i].className = "span"+n+" Fcolor";
				}
			}
		}

		for(var i = 0;i<140;i++){
			if(num[parseInt(index%10)][i] == 1){
				document.getElementsByClassName('span'+m)[i].className = "span"+m+" Tcolor";
			}else{
				document.getElementsByClassName('span'+m)[i].className = "span"+m+" Fcolor";
			}
		}
	}

	function Connector(x){
		for(var i = 0;i<140;i++){
			if(num[10][i] == 1){
				document.getElementsByClassName('span'+x)[i].className = "span"+x+" Tcolor";
			}else{
				document.getElementsByClassName('span'+x)[i].className = "span"+x+" Fcolor";
			}
		}
	}

	//雪花效果
	var canvas = document.getElementsByClassName("snowflake")[0];
	canvas.width = document.getElementsByTagName("body")[0].offsetWidth;
	canvas.height = document.getElementsByTagName("body")[0].offsetHeight;
	var context = canvas.getContext("2d");

	var xhNum = [];
	var xhTime = setInterval(function(){
		var randNum = rand(4,6);
		for(var xh = 0;xh<randNum;xh++){
			xhNum.push([rand(6,canvas.width-6),0,rand(2,3),rand(2,3),rand(1,2)]);
		}
	},800)

	setTimeout(function(){
		var xhTime = setInterval(function(){
			context.clearRect(0,0,canvas.width,canvas.height);
			for(var xh = 0;xh<xhNum.length;xh++){
				(function(xh){
					xhFunc(xh);
				})(xh)
			}
		},50)
	},1000)
	
	function xhFunc(xh){ 
		context.beginPath();
		var contextColor = rand(8,10)/10;
		context.strokeStyle = "rgba(255,255,255,0)";
		context.fillStyle = "rgba(255,255,255,"+contextColor+")";
		xhNum[xh][1] += xhNum[xh][4];
		BezierEllipse2(context, xhNum[xh][0] , xhNum[xh][1] , xhNum[xh][2] , xhNum[xh][3]);
		context.fill();
		context.closePath();
		if(xhNum[xh][1] >= canvas.height){
			xhNum.splice(xh,1);
		}
	}

	//光标雪花
	canvas.onmousemove = function(){
		var e = event || window.event;
		// console.log(e.clientX,e.clientY);
		//for(var i = 0 ; i < 2 ; i++){
			xhNum.push([e.clientX+rand(-10,10),e.clientY+rand(-10,10),rand(2,3),rand(2,3),rand(1,2)]);
		//}
		document.getElementsByClassName("cur")[0].style.opacity = 1;
		document.getElementsByClassName("cur")[0].style.top = e.clientY+"px";
		document.getElementsByClassName("cur")[0].style.left = e.clientX+"px";
	}

	//画椭圆
	function BezierEllipse2(ctx, x, y, a, b)
	{
		var k = .5522848,
		ox = a * k, // 水平控制点偏移量
		oy = b * k; // 垂直控制点偏移量
		ctx.beginPath();
		//从椭圆的左端点开始顺时针绘制四条三次贝塞尔曲线
		ctx.moveTo(x - a, y);
		ctx.bezierCurveTo(x - a, y - oy, x - ox, y - b, x, y - b);
		ctx.bezierCurveTo(x + ox, y - b, x + a, y - oy, x + a, y);
		ctx.bezierCurveTo(x + a, y + oy, x + ox, y + b, x, y + b); 
		ctx.bezierCurveTo(x - ox, y + b, x - a, y + oy, x - a, y);
		ctx.closePath();
		ctx.stroke();
	}

	//随机n到m的一个整数
	function rand(n,m){
		var c = m - n + 1;
		return Math.floor(Math.random() * c + n);
	}

	//装饰图片
	var canvas2 = document.getElementsByClassName("decorate")[0];
	canvas2.width = document.getElementsByTagName("body")[0].offsetWidth;
	canvas2.height = document.getElementsByTagName("body")[0].offsetHeight;
	var context2 = canvas2.getContext("2d");

	context2.beginPath();
	context2.strokeStyle = "rgb(255,255,255)";
	context2.fillStyle = "rgb(255,255,255)";
	context2.moveTo(0,canvas2.height-14);
	context2.lineTo(canvas2.width,canvas2.height-14);
	context2.lineTo(canvas2.width,canvas2.height);
	context2.lineTo(0,canvas2.height);
	context2.lineTo(0,canvas2.height-14);

	for(var i = 0;i<parseInt(canvas2.width/60);i++){
		context2.moveTo(0+i*60,canvas2.height-14);
		context2.bezierCurveTo(20+i*60,canvas2.height-rand(14,18),40+i*60,canvas2.height-rand(14,18),60+i*60,canvas2.height-14,);
	}

	context2.stroke();
	context2.fill();
	context2.closePath();

	var oImage1 = document.getElementsByClassName('img1')[0];
	var imageWidth = document.getElementsByClassName('img1')[0].offsetWidth;
	var imageHeight = document.getElementsByClassName('img1')[0].offsetHeight;

	context2.save();
	context2.beginPath();
	context2.scale(canvas2.width/imageWidth,canvas2.width/imageWidth);
	context2.drawImage(oImage1 , 0 , 0);
	context2.closePath();
	context2.restore();

	var oImage2 = document.getElementsByClassName('img2')[0];
	var imageWidth2 = document.getElementsByClassName('img2')[0].offsetWidth;
	var imageHeight2 = document.getElementsByClassName('img2')[0].offsetHeight;

	context2.save();
	context2.beginPath();
	context2.scale(1/4,1/4);
	context2.translate(4*canvas2.width-imageWidth2+130,4*canvas2.height-imageHeight2+90);
	context2.drawImage(oImage2 , 0 , 0);
	context2.closePath();
	context2.restore();

	var oImage3 = document.getElementsByClassName('img3')[0];
	var imageWidth3 = document.getElementsByClassName('img3')[0].offsetWidth;
	var imageHeight3 = document.getElementsByClassName('img3')[0].offsetHeight;

	context2.save();
	context2.beginPath();
	context2.scale(1/2,1/2);
	context2.translate(200,2*canvas2.height-imageHeight3-20);
	context2.drawImage(oImage3 , 0 , 0);
	context2.closePath();
	context2.restore();

	//圣诞老人
	var c3Position = document.getElementsByClassName('c3')[0];
	var c3Time = setInterval(function(){
		c3Position.style.left = parseInt(c3Position.offsetLeft) + 30 + "px";
		if(parseInt(c3Position.offsetLeft) >= canvas.width/2){
			c3Position.style.background = "url(5-4.png) no-repeat";
			c3Position.style.transform = "rotateY(0deg)";
			c3Position.style.animation = "startSD2 4s steps(1,start) infinite";
			document.getElementsByClassName('lr')[0].style.background = "url(5-6.png) no-repeat";
			clearInterval(c3Time);
			setTimeout(function(){
				c3TimeGo();
			},3000);
		}
	},1000);
	function c3TimeGo(){
		c3Position.style.animation = "startSD 4s steps(1,start) infinite";
		var c3Time2 = setInterval(function(){
			c3Position.style.left = parseInt(c3Position.offsetLeft) + 30 + "px";
			if(parseInt(c3Position.offsetLeft) >= canvas.width){
				clearInterval(c3Time2);
			}
		},1000);
		setTimeout(function(){
			xf();
			document.getElementsByClassName('lr')[0].style.background = "url(5-6.png) no-repeat -70px 0";
		},3000);
	}
	//xf();
	function xf(){
		var xfImg = document.getElementsByClassName('img4')[0];
		xfImg.style.display = "block";
		var xfTime = setInterval(function(){
			xfImg.style.width = parseInt(xfImg.offsetWidth) + 10 + "px";
			if(parseInt(xfImg.offsetWidth) >= 400){
				clearInterval(xfTime);
				say(xfImg);
			}
		},100);
	}
	function say(xfImg){
		var canvas3 = document.getElementsByClassName("say")[0];
		canvas3.width = parseInt(xfImg.offsetWidth);
		canvas3.height = parseInt(xfImg.offsetHeight);
		var context3 = canvas3.getContext("2d");

		var sayArr = ["There","are", d+"" ,"days","to","go","before","Christmas."]
		var index = 0;
		var sayLength = 40;
		var sayHeight = 210;

		//context3.save();
		context3.beginPath();
		context3.rotate(-Math.PI/12);
		context3.lineWidth = 2;
		context3.font = '16px Arial';
		// context3.textAlign = 'center';
		// context3.textBaseline = 'bottom';
		var sayTime = setInterval(function(){
			context3.strokeStyle = "rgba(255,0,0)";
			var length = index > 0 ? sayArr[index-1].length*10 : 0;
			sayLength += length;
			if(sayLength > 160 - sayArr[index].length*10){
				sayLength = 20;
				sayHeight += 24;
			}
			context3.strokeText(sayArr[index], sayLength , sayHeight);
			index++;
			if(index == sayArr.length){
				clearInterval(sayTime);
			}
		},1000);
		context3.closePath();
		//context3.restore();
	}
}
</script>
</html>

博文图片资源下载

原文链接:https://blog.csdn.net/qq_42231248/article/details/114369539




所属网站分类: 技术文章 > 博客

作者：天使的翅膀

链接：http://www.qianduanheidong.com/blog/article/33556/29bc32175c25b06da44c/

来源：前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

14 0
收藏该文
已收藏

评论内容：(最多支持255个字符)




程序员的那些事(new)

window属性：controllers

2022年最受欢迎的8大编程语言

为什么都说程序员找不到女朋友，但是身边程序猿的却没一个单身的

程序员被开除，老板：“有你参与的项目全黄了！”

笑话：一个测试工程师走进一家酒吧

趣图：程序员头疼的4种原因

笑话：面试官：请拿出一段体现你水平的代码。我： sudo rm -rf /*面试官：这体现了你哪方面能力？

前端精选：在 WPF 中实现融合效果

程序人生：程序员如何实现财富自由？

找工作千万不要找外包？BAT互联网大厂外包亲身经历

电子书(new)

CSS3学习必备书籍（CSS3 实战）.pdf

CSS网站布局实录（第二版）.pdf

CSS禅意花园.pdf

HTML5权威指南.pdf

HTML5移动Web开发指南.pdf

零基础学HTML+CSS [第三版].pdf 下载

数据结构与算法 JavaScript 描述.pdf

客户端存储技术.pdf 下载

前端100本高清pdf电子书打包下载

深入理解HTML5：语义、标准与样式 PDF 下载

脚本(new)

压扁小鸟小游戏

.美女拼图游戏源码

JavaScript按键控制坦克移动

JavaScript打地鼠游戏

HTML5实现抓怪物小游戏

网页版-别踩白块游戏

网页版扫雷

HTML5实现拼图游戏

网页版2048

HTML5箭头射击游戏代码

博客(new)

全网最详细的nodejs卸载和安装教程

web期末大作业--网页设计 HTML+CSS+JS（附源码）

2024·2025年前端开发的就业现状及前景

基于天地图使用Leaflet.js进行WebGIS开发实战

记录｜C#主界面设计【Web风格】

Roundcube Webmail安装与配置完全指南

Spring Boot Web 应用请求响应太慢故障排查

Markdown 语法大全详解

uniapp前端实现微信支付（小程序、公众号H5、app）

pc端web网站使用第三方微信登录流程（web、js）

视频教程(new)

带你快速入坑ES6

0到1快速构建自己的后台管理系统

基于Element-UI二次封装业务组件-前端视频教程

基于WebAR实现3D任务书桌上跳舞

Tensorflow.js 实现垃圾分类

全方位入门git

六个案例学会响应式布局

Ajax实战案例之列表渲染

Phaser从0到1实战微信2D小游戏【钢琴方块】

元旦贺卡-前端视频教程

项目实战(new)

NodeJS+Express+MongoDB实战项目

打造仿小米电商网站

2020版uni-app项目实战

2020前端React项目实战

小程序全栈开发之喵喵交友

Vue实战项目之喵喵电影

实战项目之网易云

实战项目之头条

前端实战项目之幸福西饼

实战项目之拉勾网

问答(new)

HTML 上的 Javascript 输入和输出[关闭]

将 JSON 数据打印到 innerHTML 中，获取未定义 - [object]

localStorage onload 显示我选择的 div 吗？

为什么方法 history.pushState() 在我的本地 HTML 中不起作用？

Vue2：如何实现流畅的鼠标移动？

按钮展开显示在页面上，尽管在单击按钮本身之前应该将其隐藏

PHP 无法传递干净 URL 上的问号

触发按钮周围的按钮无法正常工作

Javascript 警告框未显示且错误：您请求的文件不存在

使用 JS 按钮取消设置嵌入在 html 网站中的 php 数组中的单个项目

游戏(new)

jQuery坦克大战网页小游戏

JS俄罗斯方块游戏代码

Vue.js注意力大考验小游戏代码

HTML欢乐打地鼠小游戏

HTML5糖果消消乐闯关小游戏

扑克牌翻牌记忆小游戏

HTML翻牌小游戏代码

HTML5拉杆子过关小游戏代码

HTML5倾斜迷宫小游戏

HTML5五子棋小游戏

其他资源(new)

jQuery益智拼图游戏

HTML5制作的2048游戏

.小球撞击游戏源码

驴子跳跳网页游戏源码

.jQuery五子棋游戏

HTML5街头霸王游戏源码

.网页版台球小游戏

地图拼图游戏

HTML5中国象棋游戏

Maven+JSP+SSM+Mysql实现的音乐网站