js 第三次邮箱作业

素颜马尾好姑娘i 2022-11-28 15:29 78阅读 0赞

## 拿好不谢 ##

<!DOCTYPE html>
    <html>
    <head>
    	<title>hh</title>
    	<style type="text/css">
    		*{
    			margin: 0;
    			padding: 0;
    			list-style: none;
    		}
    
    		.wrapper{
    			background-color: none;
    			width: 100%;
    			height: 100%; 
    		}
    		.contain{
    			border: 1px solid black;
    			border-radius: 10px;
    			outline: 0;
    			margin: 10px auto;
    			width: 600px;
    			height: 100%;
    			padding: 10px 10px;
    		}
    		table{
    			table-layout: fixed;/*宽度固定*/
    			width: 100%;
    		}
    		table,
    		td,
    		th{
    		    border-top: 1px solid #7b8aff;
    		}
    		td{
    			border-collapse: collapse;
    		    white-space: nowrap;/*溢出部分不换行*/
    		    overflow: hidden;/*溢出部分隐藏*/
    		    text-overflow: ellipsis;/*溢出部分变成...*/
    		}
    		.contain table tr:hover{
    			background-color: #FFFF66;
    		}
    		.form{
    			background-color: #7b8aff;
    		}
    		.id,
    		.pwd{
    			height: 30px;
    			width: 80%;
    			margin:5px 0;
    			border: 1px solid white;
    			border-radius: 20px;
    			overflow: hidden;
    			background-color: white;
    			display: inline-block;
    			vertical-align: middle;
    		}
    		#id,
    		#pwd{
    			width:80%;
    			height: 100%;
    			padding: 0px 10px;
    			line-height: 30px;
    			font-size: 16px;
    			border:0;
    			outline: 0;
    			overflow: hidden;
    		}
    		.idImg,
    		.pwdImg{
    			overflow: hidden;
    			vertical-align: text-bottom;
    			margin-left: 10px;
    			width: 20px;
    			height: 20px;
    		}
    		#sub{
    			margin: 5px 0;
    			width: 80%;
    			text-align: center;
    			height: 30px;
    			outline:0;
    			cursor: pointer;
    			background-color: white;
    			border: 1px solid white;
    			border-radius: 20px;
    		}
    		.contain .cha{
    			text-align: center;
    			cursor: pointer;
    
    		}
    		#img{
    			width: 50px;
    			height: 50px;
    		}
    	</style>
    </head>
    <body>
    	<div class="wrapper">
    		<div class="contain">
    			<table id="table">
    		        <colgroup>
    		            <col width="4">
    		            <col width="4">
    		            <col width="1">
    		        </colgroup>
    		        <thead>
    		        
    		        <tr>
    		        	<td>
    		        		<span>用户名:</span>
    		        		<select onchange="change()" id="select">
    		        			<option value="1">按第一个字母升序</option>
    		        			<option value="0">按第一个字母降序</option>
    		        		</select>
    		        	</td>
    		        	<td>密码</td>
    		        	<td class="cha">×</td>
    		        </tr>
    		        </thead>
    		        <tbody id="tbody">
    		        <tr>
    		            <td>123</td>
    		            <td>123</td>
    		            <td class="cha">×</td>
    		        </tr>
    		        <tr>
    		            <td>789</td>
    		            <td>123</td>
    		            <td class="cha">×</td>
    		        </tr>
    		        <tr>
    		            <td>234</td>
    		            <td>123</td>
    		            <td class="cha">×</td>
    		        </tr>
    		        </tbody>
    	    	</table>
    		</div>
    		<div class="contain form">
    			<div>
    				<div class="id">
    					<img src="./ico-user.png" class="idImg">
    					<input type="text" name="" id="id" placeholder="id">
    				</div>
    				<span id="Wid" style="display: none;color: red;vertical-align: middle;">×请输入id</span>
    			</div>
    			<div>
    				<div class="pwd">
    					<img src="./ico-password.png" class="idImg">
    					<input type="password" name="" id="pwd" placeholder="pwd">
    				</div>
    				<span id="Wpwd" style="display: none;color: red;vertical-align: middle;">×请输入密码</span>
    			</div>
    			<input onclick="check()"  type="button" id="sub" name="" value="注册">
    		</div>
    		<div class="contain">
    			<img id="img" src="./ico-user.png">
    			<span><--滚轮控制大小</span>
    		</div>
    	</div>
    
    	<script type="text/javascript">
    		function check(){
    			var id = document.getElementById("id").value;
    			var pwd = document.getElementById("pwd").value;
    			var span1 = document.getElementById("Wid");
    			var span2 = document.getElementById("Wpwd");
    			if(id == ''){
    				span1.style.display = '';
    			}else{
    				span1.style.display = 'none';
    				if(pwd == ''){
    					span2.style.display = '';
    				}else{
    					span2.style.display = 'none';
    
    					var tbody = document.getElementById("tbody");
    					var tr = document.createElement("tr");
    					var td1 = document.createElement("td");
    					td1.innerText = id;
    					var td2 = document.createElement("td");
    					td2.innerText = pwd;
    					var td3 = document.createElement("td");
    					td3.innerText = "×";
    					td3.style.textAlign = 'center';
    					td3.style.cursor = "pointer";
    					td3.addEventListener("click", function(){
    						this.parentNode.parentNode.removeChild(this.parentNode);
    					});
    					tr.appendChild(td1);
    					tr.appendChild(td2);
    					tr.appendChild(td3);
    					tbody.appendChild(tr);
    					alert("注册成功!");
    				}
    			}
    		}
    
    		
    		
    		function change(){
    			var rows = document.getElementById("table").rows;
    			var table = document.getElementById("table");
    			var myselect = document.getElementById("select");
    			var index = myselect.selectedIndex;
    			var sortValue = myselect.options[index].value;
    			
    
    
    			var arr = [];
    			for (var i = 0; i < table.tBodies[0].rows.length; i++) {
    					arr[i]=table.tBodies[0].rows[i];
    				}
    			if (sortValue == 0) {
    				arr.sort(function(a,b){
    					var x = a.cells[0].innerText;
    					var y = b.cells[0].innerText;
    					return y - x;
    				});
    			}else{
    				arr.sort(function(a,b){
    					var x = a.cells[0].innerText;
    					var y = b.cells[0].innerText;
    					return x - y;
    				});
    			}
    			for (var i = 0; i < arr.length; i++) {
    				table.tBodies[0].appendChild(arr[i]);
    			}
    		}
    
    
    		
    		if (window.addEventListener)
    		    window.addEventListener('DOMMouseScroll', wheel, false);
    			window.onmousewheel = document.onmousewheel = wheel;
    		//统一处理滚轮滚动事件
    		function wheel(event){
    		    var delta = 0;
    		    if (!event) event = window.event;
    		    if (event.wheelDelta) {
    		        delta = event.wheelDelta/120; 
    		        if (window.opera) delta = -delta;
    		    } else if (event.detail) {
    		        delta = -event.detail/3;
    		    }
    		    if (delta)
    		        handle(delta);
    		}
    		
    		function handle(delta) {
    			console.log(delta);
    			var img = document.getElementById("img");
    			width = parseInt(img.offsetWidth);
    			height = parseInt(img.offsetHeight);
    			if (delta < 0){
    				img.style.width = width + 20 + 'px';
    				img.style.height = height + 20 + 'px';
    			}else{
    			    img.style.width = width - 20 + 'px';
    				img.style.height = height - 20 + 'px';
    		    }
    		}
    	</script>
    </body>
    </html>

![12323.png][]

[12323.png]: /images/20221124/bebcb726e3284c87b82edfb5c70cd592.png