敢跟头像对视三秒吗？

前端小游戏飞机大战源码完整版

html：

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>飞机大战title>
		<link rel="stylesheet" type="text/css" href="css/commen.css"/>
		<link rel="stylesheet" type="text/css" href="css/main.css"/>
		<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8">script>
		<script src="js/main.js" type="text/javascript" charset="utf-8">script>
		
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	head>
	<body>
		<div id="stage">
			<div class="bg1">div>
			<div class="bg2">div>
			<div class="plain">div>
			<div class="enemy enemy1">div>
			<div class="enemy enemy2">div>
			<div class="enemy enemy3">div>
			<div class="enemy enemy4">div>
			
			
			<div class="func">功能切换div>
			<div class="func" style="left: 50px;">背景切换div>
			<audio id="mp3bg" src="music/background.mp3" autoplay loop>
				当前浏览器不支持audio
			audio>
			<audio id="mp3shoot" src="music/shoot.mp3" >
				当前浏览器不支持audio
			audio>
			<audio id="mp3destroy" src="./music/destoryed.mp3" >
				当前浏览器不支持audio
			audio>
			<button id="buttonmusic" type="button" style="position: absolute;right: 0;bottom: 0;">音乐button>
		div>
	
	body>
html>

js：

// var pdirection
//  var plain

// pdirection = [0, 0, 0, 0, 0];
//  var bulletw = 50;
// var bulleth = 65;
// var stage
// var move = 1


// var timerkiss
$(function() {
	//这里写代码的时候是可以控制所有htmldom节点的
	//dom



	
	
	
	var pdirection = [0, 0, 0, 0, 0];
	
	
	//子弹的宽高
	var bulletw = 50;
	var bulleth = 65;
	//运动距离
	var move = 1
	
	
	// var timerkiss
	var stage = document.getElementById("stage"); //获取舞台节点
	var bg1 = stage.getElementsByClassName("bg1")[0]; //获取背景图片
	// console.log(bg1)  //检查是否捕获bg1
	var bg2 = stage.getElementsByClassName("bg2")[0]; //获取背景图片
	var topval = -200;
	var topval2 = -968;
	var k = 0;
	//玩家飞机对象
	var plain = stage.getElementsByClassName("plain")[0];
	//定义方向的变量数组，依次表示 上 右 下 左 空格用1表示按下，用0 表示未按下
	// pdirection = [0, 0, 0, 0, 0];

	//	功能切换
	var funcsw=true;//true表示打开键盘 ，关闭鼠标，false表示打开鼠标，关闭键盘
	
	



	//炮弹对象,宽高速度
	var bullet = stage.getElementsByClassName("bullet")[0];
	// var bulletw = 50;
	// var bulleth = 65;
	var bullets = 10;
	// bg1.style.cssText="top: -30px;"
	var t1 = setInterval(function() {
		k += 1;
		if (k == 768) {
			topval = -968;


		} else if (k == 768 * 2) {
			topval2 = -968;
			k = 0;
		}
		// console.log("ddd")
		// console.log(bg1.style.cssText)
		// bg1.scrollTop=bg1.scrollTop+10;
		$(bg1).css({
			"top": topval
		});
		$(bg2).css({
			"top": topval2
		});


		// bg1.style.cssText="top: "+topval+"px";
		topval++;
		// bg2.style.cssText="top: "+topval2+"px";
		topval2++;
		//topval++背景向下移动  

	}, 3);

	// t1.clearInterval();  //时钟停止


	// 第二章图片
	// var stage=document.getElementById("stage"); //获取舞台节点

	// // console.log(bg1)  //检查是否捕获bg1

	// // bg1.style.cssText="top: -30px;"
	// var t1=setInterval(function(){
	// 	// console.log("ddd")
	// 	// console.log(bg1.style.cssText)
	// 	// bg1.scrollTop=bg1.scrollTop+10;
	// 	bg2.style.cssText="top: "+topval2+"px";
	// 	topval2+=1
	// 	//topval++背景向下移动  

	// },70);



	// console.log(plain)
	// var move = 1


	//键盘的监控事件
	document.onkeydown = function(e) {
		// console.log(e)
		//向上运动
		// console.log("444")
		if (e.key == "w") {
			//cons
			//console.log("555")
			pdirection[0] = 1;
			//console.log(pdirection[0]);
			// console.log(parseFloat($(plain).css("top")))
			//if(parseFloat($(plain).css("top"))>=5)
			// plain.style.top.CSSValue=plain.style.top+10
			//	$(plain).css({"top":parseFloat($(plain).css("top"))-move});
			// move++

		} else if (e.key == "s") { //向下运动
			pdirection[2] = 1;
			// console.log(parseFloat($(plain).css("top")))
			//if(parseFloat($(plain).css("top"))<=513)
			// plain.style.top.CSSValue=plain.style.top+10
			//	$(plain).css({"top":parseFloat($(plain).css("top"))+move});
			// move++

		} else if (e.key == "a") { //向左运动
			pdirection[3] = 1;
			// console.log(parseFloat($(plain).css("top")))

			// plain.style.top.CSSValue=plain.style.top+10
			//$(plain).css({"left":parseFloat($(plain).css("left"))-move});
			// move++

		} else if (e.key == "d") { //向右运动
			pdirection[1] = 1;
			// console.log(parseFloat($(plain).css("top")))

			// plain.style.top.CSSValue=plain.style.top+10
			//$(plain).css({"left":parseFloat($(plain).css("left"))+move});
			// move++

		}
		//else if(e.key==" "){  //炮弹向上运动
		//pdirection[4]=1;
		// console.log(parseFloat($(plain).css("top")))
		// var bulletx=parseFloat($(plain).css("left"))+$(plain).width()/2-bulletw/2;
		// console.log($(plain).css("left"))
		//console.log(parseFloat($(plain).css("left")))
		// console.log(parseFloat($(plain).css("top"))-parseFloat($(bullet).css("height")));
		//var bullety=parseFloat($(plain).css("top"))-bulleth;

		// plain.style.top.CSSValue=plain.style.top+10
		// $(plain).css({"left":parseFloat($(plain).css("left"))+move});
		// move++
		// $("
")   转义方法
		//$("
").css({"left":bulletx,"top":bullety}).appendTo(stage);


		//};






	}
	//炮弹单独
	document.onkeypress = function(e) {

		if (e.key == " ") { //炮弹向上运动
			shoot();
		};

	}


	//键盘按键抬起来
	document.onkeyup = function(e) {
		if (e.key == "w") {
			//cons
			//console.log("555")
			pdirection[0] = 0;


		} else if (e.key == "s") { //向下运动
			pdirection[2] = 0;


		} else if (e.key == "a") { //向左运动
			pdirection[3] = 0;


		} else if (e.key == "d") { //向右运动
			pdirection[1] = 0;


		} else if (e.key == " ") { //炮弹向上运动
			pdirection[4] = 0;


		};
		// console.log(pdirection)

	};

	//定义飞机x轴y轴的坐标
		// var plainx=e.clientX;
		// var plainy=e.clientY
	//鼠标移动事件
	stage.onmousemove=function(e){
		if(funcsw) return;  //关闭鼠标功能
		var plainX=e.clientX-parseFloat($(stage).css("margin-left"));
		var plainY=e.clientY
		
		//console.log(e)
		//如有必要需要去掉子事件。此处并不需要
		// e.defaultPrevented;
		// e.getPreventDefault()//取消事件默认动作
		// console.log(e.path[1].id);
		// ($(plain[0]).css("top"))=e.clientX+"px"
		 $(plain).css({"left":plainX-parseFloat($(plain).width()/2),"top":plainY-parseFloat($(plain).height()/2)});
		 //$(plain).css({"top":plainY+parseFloat($(plain).css("height")/2)});
		 // $(plain).css({"top":plainy});
		 // console.log(e.clientX)
		 // console.log(e.clientY)
		 // console.log($(plain).css("top"))
	}


	//绑定功能切换键
	$(".func").click(function(){
		if($(this).html()=="功能切换"){
			if(funcsw){  
				funcsw=false;//关闭键盘 打开鼠标
				clearInterval(timerkey);
				timerfire=setInterval(shoot,170);
				
			}else{ 
				funcsw=true; //关闭鼠标 ，打开键盘
				clearInterval(timerfire);
				timerkey=monitorkey();
				
			}
		};
		
		
	});


	//控制敌机的时钟
	var enemy = document.getElementsByClassName("enemy");
	setInterval(function() {
		for (var i = 0; i < enemy.length; i++) {
			if ($(enemy[i]).attr("class") == "enemy enemy1") {
				$(enemy[i]).css("top", parseFloat($(enemy[i]).css("top")) + 1);



			} else if ($(enemy[i]).attr("class") == "enemy enemy2") {
				$(enemy[i]).css("top", parseFloat($(enemy[i]).css("top")) + 2);



			} else if ($(enemy[i]).attr("class") == "enemy enemy3") {
				$(enemy[i]).css("top", parseFloat($(enemy[i]).css("top")) + 3);



			} else if ($(enemy[i]).attr("class") == "enemy enemy4") {
				$(enemy[i]).css("top", parseFloat($(enemy[i]).css("top")) + 4);



			}


		}




	}, 10);
	//随机产生敌机
	// setInterval(function(){
	// 	var num=parseInt(Math.random()*4)+1;
	// 	var rndwidth_stage=parseInt(Math.random()*parseInt($(stage).width()-45));
	// 	$("
").css({"left":rndwidth_stage}).appendTo("#stage")



	// },1500);
	//数组写法
	setInterval(function() {
		var num = parseInt(Math.random() * 4) + 1;
		var enemyW = [50, 67, 67, 67];
		var rndwidth_stage = parseInt(Math.random() * $(stage)
	.width()); //展示三木运算符(rndwidth_stage-enemyW[num-1]
		rndwidth_stage = rndwidth_stage > enemyW[num - 1] ? rndwidth_stage - enemyW[num - 1] :
			rndwidth_stage;
		$(" + num + "\">
").css({
			"left": rndwidth_stage
		}).appendTo("#stage")



	}, 1000);

	//控制子弹的动画时间控件
	setInterval(function() {
		if ($(".bullet").length == 0) return;

		//设置好子弹移出屏幕后，移除子弹节点




		// $(".bullet").css({"top":parseFloat($(".bullet").css("top"))-10})
		// // console.log($(this).css("top"))
		// console.log(parseFloat($(".bullet").css("top")));
		//var bulltop=parseFloat($(".bullet[i]").css("top"));





		//$(".bullet").css({"top":(bulltop-10)+"px"});

		var bullet = $(".bullet");
		// console.log(bullet)  
		// for(var i=0;i
		// 	var bulltop=parseFloat($(bullet[i]).css("top"));
		// 	$(bullet[i]).css({"top":(bulltop-10)+"px"});

		// }



		for (i = 0; i < bullet.length; i++) {
			var tmp_bullet = parseFloat($(bullet[i]).css("top"));
			// console.log(tmp_bullet);
			if (tmp_bullet < 0) {
				$(bullet[i]).remove();

			} else {

				var bulltop = parseFloat($(bullet[i]).css("top"));
				$(bullet[i]).css({
					"top": (bulltop - 10) + "px"
				});

			}


		};




	}, bullets);
	//单独监控子弹
	setInterval(function() {
		// var bullet=document.getElementsByClassName("bullet");
		//两种写法都可以
		var bullet = $(".bullet");

		// for(i=0;i
		// 	var tmp_bullet=parseFloat($(bullet[i]).css("top"));
		// 	// console.log(tmp_bullet);
		// 	if(tmp_bullet<0){
		// 		$(bullet[i]).remove();

		// 	};


		// };





	}, 400);



	//离开舞台的还记移除dom节点
	setInterval(function() {


		for (i = 0; i < enemy.length; i++) {
			var tmp_enemy = parseFloat($(enemy[i]).css("top"));
			var tmp_stage = $(stage).height();
			// console.log(tmp_enemy); 
			// console.log(typeof($(tmp_stage).height()));
			if (tmp_enemy > tmp_stage) {
				$(enemy[i]).remove();
				// console.log("移除成功");

			};

		};
	}, 500);

	//时钟控件监控数组pdirection的值
	var timerkey=monitorkey();


	








//时钟控件表示每个多少时间发射子弹
//第一种方法  键盘模拟事件
// setInterval(function(){
// 	var e=jQuery.Event("keypress");
// 	e.key=" "
// 	$(document).trigger(e);
	
	
	
// },500)

//第二种方法  直接调用函数
	function shoot(){
		$("#mp3shoot")[0].currentTime=0;
		$("#mp3shoot")[0].play();
		pdirection[4] = 1;
		// console.log(parseFloat($(plain).css("top")))
		// var bulletx=parseFloat($(plain).css("left"))+$(plain).width()/2-bulletw/2;
		// console.log($(plain).css("left"))
		//console.log(parseFloat($(plain).css("left")))
		// console.log(parseFloat($(plain).css("top"))-parseFloat($(bullet).css("height")));
		//var bullety=parseFloat($(plain).css("top"))-bulleth;
		
		// plain.style.top.CSSValue=plain.style.top+10
		// $(plain).css({"left":parseFloat($(plain).css("left"))+move});
		// move++
		// $("
")   转义方法
		//$("
").css({"left":bulletx,"top":bullety}).appendTo(stage);
		//console.log(pdirection[4]);
		var bulletx = parseFloat($(plain).css("left")) + $(plain).width() / 2 - bulletw / 2;
		// console.log($(plain).css("left"))
		// console.log(parseFloat($(plain).css("left")))
		// console.log(parseFloat($(plain).css("top"))-parseFloat($(bullet).css("height")));
		var bullety = parseFloat($(plain).css("top")) - bulleth;
		
		// plain.style.top.CSSValue=plain.style.top+10
		// $(plain).css({"left":parseFloat($(plain).css("left"))+move});
		// move++
		// $("
")   转义方法
		$("
").css({
			"left": bulletx,
			"top": bullety
		}).appendTo(stage);
		
		
	}



	
	//总结模型
	// function kissAB(A,B){
	// 	var iskiss=false;
	// 	for(var i=0;i
	// 		for(var j=0;j
	// 			// var a=$(A[i]).height()/2+parseFloat($(A[i]).css("top"))-$(B[j]).height()/2-parseFloat($(B[j]).css("top"));
	// 			// var b=$(B[j]).width()/2+parseFloat($(B[j]).css("left"))-$(A[i]).width()/2-parseFloat($(A[i]).css("left"));
	// 			// //console.log(a)
	// 			// var c=$(A[i]).height()/2+$(B[j]).width()/2
	// 			// console.log(b);
				
	// 			// if(a*a+b*b
	// 			// 	// $(B[j]).remove();
	// 			// 	// $(A[i]).remove();
	// 			// 	iskiss=true;
	// 			// 	break;
	// 			// }
				
				
	// 		}
			
			
			
	// 	}
		
		
		
		
	// }
	
	//调用模拟键盘函数
		//var timerfire=setInterval(shoot,500);
		//定义变量存储子弹发射的动画
	var timerfire;
	
		//检测是否碰撞
	
		
		
	
	
	
	
	
	
	
	function kissAB(A,B){
				var iskiss=false;
					var a=$(A).height()/2+parseFloat($(A).css("top"))-$(B).height()/2-parseFloat($(B).css("top"));
					var b=$(B).width()/2+parseFloat($(B).css("left"))-$(A).width()/2-parseFloat($(A).css("left"));
					//console.log(a)
					var c=$(A).height()/2+$(B).width()/2-10;
					//console.log(b);
					if(a*a+b*b<c*c){
						// $(B[j]).remove();
						// $(A[i]).remove();
						iskiss=true;
						
					
					
					
				
				
				
				
					}
			
			return iskiss;
			
			
		}
	
	
	
	
	
		
	
	var timerkiss=monitorkiss();
	
	
	function monitorkiss(){
		
			//获取子弹
			//检测子弹与敌机是否碰撞
		return setInterval(function(){
			
			var bullets=$(".bullet");
			
			var enemys=$(".enemy");
			for(var i=0;i<bullets.length;i++){
				for(var j=0;j<enemys.length;j++){
					// var a=$(bullets[i]).height()/2+parseFloat($(bullets[i]).css("top"))-$(enemys[j]).height()/2-parseFloat($(enemys[j]).css("top"));
					// var b=$(enemys[j]).width()/2+parseFloat($(enemys[j]).css("left"))-$(bullets[i]).width()/2-parseFloat($(bullets[i]).css("left"));
					// //console.log(a)
					// var c=$(bullets[i]).height()/2+$(enemys[j]).width()/2
					// console.log(b);
					// if(a*a+b*b
					// 	$(enemys[j]).remove();
					// 	$(bullets[i]).remove();
					// 	break;
					//console.log("aaa")
					// }
					if (kissAB(bullets[i],enemys[j])){
						//console.log("ttt")
						$("#mp3destroy")[0].play();
						$(enemys[j]).remove();
						$(bullets[i]).remove();
						
						 break;
					}
				}
			}
			//检测玩家与敌机是否碰撞
			for(var j=0;j<enemys.length;j++){
				if(kissAB(plain,enemys[j])){
					alert("game over");
					gameover();
					
					break;
					
				}
				
				
			}
			
			
		},1);
		
		
		
		
		
	}
	
	function monitorkey(){
		return setInterval(function() {
			//向上运动
			//默认方向  上  右  下  左  
			if (pdirection[0] == 1) {
				// console.log(parseFloat($(plain).css("top")))
				if (parseFloat($(plain).css("top")) >= 5)
					// plain.style.top.CSSValue=plain.style.top+10
					$(plain).css({
						"top": parseFloat($(plain).css("top")) - move
					});
				else
					$(plain).css({"top":0});
				// move++
		
			}
			if (pdirection[2] == 1) { //向下运动
				// console.log(parseFloat($(plain).css("top")))
				if (parseFloat($(plain).css("top")) <= 513)
					// plain.style.top.CSSValue=plain.style.top+10
					$(plain).css({
						"top": parseFloat($(plain).css("top")) + move
					});
				else
					$(plain).css({"top":$(stage).Height-$(plain).Height});
				// move++
		
			}
			if (pdirection[3] == 1) { //向左运动
				// console.log(parseFloat($(plain).css("top")))
				if (parseFloat($(plain).css("left")) >= -10)
					// plain.style.top.CSSValue=plain.style.top+10
					$(plain).css({
						"left": parseFloat($(plain).css("left")) - move
					});
				// move++
		
			}
			if (pdirection[1] == 1) { //向右运动
				// console.log(parseFloat($(plain).css("top")))
				if (parseFloat($(plain).css("left")) <= 270)
					// plain.style.top.CSSValue=plain.style.top+10
					//console.log(parseFloat($(plain).css("right")))
					$(plain).css({
						"left": parseFloat($(plain).css("left")) + move
					});
				// move++
		
			}
			if (pdirection[4] == 1) { //炮弹向上运动
				// console.log(parseFloat($(plain).css("top")))
				//var bulletx=parseFloat($(plain).css("left"))+$(plain).width()/2-bulletw/2;
				// console.log($(plain).css("left"))
				// console.log(parseFloat($(plain).css("left")))
				// console.log(parseFloat($(plain).css("top"))-parseFloat($(bullet).css("height")));
				//var bullety=parseFloat($(plain).css("top"))-bulleth;
		
				// plain.style.top.CSSValue=plain.style.top+10
				// $(plain).css({"left":parseFloat($(plain).css("left"))+move});
				// move++
				// $("
")   转义方法
				//$("
").css({"left":bulletx,"top":bullety}).appendTo(stage);
		
		
			}
		
		
		
		
		}, 1);
	}
	// 载入背景音乐
	// $("#mp3bg").play();
	var mp3bg=document.getElementById("mp3bg");
	// var timerbg= setInterval(function(){
	// 	mp3bg.currentTime=0;
	// 	// mp3bg.controls
	// 	mp3bg.play();
	// 	clearInterval(timerbg);
	// })
	$("#buttonmusic").click();
	$("#buttonmusic").click(function(){
		if($(this).html()=="音乐"){
			$(this).html("暂停");
			//mp3bg.currentTime=0;
			// mp3bg.controls
			mp3bg.play();
			//clearInterval(timerbg);
		}else{
			//mp3bg.currentTime=0;
			// mp3bg.controls
			mp3bg.pause();
			$(this).html("音乐");
			
		}
		
	})
	
	
	function startgame(){
		//碰撞检测开始
		timerkiss=monitorkiss();
		//重置方向键盘
		console.log(pdirection);
		pdirection = [0, 0, 0, 0, 0];
		
		//生成玩家飞机
		// var timertmp=setInterval(function(){
			//var aa=$(stage).height()-$(plain).height()*2
			//console.log(aa)
		// 	if(parseFloat($(plain).css("top"))<($(stage).height()-$(plain).height()*2)){
		// 		//alert("33");
				
		// 		console.log("666");
		// 		clearInterval(timertmp);
				
		// 	}else
		// 		plain.style.cssText="top:"+(parseFloat($(plain).css("top"))-5)+"px;left:"+$(stage).width()/2-$(plain).width()/2+"px;";
			
			
			
			
			
		// });
	}
	
	function gameover(){
		//碰撞检测停止
		clearInterval(timerkiss);
		// alert("gameover");
		//移除玩家飞机
		// plain.remove();
		//移除玩家飞机使用隐藏的方法
		//plain.hidden=true;
		
		//移除所有敌机
		$(".enemy").remove();
		
		// console.log(pdirection)
		//移除玩家飞机，使用隐藏的方法
		// $(plain).hide();
		plain.style.cssText="top:"+$(stage).height()+"px;left:"+($(stage).width()/2-$(plain).width()/2+"px");
		if(confirm("你玩不起，你个小垃圾，你没有实力")){
			startgame();
			
		}
		//重置方向键盘
		pdirection = [0, 0, 0, 0, 0];
		
		
	}
	
});


	




// 第二章图片
// $(function(){
// 	//这里写代码的时候是可以控制所有htmldom节点的
// 	//dom

// 	var stage=document.getElementById("stage"); //获取舞台节点
// 	var bg2=stage.getElementsByClassName("bg2")[0];//获取背景图片
// 	// console.log(bg1)  //检查是否捕获bg1
// 	var topval=-968;
// 	// bg1.style.cssText="top: -30px;"
// 	var t2=setInterval(function(){
// 		// console.log("ddd")
// 		// console.log(bg1.style.cssText)
// 		// bg1.scrollTop=bg1.scrollTop+10;
// 		bg2.style.cssText="top: "+topval+"px";
// 		topval+=1
// 		//topval++背景向下移动  

// 	},70);

// 	// t1.clearInterval();  //时钟停止

// });
// alert("4444")   不使用jq的话无法完全加载再弹弹框

// function myapp(){
// 	定义函数的基本格式

// }




// function xxxx (){
// 		// console.log("ddd")
// 		console.log(bg1.style.cssText)
// 		// bg1.scrollTop=bg1.scrollTop+10;
// 		bg1.style.cssText="top: "+topval+"px";
// 		topval+=1

// 	}

css:

#stage{
	width: 320px;
	height: 568px;
	background-color: antiquewhite;
	color: white;
	overflow: hidden;
	margin: auto;
	position: relative;
	
}
.bg1{
	background-image: url(../img/bg_01.png);
	height: 768px;
	width: 100%;
	position: absolute;
	top: -200px;
	/* z-index: 5; */
}
.bg2{
	
	background-image: url(../img/bg_01.png);
	height: 768px;
	width: 100%;
	position: absolute;
	top: -968px;
	/* z-index: 5; */
}
.plain{
	height: 53px;
	width: 67px;
	background-image: url(../img/plane_blue_01.png);
	z-index: 11;
	position: absolute;
	bottom: 0;
	background-size: 100% 100%;
}

.enemy{
	height: 53px;
	width: 67px;
	position: absolute;
	background-size: 100% 100%;
	
}
.enemy1{
	
	background-image: url(../img/enemy_04.png);
	/* z-index: 10; */
	height: 40px;
	width: 50px;
	top:0;
	left: 20px;
}
.enemy2{
	
	background-image: url(../img/enemy_03.png);
	/* z-index: 10; */
	top:0;
	left: 90px;
	
}
.enemy3{
	background-image: url(../img/enemy_02.png);
	/* z-index: 10; */
	top:0;
	left: 160px;
	height: 70px;
}
.enemy4{
	background-image: url(../img/enemy_01.png);
	/* z-index: 10; */
	top:0;
	left: 230px;
	
}
/* 子弹 */
.bullet{
	background-image: url(../img/bullet_01.png);
	width: 50px;
	height: 65px;
	position: absolute;
	/* z-index: 10; */
	
	
	
}
/* 按钮 */
.func{
	width: 40px;
	height: 20px;
	position: absolute;
	z-index: 12;
	background-color: skyblue;
	opacity: 0.6;
	color: white;
	cursor: pointer;
}
.func:hover{
	opacity: 1;
	transition-duration: 1s;
	
	
}

深度剖析 JavaScript 变量提升与暂时性死区：原理、实战与避坑指南
在JavaScript中，变量提升与暂时性死区影响着着程序的运行逻辑、性能表现以及可维护性。接下来将从底层原理、实际场景案例以及最佳实践全方位展开深度剖析。变量提升：JavaScript引擎背后的“隐形重构”JavaScript在执行代码前，引擎会率先开启编译流程，其中变量提升堪称关键一环。使用var关键字声明的变量以及函数声明，都会被自动“提升”至所在作用域的顶部。这一过程并非物理层面挪动代码，
[前端] node版本升级后续平坑2 -npm版本问题前端node.jsnpm版本
最近又遇到了一个前端工程node版本升级的后续问题。一个同事在拉取了最新的master分支，安装依赖后，运行项目时有一个文件缺失，无法编译成功。定位问题：我本地重新拉取了master分支，安装依赖，运行项目可以正常启动，排除项目文件问题。在同事的电脑上重新开了一个文件夹，拉取master分支，执行安装(npminstall)，发现第一行跳了提醒(Thisversionofnpmiscompatib
2024前端面试经验分享前端面试
一、简历1、整理步骤把自己过去做过的有亮点的事情整理一遍。项目经历，通过star法则来做，不赘述，网上很多人讲。需要突出的亮点见下面。2、前端开发常见突出亮点：性能优化代码优化组件封装框架原理项目推进、协调能力技术难点的解决能力技术方案设计能力前端工程化的推进3、管理相关亮点如何制定代码规范，以及review如何提升团队人员的水平如何制定流程为团队提效4、注意点遵循star法则；尽量简洁，减少面试
笔记：vue 打包忽略部分文件检查。 apgk1 vue 笔记 vue
在需要忽略的文件中加入/*eslint-disable*/1.js文件首行直接加入/*eslint-disable*/2.vue文件script中加入/*eslint-disable*/3.配置文件进行配置看大佬文章。vue中指定文件或文件夹忽略eslint
Vue3中通过加密串进行后端验证并实现登录跳转教程 ecmascript-6
在Vue3中进行登录并通过加密串进行后端验证，一般步骤是：用户输入用户名和密码，前端将其加密后发送给后端进行验证，后端验证通过后，返回身份验证信息（如令牌），前端接收验证结果并实现登录跳转。主要步骤：用户输入信息并加密用户输入的密码可以通过加密算法（如SHA256,AES等）进行加密，确保数据的安全性。发送请求到后端前端将加密后的数据发送到后端进行验证，通常使用POST请求。后端验证加密数据后端解
教你玩转JavaScript元编程
教你玩转JavaScript元编程大家好，我是倔强青铜三。我是一名热情的软件工程师，我热衷于分享和传播IT技术，致力于通过我的知识和技能推动技术交流与创新，欢迎关注我，微信公众号：倔强青铜三。JavaScript元编程：深度解析Proxy、Reflect和对象属性控制JavaScript元编程超越了典型编程的范畴，为开发人员提供了一套创建高度灵活、高效和响应式代码库的工具。让我们深入探讨Proxy
mac新手开发基础配置（前端版） macos前端vscode插件
brewhttps://www.cnblogs.com/hanease/p/15962094.html方法四fnmhttps://www.jianshu.com/p/0843d55e044evscodehttps://blog.csdn.net/weixin_46474921/article/details/132841711有几点需要配置下：1.语言切换成中文2.文件设置自动保存3.取消预览模式
基于jQuery / 原生JS两种方式流畅实现半屏悬浮窗池泽123 js jQuery javascript jquery 前端
本篇分别用jQuery和原生两种方式实现悬浮窗功能和样式的切换，兼容IE完成样式示例使用技术栈：jquery、javaScript、HTML/CSS一、基础版面悬浮窗可以有很多样式，但基础结构可以大致分为触发按钮、遮罩层、内容三部分。触发按钮通常设置在屏幕边缘，我这里举例一个右下的位置展示；联系我们/*悬浮窗触发按钮样式*/.Suspended_window_box{width:150px;hei
TypeScript 中的类型推断详解：为什么我们应该信任 TypeScript 的推断能力？
在TypeScript中，类型推断（TypeInference）是一个强大且被广泛使用的特性。它允许开发者在许多情况下省略显式的类型注解，从而简化代码，同时仍然享受强类型系统带来的安全性和可靠性。然而，对于初学者或经验不足的开发者来说，常常会疑惑：我真的可以完全信任TypeScript的类型推断吗？它的边界和局限性是什么？本文将聚焦于这个问题，通过深入解析TypeScript的类型推断机制，探讨它
前端-从入门到入土
前端学习路线基础部分（HTML+CSS+JS入门）快速了解，能够进行简单的页面布局，交互JS部分，可以写一些小demo来熟悉常见的API推荐教程：https://www.bilibili.com/video/BV1BT4y1W7Aw/?spm_id_from=333....框架部分这里推荐Vue框架，相对React会更容易上手，并且中文文档也相对友好推荐教程：https://www.bilibil
JavaScript防抖与节流的运用 Enti7c javascript 开发语言 ecmascript
防抖（Debounce）概念：防抖是指在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。防抖的主要目的是将多次连续触发的事件合并为一次执行，适用于例如输入框输入搜索内容时，避免频繁发送请求，只在用户停止输入一段时间后才发送请求。实现思路：创建一个定时器。当事件触发时，清除之前的定时器。重新创建一个新的定时器，在指定延迟时间后执行回调函数。functiondebounce(func,
Java中的内存管理：垃圾回收机制详解
在Java开发中，内存管理是一个至关重要的话题。Java通过其内建的垃圾回收机制（GarbageCollection，GC）来管理内存，自动处理对象的内存分配和释放，从而减轻了开发者的负担。然而，尽管Java的垃圾回收机制极大地提高了程序的稳定性和开发效率，但它的背后却是一个复杂的机制，理解其工作原理对于优化性能和调试内存相关问题至关重要。本文将专注于Java的垃圾回收机制，深入分析它是如何运作的
Java基础面试：Java中的方法
Java中的方法什么是方法方法是Java中的一段可重用的代码块，用于执行特定的任务，是程序中的最小执行单元。参数：方法可以接受一个或多个参数，这些参数是传递给方法的值，用于方法内部的逻辑运算。返回值：方法可以返回一个值，叫做方法的返回值，返回值的类型在方法声明中指定，无返回值使用关键字void声明。方法的声明：修饰符返回值方法名（参数数据类型参数名称）{方法体}方法有哪些种构造方法：构造方法是一种
【JAVA】接口和抽象类有什么区别？
Java中接口（Interface）与抽象类（AbstractClass）的区别详解️在Java编程中，接口和抽象类是实现抽象化的重要工具。它们在设计和实现上有诸多区别，理解这些差异对于编写高效、可维护的代码至关重要。本文将从多个方面详细对比接口和抽象类，帮助开发者在实际项目中做出最佳选择。1.继承关系抽象类单继承：一个类只能继承一个抽象类。用途：用于表达类之间的“is-a”关系，构建类的层次结构
JavaScript 与 TypeScript 的详细对比
JavaScript是当前Web开发的主要编程语言，也是现代前端开发的基石。尽管它灵活而强大，但在大型项目中，JavaScript的动态类型系统和无类型检查常常带来代码管理上的问题。为了解决这些问题，微软在2012年推出了TypeScript，这是一种JavaScript的超集，增加了静态类型检查、接口、类和其他现代化的编程特性。本文将深入对比JavaScript和TypeScript，分析两者在
Shell脚本实现Twitter的Snowflake算法的ID生成器
大部分时候，需要通过shell脚本批量处理一些数据，在分布式环境下，数据库表的主键存储的都是分布id，通过Java代码生成。shell脚本都是通过mysql命令生成insert语句，以前生成insert语句时，我都是先selectMAX(id)fromtable赋值到MAX_ID,然后拼接,类似于max_id_sql="selectMAX(id)fromtable";MAX_ID="$(query
手撸Webpack自定义Loader
前言我们知道webpack只能处理JavaScript和Json文件，面对CSS、图片等资源是无能为力的，它需要通过loader将这些资源转换为可处理的模块。loader的本质是一个解析资源的函数模块，该函数对接受到的内容进行转换，然后返回webpack可处理的资源。loader的执行顺序loader可根据执行顺序区分为：pre：前置loadernormal：普通loaderinline：内联lo
深入 JavaScript：前端开发的核心语言
JavaScript是一种广泛应用于前端开发的编程语言，最早由Netscape公司在1995年推出。作为一种轻量、解释性和多范式的编程语言，JavaScript支持事件驱动、面向对象和函数式编程。它不仅是网页交互的核心技术之一，还随着Node.js的出现，逐渐渗透到了后端开发。本文将带你了解JavaScript的核心概念、特点及常见应用场景，帮助你掌握这门现代化的编程语言。一、JavaScript
Vue.js：轻量高效的前端框架
Vue.js是一个用于构建用户界面的渐进式JavaScript框架，因其轻量、灵活和易上手的特性备受欢迎。Vue.js不仅适合小型项目的快速开发，也可用于构建复杂的单页面应用（SPA）。本文将介绍Vue.js的核心特性、项目结构、常用功能及其在现代前端开发中的应用场景。一、Vue.js简介Vue.js（简称Vue）由尤雨溪于2014年推出，是一个专注于视图层的JavaScript框架。它采用渐进式
Svelte 5震撼发布，前端开发的新变革！前端程序员
title:Svelte5震撼发布，前端开发的新变革！博主小程序体验|博主公众号分享亲爱的前端小伙伴们，大家好！Svelte5正式发布啦！这可是新一代的前端框架哦。就在10月22日，这个备受期待的版本终于和我们见面了。它带来了好多超棒的更新呢。首先，它是完全重写的框架哦。这意味着什么呢？就是它让应用变得更快啦，体积更小了，而且更加可靠。我们写出来的代码也会更加一致，更符合我们的习惯。比如在代码结构
【华为OD-E卷 - 求字符串中所有整数的最小和 100分（python、java、c++、js、c）】 CodeClimb 算法题华为od （A+B+C+D+E 卷）收录分享 python 华为od java c++javascript
【华为OD-E卷-求字符串中所有整数的最小和100分（python、java、c++、js、c）】题目输入字符串s，输出s中包含所有整数的最小和。说明：字符串s，只包含a-zA-Z±合法的整数包括1）正整数：一个或者多个0-9组成，如0230021022）负整数：负号–开头，数字部分由一个或者多个0-9组成，如-0-012-23-00023输入描述包含数字的字符串输出描述所有整数的最小和用例用例一
【华为OD-E卷 - 通过软盘拷贝文件 100分（python、java、c++、js、c）】 CodeClimb 算法题华为od （A+B+C+D+E 卷）收录分享 java 华为od python javascript c++
【华为OD-E卷-通过软盘拷贝文件100分（python、java、c++、js、c）】题目有一名科学家想要从一台古董电脑中拷贝文件到自己的电脑中加以研究。但此电脑除了有一个3.5寸软盘驱动器以外，没有任何手段可以将文件持贝出来，而且只有一张软盘可以使用。因此这一张软盘是唯一可以用来拷贝文件的载体。科学家想要尽可能多地将计算机中的信息拷贝到软盘中，做到软盘中文件内容总大小最大。已知该软盘容量为14
【华为OD-E卷 - 服务失效判断 100分（python、java、c++、js、c）】 CodeClimb 算法题华为od （A+B+C+D+E 卷）收录分享华为od python java c++javascript
【华为OD-E卷-服务失效判断100分（python、java、c++、js、c）】题目某系统中有众多服务，每个服务用字符串（只包含字母和数字，长度relPairs=split(relInput,',');//将依赖关系解析为Pair对象的列表List>rels=newArrayListp=split(pStr,'-');rels.add(newPairfails=split(failInput,
跟鲁迅重学 TypeScript | (五)异步处理、axios与封装axios
“不在沉默中爆发，就在沉默中灭亡”，面对日益严峻的国际环境，我们祖国母亲没有继续沉默，9月25日8时44分，洲际弹道导弹精准发射。，看到这个新闻，腰也不酸了，腿也不疼了，一口上上五楼，TS学起来更带劲了~异步处理在TypeScript中，异步编程如同现代社会中的种种现象，纷繁复杂，令人眼花缭乱。而async/await正如那一柄利剑，能将这混沌的世界理清，使得程序员不至于深陷于回调的泥潭。asyn
unplugin-dist-zip-pack：前端构建产物打包神器，开发者的得力助手
作为一名前端开发者，在项目开发过程中，我们常常需要对构建产物进行高效的打包管理。最近，我发现了一个超级好用的插件——unplugin-dist-zip-pack，它简直是我们开发者的福音。一、强大的功能特性unplugin-dist-zip-pack能够将构建产物完美打包，并且支持众多主流的构建工具，包括Webpack、Vue-CLI、Vite、Rollup、esbuild、Astro、Nuxt和
AJAX是如何凭一己之力提高前端程序员的工资水平的？前端程序员ajax
作者：阿达西链接：juejin.cn/post/7395396352183009290emmm，今天无意间听到一个比较奇怪的信息，就是在很早之前，前端工程师只是一个切图崽，而且工资也不是很高。说白了，就是没含金量的工作。因为那时候的Web应用相对简单，主要关注于页面的静态内容和基本的交互。所以前端开发的工作主要集中在HTML、CSS和基础的JavaScript上。但是自从AJAX出现后，前端程序员
线程池——Java Bug退退退123 java 开发语言
一、前言在字符串常量池中，字符串常量在java程序运行之前就已经创建好了，等程序运行起来后，就可以直接从常量池中拿到字符串并加载到内存中，这样的设计就省下了字符串的构造与销毁的内存开销。二、优势操作系统由内核与应用程序构成，当一段代码是在应用程序中运行的，那么整个执行过程就是可控的，更加高效；当一段代码在内核中运行时，java程序员就无法监视到程序的执行情况，就导致代码的执行是不可控的。对于线程也
基于SpringBoot的物业管理系统计算机学姐 Java精选实战项目源码 SpringBoot源码 Vue源码 spring boot 后端 java mysql vue.js spring intellij-idea
作者：计算机学姐开发技术：SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等，“文末源码”。专栏推荐：前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码精品专栏：Java精选实战项目源码、Python精选实战项目源码、大数据精选实战项目源码系统展示【2025最新】基于Java+SpringBoot+Vu
如何启动一个静态的前端工程的服务
使用场景在前端开发过程中，可能会要对发布到生产的包做验证或者要本地运行一个开源的包的实例，这时候就需要在本地启动一个前端服务，一般有以下两种方式运行方式Live-Server通过VsCode去安装插件LiveServer，然后打开静态工程，点击右下角的LiveServer按钮即可运行工程优点：使用简单，方便快捷缺点：不支持自定义配置，如工程里面需要代理请求，则无法实现express使用expres
如何在 JavaScript 中使用正则表达式匹配电话号码
我得说实话，当我第一次看到一个正则表达式时，那是一次可怕的体验。它看起来就像一个奇怪的外星语言！我心里想：“我花了几个月时间学习编程，现在还得学这个看似超级复杂的语言！？”然而，当我坐下来真正学习正则表达式时，我发现它并不是很难，一旦你学会了语法。为什么我甚至要费心学习正则表达式？当你开始编码越来越多时，它确实在各种情况下都非常方便，不仅仅是为了验证电话号码和电子邮件地址。当从日志中提取数据、从A
Linux的Initrd机制被触发 linux
Linux 的 initrd 技术是一个非常普遍使用的机制，linux2.6 内核的 initrd 的文件格式由原来的文件系统镜像文件转变成了 cpio 格式，变化不仅反映在文件格式上， linux 内核对这两种格式的 initrd 的处理有着截然的不同。本文首先介绍了什么是 initrd 技术，然后分别介绍了 Linux2.4 内核和 2.6 内核的 initrd 的处理流程。最后通过对 Lin
maven本地仓库路径修改 bitcarter maven
默认maven本地仓库路径：C:\Users\Administrator\.m2 修改maven本地仓库路径方法： 1.打开E:\maven\apache-maven-2.2.1\conf\settings.xml 2.找到
XSD和XML中的命名空间 darrenzhu xml xsd schema namespace 命名空间
http://www.360doc.com/content/12/0418/10/9437165_204585479.shtml http://blog.csdn.net/wanghuan203/article/details/9203621 http://blog.csdn.net/wanghuan203/article/details/9204337 http://www.cn
Java 求素数运算周凡杨 java 算法素数
网络上对求素数之解数不胜数，我在此总结归纳一下，同时对一些编码，加以改进，效率有成倍热提高。第一种：原理: 6N(+-)1法任何一个自然数，总可以表示成为如下的形式之一： 6N，6N+1，6N+2，6N+3，6N+4，6N+5 (N=0，1，2，…)
java 单例模式 g21121 java
想必单例模式大家都不会陌生，有如下两种方式来实现单例模式： class Singleton { private static Singleton instance=new Singleton(); private Singleton(){} static Singleton getInstance() { return instance; }
Linux下Mysql源码安装 510888780 mysql
1.假设已经有mysql-5.6.23-linux-glibc2.5-x86_64.tar.gz (1)创建mysql的安装目录及数据库存放目录解压缩下载的源码包，目录结构，特殊指定的目录除外：
32位和64位操作系统墙头上一根草 32位和64位操作系统
32位和64位操作系统是指：CPU一次处理数据的能力是32位还是64位。现在市场上的CPU一般都是64位的，但是这些CPU并不是真正意义上的64 位CPU，里面依然保留了大部分32位的技术，只是进行了部分64位的改进。32位和64位的区别还涉及了内存的寻址方面，32位系统的最大寻址空间是2 的32次方= 4294967296（bit）= 4（GB）左右，而64位系统的最大寻址空间的寻址空间则达到了
我的spring学习笔记10-轻量级_Spring框架 aijuans Spring 3
一、问题提问： → 请简单介绍一下什么是轻量级？轻量级（Leightweight）是相对于一些重量级的容器来说的，比如Spring的核心是一个轻量级的容器，Spring的核心包在文件容量上只有不到1M大小，使用Spring核心包所需要的资源也是很少的，您甚至可以在小型设备中使用Spring。
mongodb 环境搭建及简单CURD antlove Web Install curd NoSQL mongo
一搭建mongodb环境 1. 在mongo官网下载mongodb 2. 在本地创建目录 "D:\Program Files\mongodb-win32-i386-2.6.4\data\db" 3. 运行mongodb服务 [mongod.exe --dbpath "D:\Program Files\mongodb-win32-i386-2.6.4\data\
数据字典和动态视图百合不是茶 oracle 数据字典动态视图系统和对象权限
数据字典（data dictionary）是 Oracle 数据库的一个重要组成部分，这是一组用于记录数据库信息的只读（read-only）表。随着数据库的启动而启动,数据库关闭时数据字典也关闭数据字典中包含数据库中所有方案对象（schema object）的定义(包括表，视图，索引，簇，同义词，序列，过程，函数，包，触发器等等) 数据库为一
多线程编程一般规则 bijian1013 java thread 多线程 java多线程
如果两个工两个以上的线程都修改一个对象，那么把执行修改的方法定义为被同步的，如果对象更新影响到只读方法，那么只读方法也要定义成同步的。不要滥用同步。如果在一个对象内的不同的方法访问的不是同一个数据，就不要将方法设置为synchronized的。
将文件或目录拷贝到另一个Linux系统的命令scp bijian1013 linux unix scp
一.功能说明 scp就是security copy，用于将文件或者目录从一个Linux系统拷贝到另一个Linux系统下。scp传输数据用的是SSH协议，保证了数据传输的安全，其格式如下： scp 远程用户名@IP地址：文件的绝对路径
【持久化框架MyBatis3五】MyBatis3一对多关联查询 bit1129 Mybatis3
以教员和课程为例介绍一对多关联关系，在这里认为一个教员可以叫多门课程，而一门课程只有1个教员教，这种关系在实际中不太常见，通过教员和课程是多对多的关系。示例数据：地址表： CREATE TABLE ADDRESSES ( ADDR_ID INT(11) NOT NULL AUTO_INCREMENT, STREET VAR
cookie状态判断引发的查找问题 bitcarter form cgi
先说一下我们的业务背景： 1.前台将图片和文本通过form表单提交到后台，图片我们都做了base64的编码，并且前台图片进行了压缩 2.form中action是一个cgi服务 3.后台cgi服务同时供PC，H5，APP 4.后台cgi中调用公共的cookie状态判断方法（公共的，大家都用，几年了没有问题）问题：（折腾两天。。。。） 1.PC端cgi服务正常调用，cookie判断没
通过Nginx,Tomcat访问日志(access log)记录请求耗时 ronin47
一、Nginx通过$upstream_response_time $request_time统计请求和后台服务响应时间 nginx.conf使用配置方式： log_format main '$remote_addr - $remote_user [$time_local] "$request" ''$status $body_bytes_sent "$http_r
java-67- n个骰子的点数。把n个骰子扔在地上，所有骰子朝上一面的点数之和为S。输入n，打印出S的所有可能的值出现的概率。 bylijinnan java
public class ProbabilityOfDice { /** * Q67 n个骰子的点数 * 把n个骰子扔在地上，所有骰子朝上一面的点数之和为S。输入n，打印出S的所有可能的值出现的概率。 * 在以下求解过程中，我们把骰子看作是有序的。 * 例如当n=2时，我们认为（1，2）和（2，1）是两种不同的情况 */ private stati
看别人的博客，觉得心情很好 Cb123456 博客心情
以为写博客，就是总结，就和日记一样吧，同时也在督促自己。今天看了好长时间博客: 职业规划: http://www.iteye.com/blogs/subjects/zhiyeguihua android学习: 1.http://byandby.i
[JWFD开源工作流]尝试用原生代码引擎实现循环反馈拓扑分析 comsci 工作流
我们已经不满足于仅仅跳跃一次，通过对引擎的升级，今天我测试了一下循环反馈模式，大概跑了200圈，引擎报一个溢出错误在一个流程图的结束节点中嵌入一段方程，每次引擎运行到这个节点的时候，通过实时编译器GM模块，计算这个方程，计算结果与预设值进行比较，符合条件则跳跃到开始节点，继续新一轮拓扑分析，直到遇到
JS常用的事件及方法 cwqcwqmax9 js
事件描述 onactivate 当对象设置为活动元素时触发。 onafterupdate 当成功更新数据源对象中的关联对象后在数据绑定对象上触发。 onbeforeactivate 对象要被设置为当前元素前立即触发。 onbeforecut 当选中区从文档中删除之前在源对象触发。 onbeforedeactivate 在 activeElement 从当前对象变为父文档其它对象之前立即
正则表达式验证日期格式 dashuaifu 正则表达式 IT其它 java其它
正则表达式验证日期格式 function isDate(d){ var v = d.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/i); if(!v) { this.focus(); return false; } } <input value="2000-8-8" onblu
Yii CModel.rules() 方法、validate预定义完整列表、以及说说验证 dcj3sjt126com yii
public array rules () {return} array 要调用 validate() 时应用的有效性规则。返回属性的有效性规则。声明验证规则，应重写此方法。每个规则是数组具有以下结构：array('attribute list', 'validator name', 'on'=>'scenario name', ...validation
UITextAttributeTextColor = deprecated in iOS 7.0 dcj3sjt126com ios
In this lesson we used the key "UITextAttributeTextColor" to change the color of the UINavigationBar appearance to white. This prompts a warning "first deprecated in iOS 7.0." Ins
判断一个数是质数的几种方法 EmmaZhao Math python
质数也叫素数，是只能被1和它本身整除的正整数，最小的质数是2，目前发现的最大的质数是p=2^57885161-1【注1】。判断一个数是质数的最简单的方法如下： def isPrime1(n): for i in range(2, n): if n % i == 0: return False return True 但是在上面的方法中有一些冗余的计算，所以
SpringSecurity工作原理小解读坏我一锅粥 SpringSecurity
SecurityContextPersistenceFilter ConcurrentSessionFilter WebAsyncManagerIntegrationFilter HeaderWriterFilter CsrfFilter LogoutFilter Use
JS实现自适应宽度的Tag切换 ini JavaScript html Web css html5
效果体验：http://hovertree.com/texiao/js/3.htm 该效果使用纯JavaScript代码，实现TAB页切换效果，TAB标签根据内容自适应宽度，点击TAB标签切换内容页。 HTML文件代码： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"
Hbase Rest API : 数据查询 kane_xie REST hbase
hbase（hadoop）是用java编写的，有些语言（例如python）能够对它提供良好的支持，但也有很多语言使用起来并不是那么方便，比如c#只能通过thrift访问。Rest就能很好的解决这个问题。Hbase的org.apache.hadoop.hbase.rest包提供了rest接口，它内嵌了jetty作为servlet容器。启动命令：./bin/hbase rest s
JQuery实现鼠标拖动元素移动位置（源码+注释）明子健 jquery js 源码拖动鼠标
欢迎讨论指正！ print.html代码： <!DOCTYPE html> <html> <head> <meta http-equiv=Content-Type content="text/html;charset=utf-8"> <title>发票打印</title> &l
Postgresql 连表更新字段语法 update qifeifei PostgreSQL
下面这段sql本来目的是想更新条件下的数据，可是这段sql却更新了整个表的数据。sql如下： UPDATE tops_visa.visa_order SET op_audit_abort_pass_date = now() FROM tops_visa.visa_order as t1 INNER JOIN tops_visa.visa_visitor as t2 ON t1.
将redis,memcache结合使用的方案? tcrct redis cache
公司架构上使用了阿里云的服务，由于阿里的kvstore收费相当高，打算自建，自建后就需要自己维护，所以就有了一个想法，针对kvstore(redis)及ocs(memcache)的特点，想自己开发一个cache层，将需要用到list，set，map等redis方法的继续使用redis来完成，将整条记录放在memcache下，即findbyid，save等时就memcache，其它就对应使用redi
开发中遇到的诡异的bug wudixiaotie bug
今天我们服务器组遇到个问题：我们的服务是从Kafka里面取出数据，然后把offset存储到ssdb中，每个topic和partition都对应ssdb中不同的key，服务启动之后，每次kafka数据更新我们这边收到消息，然后存储之后就发现ssdb的值偶尔是-2,这就奇怪了，最开始我们是在代码中打印存储的日志，发现没什么问题，后来去查看ssdb的日志，才发现里面每次set的时候都会对同一个key

前端小游戏飞机大战源码完整版

html：

js：

css:

你可能感兴趣的:(java,script,前端,javascript,html5)