三个Html练习jquery

最新推荐文章于 2024-09-26 22:28:09 发布
月夜流心
最新推荐文章于 2024-09-26 22:28:09 发布
阅读量155
点赞数 1
文章标签： jquery html 识别弹出
本文链接：https://blog.csdn.net/qq_33883147/article/details/102669904
版权
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			td {
				width: 100px;
				height: 100px;
				text-align: center;
			}
			.redNum {
				display:inline-block;
				color:red;
			}
			td span{
				display: none;
			}
		</style>
	</head>
	<body>
		鼠標移動上去會顯示當前內容,單擊一次變紅，再單擊一個不同的數據會交換兩個數據
		<table border="1" cellspacing="0" cellpadding="0">
			<tr>
				<td><span>1</span></td>
				<td><span>2</span></td>
				<td><span>3</span></td>
				<td><span>4</span></td>
			</tr>
			<tr>
				<td><span>5</span></td>
				<td><span>6</span></td>
				<td><span>7</span></td>
				<td><span>8</span></td>
			</tr>
			<tr>
				<td><span>9</span></td>
				<td><span>10</span></td>
				<td><span>11</span></td>
				<td><span>12</span></td>
			</tr>
			<tr>
				<td><span>13</span></td>
				<td><span>14</span></td>
				<td><span>15</span></td>
				<td><span>16</span></td>
			</tr>
		</table>
	</body>
	<script src="jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script>
		$('td').hover(function(){
			$(this).children().prop('style','display:inline-block');
		},
		function(){
			$(this).children('span').prop('style','display:none');
		})
		$('td').click(function(){
			var num = $(this).children().html();
			$(this).html('<div class="redNum">'+num+'</div>');
			// console.log($('.redNum').length);
			if($('.redNum').length == 2){
				var first = $('.redNum').first().html();
				var second = $('.redNum').last().html();
				$('.redNum').first().parent().html('<span>'+ second +'</span>')
				$('.redNum').last().parent().html('<span>'+ first +'</span>')
			}
		})
	</script>
</html>

//2
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		rain beat
		<span id="Date"></span>
		<br>
		<span id="count">已經幹掉了0個數字!</span>
		<br>
		<span id="count0"></span>
		<br>
		<span id="count1"></span>
		<br>
		<span id="count2"></span>
		<br>
		<span id="count3"></span>
		<br>
		<span id="count4"></span>
		<br>
		<span id="count5"></span>
		<br>
		<span id="count6"></span>
		<br>
		<span id="count7"></span>
		<br>
		<span id="count8"></span>
		<br>
		<span id="count9"></span>
		<script type="text/javascript">
			setInterval(function() {
				var date = new Date();
				var year = date.getFullYear(); //获取当前年份   
				var mon = date.getMonth() + 1; //获取当前月份   
				var da = date.getDate(); //获取当前日   
				var day = date.getDay(); //获取当前星期几   
				var h = date.getHours(); //获取小时   
				var m = date.getMinutes(); //获取分钟   
				var s = date.getSeconds(); //获取秒   
				var d = document.getElementById('Date');
				d.innerHTML = '当前时间:' + year + '年' + mon + '月' + da + '日' + '星期' + day + ' ' + h + ':' + m + ':' + s;
			}, 1000)
		</script>
	</body>
	<script src="jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var count0 = 0;
		var count1 = 0;
		var count2 = 0;
		var count3 = 0;
		var count4 = 0;
		var count5 = 0;
		var count6 = 0;
		var count7 = 0;
		var count8 = 0;
		var count9 = 0;
		function addDiv() {
			var num = Math.floor(Math.random()*10);
			if(num == 0){count0++;$('#count'+num+'').html('已經生成了'+ count0 +'個數字0!');}
			else if(num == 1){count1++;$('#count'+num+'').html('已經生成了'+ count1 +'個數字1!');}
			else if(num == 2){count2++;$('#count'+num+'').html('已經生成了'+ count2 +'個數字2!');}
			else if(num == 3){count3++;$('#count'+num+'').html('已經生成了'+ count3 +'個數字3!');}
			else if(num == 4){count4++;$('#count'+num+'').html('已經生成了'+ count4 +'個數字4!');}
			else if(num == 5){count5++;$('#count'+num+'').html('已經生成了'+ count5 +'個數字5!');}
			else if(num == 6){count6++;$('#count'+num+'').html('已經生成了'+ count6 +'個數字6!');}
			else if(num == 7){count7++;$('#count'+num+'').html('已經生成了'+ count7 +'個數字7!');}
			else if(num == 8){count8++;$('#count'+num+'').html('已經生成了'+ count8 +'個數字8!');}
			else if(num == 9){count9++;$('#count'+num+'').html('已經生成了'+ count9 +'個數字9!');}
			var width = Math.floor(Math.random()*1300);
			var height = Math.floor(Math.random()*600);
			$('body').append('<div id = "a'+ num +'" style = "position: absolute;left: '+width+'px;top: '+height+'px;">'+num+'</div>');
		}
		
		var count = 0;

		function removeDiv() {
			var remove = $('div').remove();
			count+=remove.length;
		}

		var ref = setInterval(function() {
			for(var i = 0;i<10;i++)
			addDiv();
			if(count >= 10000){
				clearInterval(ref);
				clearInterval(ref1);
				removeDiv();
			}
		}, 1);
		
		var ref1 = setInterval(function() {
			removeDiv();
			$("#count").html('已經幹掉了'+ count +'個數字!');
		}, 200);

		$(window).keydown(function(event) {
			var keyCode = event.keyCode;
			if(keyCode == 35){
				var remove = $('div').remove();
				count+=remove.length;
			}else if(keyCode == 46){
				clearInterval(ref);
				// clearInterval(ref1);
			}else{
				var remove = $('#a'+(keyCode-96)+'').remove();
				if(remove.length != 0){
					count++;
				}
			}
			$("#count").html('已經幹掉了'+ count +'個數字!');
		});
		
	</script>
</html>

//3
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			td {
				width: 100px;
				height: 100px;
				text-align: center;
			}

			td span {
				display: none;
			}
		</style>
	</head>
	<body>
		鼠標移動到某一圖像上顯示彈窗
		<table border="1" cellspacing="0" cellpadding="0">
			<tr>
				<td><span>1</span></td>
				<td><span>2</span></td>
				<td><span>3</span></td>
				<td><span>4</span></td>
			</tr>
			<tr>
				<td><span>5</span></td>
				<td><span>6</span></td>
				<td><span>7</span></td>
				<td><span>8</span></td>
			</tr>
			<tr>
				<td><span>9</span></td>
				<td><span>10</span></td>
				<td><span>11</span></td>
				<td><span>12</span></td>
			</tr>
			<tr>
				<td><span>13</span></td>
				<td><span>14</span></td>
				<td><span>15</span></td>
				<td><span>16</span></td>
			</tr>
		</table>
	</body>
	<script src="jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$('td').mouseover(function() {
			$(this).children().prop('style', 'display:inline-block');
			var e = window.event;
			var x = e.screenX;
			var y = e.screenY;
			// console.log(x);
			// console.log(y);
			var num = $(this).children().html();
			$('body').append('<div class = "c1" >'+ num +'</div>');
			$('.c1').prop('style','width:200px;height:100px;background-color: #00FF00;position: absolute;left: '+x+'px;top: '+(y-50)+'px;')
		})
		$('td').mouseout(function() {
			$(this).children('span').prop('style', 'display:none');
			$('.c1').remove();
		})
	</script>
</html>