作业1.3

miraclejks

已于 2024-01-06 16:03:20 修改

阅读量360

点赞数 8

文章标签： javascript

于 2024-01-06 16:01:18 首次发布

本文链接：https://blog.csdn.net/miraclejks/article/details/135427718

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function change(){
				var checkdocs = document.getElementsByClassName("cll_check");
				for(var i = 0;i<checkdocs.length;i++){
					var checkNode = checkdocs[i];
					if(checkNode.checked == true){
						checkNode.checked = false;
					}else{
						checkNode.checked = true;
					}
				}
			}
		</script>
	</head>
	<body>
		<input type="checkbox" onclick="change()"/>全选
		<h2>你的爱好是</h2>
		<ul>			
			<li><input type="checkbox" class="cll_check"/>看书</li>
			<li><input type="checkbox" class="cll_check"/>看电影</li>
			<li><input type="checkbox" class="cll_check"/>玩游戏</li>
			<li><input type="checkbox" class="cll_check"/>刷抖音</li>
			<li><input type="checkbox" class="cll_check"/>泡芙</li>
			<li><input type="checkbox" class="cll_check"/>打台球</li>
			<li><input type="checkbox" class="cll_check"/>打麻将</li>			
		</ul>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#d1{
				width: 100px;
				height: 100px;
				background-color: aqua;
				position: absolute;
				cursor: move;
			}
		</style>
	</head>
	<body>
		<div id="d1"></div>
		<script type="text/javascript">
			var d1Node = document.getElementById("d1");
			d1Node.onmousedown = function(e){
				var w = e.clientX - d1Node.offsetLeft;  
				var h = e.clientY - d1Node.offsetTop;	  	
				document.onmousemove = function(ev){
					d1Node.style.top = (ev.clientY - h) + "px";
					d1Node.style.left = (ev.clientX - w)+ "px";
				}			
			}
			d1Node.onmouseup = function(){
				document.onmousemove = null;
			}
			
			
			
			
		</script>
	</body>
</html>