前端黑洞网 首页
资源下载

前端电子书

前端视频教程

前端小游戏

前端脚本

前端项目实战

其他资源

博客 问答 程序员的那些事
写博客 注册

程序员最近都爱上了这个网站  程序员们快来瞅瞅吧！  it98k网:it98k.com

本站消息

站长简介/公众号

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


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2023-06(2)

canvas绘制倒计时

发布于2021-03-07 22:18     阅读(1146)     评论(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


window属性：controllers

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

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

30岁以上你还死磕技术，别说拿高薪，可能你连饭碗都会保不住

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

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

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

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

网友说：做开发，不被领导喜欢怎么办？

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



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

作者：天使的翅膀

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

来源：前端黑洞网

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

14 0
收藏该文
已收藏

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




程序员的那些事(new)

window属性：controllers

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

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

30岁以上你还死磕技术，别说拿高薪，可能你连饭碗都会保不住

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

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

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

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

网友说：做开发，不被领导喜欢怎么办？

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

电子书(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)

Web 页面之间传递参数的几种方法

uniapp安卓离线打包步骤

Vue--》深入理解 Vue 3 导航守卫，掌握前端路由的灵魂技能！

java图片转二进制流_java将文件转化成二进制流

个人简历html网页代码（使用chatgpt完成web开发课的实验）

【HTTP 协议】掌握 Web 的核心技术

Three.js指定路径漫游（站走切换、路径动画、展示路线、开始、暂停、继续、退出、镜头跟随）

完全卸载vscode

flex布局优化(两端对齐，从左至右)

【熬夜送书 | 第二期】清华社赞助 | 《前端系列丛书》

视频教程(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)

居中网站内容 + 垂直导航栏

如何将项目左对齐（标题）

Nunjucks 嵌套变量

文本显示在图像上悬停

HTML/CSS - 按钮在另一个元素下排列

MathJax 库在公式中留下滚动条

如何在MVC5中用Razor将一行设为红色

在 Razor 页面 WebApplication 中将帖子从文本区域保存到数据库

响应式图像背景尺寸封面

将图像放入图像内

游戏(new)

jQuery坦克大战网页小游戏

JS俄罗斯方块游戏代码

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

HTML欢乐打地鼠小游戏

HTML5糖果消消乐闯关小游戏

扑克牌翻牌记忆小游戏

HTML翻牌小游戏代码

HTML5拉杆子过关小游戏代码

HTML5倾斜迷宫小游戏

HTML5五子棋小游戏

其他资源(new)

jQuery益智拼图游戏

HTML5制作的2048游戏

.小球撞击游戏源码

驴子跳跳网页游戏源码

.jQuery五子棋游戏

HTML5街头霸王游戏源码

.网页版台球小游戏

地图拼图游戏

HTML5中国象棋游戏

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