js实现全选、div的移动

最新推荐文章于 2023-02-27 22:29:46 发布

周朝兵

最新推荐文章于 2023-02-27 22:29:46 发布

阅读量613

点赞数

分类专栏： js

本文链接：https://blog.youkuaiyun.com/m0_45251955/article/details/103348878

版权

js 专栏收录该内容

27 篇文章

订阅专栏

本文介绍了如何仅使用JavaScript实现全选功能，详细讲解了HTML布局的创建和JS实现全选的逻辑思路，包括查找页面元素和利用checked属性进行判断。此外，还探讨了通过键盘事件控制div移动的技术，常用于类似2048、贪吃蛇等小游戏的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

全选

全选这个功能在很多地方都可以看见，几乎已经是表格所必备的功能之一了，那么今天我们就一起来看看，如何只用js来实现全选功能吧。
首先，我们先来创建一个HTML的布局

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style type="text/css">
	td{
		border: 1px solid;
	}
</style>
<body>
	<!-- 1.全选功能 -->
	<table>
		<tr>
			<td><input type="checkbox" onclick="qux()" class="a"></td>
			<td><span>全选</span></td>
		</tr>
		<tr>
			<td><input type="checkbox" onclick="qx()" class="a"></td>
			<td>1</td>
		</tr>
		<tr>
			<td><input type="checkbox" onclick="qx()" class="a"></td>
			<td>2</td>
		</tr>
		<tr>
			<td><input type="checkbox" onclick="qx()" class="a"></td>
			<td>3</td>
		</tr>
	</table>
</body>
<script type="text/javascript" src="全选.js"></script>
</html>

HTML的页面写完后的下一步就是使用js来实现功能了，大致思路为，先找到页面中的元素，之后根据checked属性来判断是否选中，好了，话不多少，看代码

var inp = document.getElementsByClassName("a");
function qux (){
	if (inp[0].checked == true) {
		for(var i = 0;i < inp.length;i ++){
			inp[i].checked = true;
		}
	}
	if(inp[0].checked == false){
		for(var i = 0;i < inp.length;i ++){
			inp[i].checked = false;
		}
	}
}
function qx (){
	if(inp[1].checked == true && inp[2].checked == true && inp[3].checked == true){
		inp[0].checked = true;
	}
	if(inp[1].checked == false || inp[2].checked == false || inp[3].checked == false){
		inp[0].checked = false;
	}
}

div的移动

通过键盘的操控来实现div的移动，这种功能在一些小游戏中比较常见，比如2048，贪吃蛇等等，接下来看代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
	<style type="text/css">
	div{
		width: 100px;
		height: 100px;
		background-color: red;
		position: absolute;
	}
	</style>
<body>
	<!-- 3.键盘操控移动div -->
	<div class="div"></div>
</body>
<script type="text/javascript" src="移动的div.js"></script>
</html>

js代码如下，通过键盘事件来控制div的移动。

var div = document.getElementsByClassName("div")[0];
// console.log(div);
var num1 = 0;
var num2 = 0;
document.onkeydown = function (event){
	if(event.keyCode == 37){
		num1 = num1 - 10;
		div.style.left = num1 + "px";
		console.log(div.style.left)
	}else if(event.keyCode == 38){
		num2 = num2 - 10;
		div.style.top = num2 + "px";
		console.log(div.style.top)
	}else if(event.keyCode == 39){
		num1 = num1 + 10;
		div.style.left = num1 + "px";
		console.log(div.style.right)
	}else if(event.keyCode == 40){
		num2 = num2 + 10;
		div.style.top = num2 + "px";
		console.log(div.style.bottom)
	}
}