-
JS基础练习
排他思想
<body> <button>按钮1button> <button>按钮2button> <button>按钮3button> <button>按钮4button> <button>按钮5button> <script> //获取button标签对象 var butArr = document.getElementsByTagName("button"); for (let i = 0; i < butArr.length; i++) { //设置点击事件 butArr[i].onclick = function() { for (let j = 0; j < butArr.length; j++) { //在点击下一个按钮前 将之前的按钮样式修改 butArr[j].style.backgroundColor = ""; } //设置点击按钮的样式 this.style.backgroundColor = "blue"; } } script> body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
百度换肤
<body> <ul class="baidu"> <li><img src="img/1.jpg">li> <li><img src="img/2.jpg">li> <li><img src="img/3.jpg">li> <li><img src="img/4.jpg">li> ul> <script> //先获取img标签对象 body标签对象 var imgArr = document.getElementsByTagName("img"); var body = document.body; for (let i = 0; i < imgArr.length; i++) { //设置背景图片 imgArr[i].onclick = function() { //this代表点击的图片 body.style.backgroundImage = "url(" + this.src + ")"; } } script> body> <head> <style> * { margin: 0; padding: 0; } body { background: url(img/1.jpg) no-repeat center top; } li { list-style: none; } .baidu { overflow: hidden; margin: 100px auto; background-color: #fff; width: 410px; padding-top: 3px; } .baidu li { float: left; margin: 0 1px; cursor: pointer; } .baidu img { width: 100px; } style> head>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
表格各行换色
<body> <table> <thead> <tr> <th>代码th> <th>名称th> <th>最新公布净值th> <th>累计净值th> <th>前单位净值th> <th>净值增长率th> tr> thead> <tbody> <tr> <td>003526td> <td>农银金穗3个月定期开放债券td> <td>1.075td> <td>1.079td> <td>1.074td> <td>+0.047%td> tr> <tr> <td>003526td> <td>农银金穗3个月定期开放债券td> <td>1.075td> <td>1.079td> <td>1.074td> <td>+0.047%td> tr> <tr> <td>003526td> <td>农银金穗3个月定期开放债券td> <td>1.075td> <td>1.079td> <td>1.074td> <td>+0.047%td> tr> <tr> <td>003526td> <td>农银金穗3个月定期开放债券td> <td>1.075td> <td>1.079td> <td>1.074td> <td>+0.047%td> tr> <tr> <td>003526td> <td>农银金穗3个月定期开放债券td> <td>1.075td> <td>1.079td> <td>1.074td> <td>+0.047%td> tr> <tr> <td>003526td> <td>农银金穗3个月定期开放债券td> <td>1.075td> <td>1.079td> <td>1.074td> <td>+0.047%td> tr> tbody> table> <script> //获取表格的每一行 var trs = document.getElementsByTagName("tr"); //遍历每一行 for (let i = 1; i < trs.length; i++) { //如果鼠标移动上行 就变色 trs[i].onmouseover = function() { //上面CSS已经有样式 只需要设置类名即可 this.className = "bg"; } //如果鼠标移走 颜色就变会去 trs[i].onmouseout = function() { this.className = ""; } } script> body> <head> <style> table { width: 800px; margin: 100px auto; text-align: center; border-collapse: collapse; font-size: 14px; } thead tr { height: 30px; background-color: skyblue; } tbody tr { height: 30px; } tbody td { border-bottom: 1px solid #d7d7d7; font-size: 12px; color: blue; } .bg { background-color: pink; } style> head>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
全选反选
<body> <div class="wrap"> <table> <thead> <tr> <th> <input type="checkbox" id="j_cbAll" /> th> <th>商品th> <th>价钱th> tr> thead> <tbody id="j_tb"> <tr> <td> <input type="checkbox" /> td> <td>iPhone8td> <td>8000td> tr> <tr> <td> <input type="checkbox" /> td> <td>iPad Protd> <td>5000td> tr> <tr> <td> <input type="checkbox" /> td> <td>iPad Airtd> <td>2000td> tr> <tr> <td> <input type="checkbox" /> td> <td>Apple Watchtd> <td>2000td> tr> tbody> table> div> <script> //所有框对象 var allInput = document.getElementsByTagName("input"); //大框对象 var j_cbAll = document.getElementById("j_cbAll"); //大框选中 全选中 大框不选 都不选 j_cbAll.onclick = function(e) { if (j_cbAll.checked) { for (let i = 1; i < allInput.length; i++) { allInput[i].checked = "true"; } } else { for (let i = 1; i < allInput.length; i++) { allInput[i].checked = ""; } } } for (let i = 1; i < allInput.length; i++) { //小框全选 大框选 allInput[i].onclick = function() { //定义一个开关 var flag = true; //每一个小框 都去判断其他的小框 for (let j = 1; j < allInput.length; j++) { if (allInput[j].checked == false) { flag = false; } } j_cbAll.checked = flag; } } script> body> <head lang="en"> <style> * { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; width: 300px; } th, td { border: 1px solid #d0d0d0; color: #404060; padding: 10px; } th { background-color: #09c; font: bold 16px "微软雅黑"; color: #fff; } td { font: 14px "微软雅黑"; } tbody tr { background-color: #f0f0f0; } tbody tr:hover { cursor: pointer; background-color: #fafafa; } style> head>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
tab栏切换
<body> <div class="tab"> <div class="tab_list"> <ul> <li class="current">商品介绍li> <li>规格与包装li> <li>售后保障li> <li>商品评价（50000）li> <li>手机社区li> ul> div> <div class="tab_con"> <div class="item" style="display: block;"> 商品介绍模块内容 div> <div class="item"> 规格与包装模块内容 div> <div class="item"> 售后保障模块内容 div> <div class="item"> 商品评价（50000）模块内容 div> <div class="item"> 手机社区模块内容 div> div> div> body> <script> //标题栏 var lis = document.getElementsByTagName("li"); //内容栏 var items = document.getElementsByClassName("item"); for (let i = 0; i < lis.length; i++) { lis[i].onclick = function() { //排他思想 点击谁 谁改变样式 //样式class="current"已经在css中写过 只改变其名就行 for (let j = 0; j < lis.length; j++) { lis[j].className = ""; } this.className = "current"; //显示div文本 for (let j = 0; j < items.length; j++) { //none隐藏 items[j].style.display = "none"; } //block块元素 显示出来 items[i].style.display = "block"; } } script> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle> <style> * { margin: 0; padding: 0; } li { list-style-type: none; } .tab { width: 978px; margin: 100px auto; } .tab_list { height: 39px; border: 1px solid #ccc; background-color: #f1f1f1; } .tab_list li { float: left; height: 39px; line-height: 39px; padding: 0 20px; text-align: center; cursor: pointer; } .tab_list .current { background-color: #c81623; color: #fff; } .item_info { padding: 20px 0 0 20px; } .item { display: none; } style> head>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
表单校验
<body> <table width="700px" height="600px" border="0" cellspacing="0" align="center"> <form action="#" method="GET" onsubmit="return checkForm()"> <tr> <td>用户名:td> <td><input type="text" name="username" value="" placeholder="请输入用户名(6~18字母)" onblur="checkUserName()">td> <td><span id="usp">span>td> tr> <tr> <td>密码:td> <td><input type="password" name="password" value="" placeholder="请输入密码(6~18数字)" onblur="checkUserPwd()">td> <td><span id="psp1">span>td> tr> <tr> <td>确认密码:td> <td><input type="password" name="password2" value="" placeholder="确认密码" onblur="UserPwd()">td> <td><span id="psp2">span>td> tr> <tr> <td>性别:td> <td> <input type="radio" name="sex" id="men" value="1" onblur="UserSex()"><label for="men">男label> <input type="radio" name="sex" id="women" value="0" onblur="UserSex()"><label for="women">女label> td> <td><span id="ssp">span>td> tr> <tr> <td>爱好:td> <td> <input type="checkbox" name="hobby" id="run" value="run" onblur="UserHobby()"><label for="run">跑步label> <input type="checkbox" name="hobby" id="sing" value="sing" onblur="UserHobby()"><label for="sing">唱歌label> <input type="checkbox" name="hobby" id="book" value="book" onblur="UserHobby()"><label for="book">看书label> td> <td><span id="csp">span>td> tr> <tr> <td>个人描述:td> <td> <input type="text" name="userDes" style="width:300px; height:150px" value="" placeholder="请输入个人描述(10个字以上)" onblur="Describe()"> td> <td><span id="tsp">span>td> tr> <tr> <td><input type="submit" value="注册">td> <td colspan="2"><input type="reset" value="重置">td> tr> form> table> body> <script> //是否成功注册 function checkForm() { return checkUserName() && checkUserPwd() && UserPwd() && UserSex() && UserHobby() && Describe(); } //用户名格式 function checkUserName() { var regx = /^[a-zA-Z]{6,18}$/; var value = document.getElementsByName("username")[0].value; var flag = regx.test(value) var usp = document.getElementById("usp"); if (flag) { usp.innerHTML = "用户名格式正确✔" } else { usp.innerHTML = "用户名格式错误✘" } return flag; } //密码格式 function checkUserPwd() { var regx = /^[0-9]{6,18}$/; var value = document.getElementsByName("password")[0].value; var flag = regx.test(value) var psp = document.getElementById("usp"); if (flag) { psp1.innerHTML = "密码格式正确✔" } else { psp1.innerHTML = "密码格式错误✘" } return flag; } //确认密码 function UserPwd() { var value = document.getElementsByName("password")[0].value; var value2 = document.getElementsByName("password2")[0].value; var regx = /^[0-9]{6,18}$/; var flag = (value === value2) && (regx.test(value2)); if (flag) { psp2.innerHTML = "密码正确✔" } else { psp2.innerHTML = "密码错误✘" } return flag; } //性别 function UserSex() { var menFlag = document.getElementById("men").checked; var womenFlag = document.getElementById("women").checked; if (menFlag || womenFlag) { ssp.innerHTML = "已勾选性别" return true; } else { ssp.innerHTML = "未勾选性别" return false; } } //爱好 function UserHobby() { var runFlag = document.getElementById("run").checked; var singFlag = document.getElementById("sing").checked; var bookFlag = document.getElementById("book").checked; if (runFlag || singFlag || bookFlag) { csp.innerHTML = "已勾选爱好" return true; } else { csp.innerHTML = "未勾选爱好" return false; } } //个人描述 function Describe() { var value = document.getElementsByName("userDes")[0].value; var flag = value.length >= 10; if (flag) { tsp.innerHTML = "个人描述输入完成" } else { tsp.innerHTML = "个人描述不少于10字" } return flag; } script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
-
相关阅读:
题解：ABC321F - #(subset sum = K) with Add and Erase
如何封装一个实用的上传组件
【18】Java常见的面试题汇总（Spring/Spring MVC）
阿里云4核8G服务器优惠价格表，最低价格501.90元6个月、983.80元1年
Day27：异常详解
day53
Java调用ffmpeg把rtsp视频流保存为MP4文件，并播放
CompletableFuture 和 Future 的选择，以及CompletableFuture的用法
多云加速云原生数仓生态，华为与 HashData 联合打造方案
Spring Boot Admin -Actuator 图形化管理工具
- 原文地址：https://blog.csdn.net/m0_51318597/article/details/126260586
