步步为营-55-js练习
1:加法计算器

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script> //01-窗体加载 window.onload = function () { //03-单击按钮触发事件 document.getElementById("btnAdd").onclick = function () { //02-获取数据 var num1 = parseInt(document.getElementById("num1").value); var num2 = parseInt(document.getElementById("num2").value); document.getElementById("result").value = num1 + num2; } } </script> </head> <body> <input type="text" id="num1"/> + <input type="text" id="num2" /> = <input type="text" id="result" /> <input type="button" id="btnAdd" value="相加" /> </body> </html>
2:点击触发

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script> window.onload= function() { //获取所有的按钮 var btn = document.getElementsByName("btnCry"); for (var i = 0; i < btn.length; i++) { btn[i].onclick = function() { this.value = '呜呜'; } } } </script> </head> <body> <input type="button" name="btnCry" value="哈哈" /> <input type="button" name="btnCry" value="哈哈" /> <input type="button" name="btnCry" value="哈哈" /> <input type="button" name="btnCry" value="哈哈" /> <input type="button" name="btnCry" value="哈哈" /> <input type="button" name="btnCry" value="哈哈" /> <input type="button" name="btnCry" value="哈哈" /> <input type="button" name="btnCry" value="哈哈" /> <input type="button" name="btnCry" value="哈哈" /> </body> </html>
3: 小鸟飞

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script> //01_设置图片编号 var index = 1; window.onload = function() { //02-设置定时器,每个一段时间调用图片切换方法 setInterval(ImgChange,100); } function ImgChange() { index ++; if (index>4) { index = 1; } //03-找到小鸟的图片 var birdfly = document.getElementById("BridFly"); //04-设置图片 birdfly.src = '../Img/bird' + index + '.png'; } </script> </head> <body> <img src="../Img/bird1.png" id="BridFly"/> </body> </html>
4: 文字跑马灯

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style> /*02设置为绝对定位*/ #PMD { position: absolute; width: 100px; background-color: blue; } </style> <script> //04 设置自增字段 var left = 0; var dire = 1; window.onload = function () { //03设置定时器 setInterval(Move,200); } //04设置move方法 function Move() { //05获得div元素 var pmdDiv = document.getElementById("PMD"); //06设置其移动 left = left + 100*dire; //07判断宽度 if (left + 100 >= window.innerWidth) { dire = -1; } if (left <= 0) { dire = 1; } pmdDiv.style.left = left + 'px'; } </script> </head> <body> <!--01设置存放跑马灯文字的div--> <div id="PMD">跑马灯文字</div> </body> </html>
5:动态操作元素
放置三个按钮,分别添加图片.文本框.超链接.放置一个按钮,删除所有元素

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script> window.onload = function() { document.getElementById('btnImg').onclick = function() { var img = document.createElement('img'); img.src = "../Img/bird1.png"; document.getElementById('addDynamic').appendChild(img); }; document.getElementById('btnText').onclick = function() { var text = document.createElement('input'); text.type = "text"; text.id='txtNew' text.value = '新增'; document.getElementById('addDynamic').appendChild(text); }; document.getElementById('btns').onclick = function() { var a = document.createElement('a'); a.href = 'http://www.baidu.com'; //注意这条语句很重要 a.innerHTML = '百度'; //注意txtNew有且只能有一个 document.getElementById('addDynamic').insertBefore(a,txtNew); }; document.getElementById('btnRemove').onclick = function () { var childs = document.getElementById('addDynamic').childNodes; for (var i = childs.length -1;i>=0; i--) { document.getElementById('addDynamic').removeChild(childs[i]); } }; } </script> </head> <body> <input type="button" id="btnImg" value="添加图片" /> <input type="button" id="btnText" value="添加文本框" /> <input type="button" id="btns" value="超链接" /> <input type="button" id="btnRemove" value="移除" /> <div id="addDynamic"></div> </body> </html>
6:评分功能
设置五个等级,当鼠标点击时给出星级.鼠标没有点击,显示上次得分.

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script> window.onload = function () { var imgs = document.getElementsByTagName('img'); var clickId=0; for (var i = 0; i < imgs.length; i++) { //02-01 鼠标放置事件 imgs[i].onmouseover = function() { var id = this.id; for (var j = 0; j < i; j++) { if (j < id) { imgs[j].src = "../Img/star2.png"; } else { imgs[j].src = "../Img/star1.png"; } } }; //02-02 鼠标移开事件 imgs[i].onmouseout = function() { for (var j = 0; j < clickId; j++) { imgs[j].src = "../Img/star2.png"; } for (var j = clickId; clickId<imgs.length; j++) { imgs[j].src = "../Img/star1.png"; } }; //02-03 鼠标点击事件 imgs[i].onclick = function() { clickId = parseInt(this.id); }; } } </script> </head> <body> <!--01放置五个评分的图片--> <img id="1" name="imgScore" src="../Img/star1.png" /> <img id="2" name='imgScore' src="../Img/star1.png" /> <img id="3" name='imgScore' src="../Img/star1.png" /> <img id="4" name='imgScore' src="../Img/star1.png" /> <img id="5" name='imgScore' src="../Img/star1.png" /> </body> </html>
7: 野人快跑

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style> #imgsavage { position: absolute; width: 100px; } </style> <script> var left = 0; var dir = 1; window.onload = function () { setInterval(imgChange, 200); var imgIndex = 1; function imgChange() { var imgsav = document.getElementById('imgsavage'); imgsav.src = "../Img/walk" + imgIndex + ".png"; imgsav.style.left = left + 'px'; imgIndex = imgIndex + 1; left = left + 10 * dir; if (imgIndex>7) { imgIndex = 1; } if (left+50 > window.innerWidth) { dir = -1; } if (left<=0) { dir = 1; } } } </script> </head> <body> <!--01首先定义一个div,用于放置野人图片--> <!--<div id="savageImg"><img src="../Img/walk1.png" /></div>--> <img id="imgsavage" src="../Img/walk1.png" /> </body> </html>
8:按钮5秒后可用

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script> var lastTime = 5; window.onload = function() { setInterval(changText, 1000); }; function changText() { lastTime --; var btn = document.getElementById("btnLast"); btn.value = '按钮' + lastTime + '秒后可用'; if (lastTime <= 0) { btn.disabled = false; btn.value = '按钮 可用'; } btn.onclick = function() { alert("可用了"); } } </script> </head> <body> <input id="btnLast" type="button" disabled="disabled" value="按钮5秒后可用"/> </body> </html>
9:超链接变红

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script> window.onload = function() { //01-动态创建超链接 for (var i = 0; i < 5; i++) { var herf = document.createElement('a'); herf.href = "#"; herf.innerHTML = " "+i+" "; herf.id = i; document.getElementById('herfs').appendChild(herf); } var herfs = document.getElementsByTagName('a'); for (var i = 0; i < herfs.length; i++) { herfs[i].onclick = function() { this.style.color = "red"; } } } </script> </head> <body> <div id="herfs"></div> </body> </html>
10:透视图

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style> .divStyle { border: 1px solid; position: absolute; } </style> <script> window.onload = function() { var divWidth = 0; for (var i = 0; i < 50; i++) { var div = document.createElement('div'); divWidth = 500 - (20 * i); div.className = 'divStyle'; div.style.width = divWidth + 'px'; div.style.height = divWidth + 'px'; div.style.left = 10 * i + 'px'; div.style.top = 10 * i + 'px'; document.getElementById('divSet').appendChild(div); } } </script> </head> <body> <div id="divSet" style="width: 1000px; height: 1000px; border: 1px solid; "></div> </body> </html>

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script> onload = function() { var div = document.getElementById("div"); for (var i = 0; i < 25; i++) { var tem = document.createElement("div"); tem.style.border = '1px solid red'; tem.style.margin = 10 + 'px'; div.appendChild(tem); div = tem; } } </script> </head> <body> <div id="div" style="width: 500px; height: 500px;"></div> </body> </html>
11 根据json对象创建表格

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style> .table { border: 1px solid; } </style> <script> var list = [ { id: 1, country: '中国', capital: '北京' }, { id: 2, country: '美国', capital: '华盛顿' }, { id: 3, country: '日本', capital: '东京' }, { id: 4, country: '韩国', capital: '首尔' } ]; onload = function() { var body = document.getElementsByTagName('body')[0]; //创建表 var table = document.createElement('table'); table.className = 'table'; body.appendChild(table); //设置标题列 var thead = document.createElement('thead'); var temp = list[0]; for (var key in temp) { var th = document.createElement('th'); th.className = 'table'; th.innerHTML = key; thead.appendChild(th); }; //把行添加到表上 table.appendChild(thead); //创建列,并填充数据 for (var i = 0; i < list.length; i++) { //遍历对象 var item = list[i]; //设置行 var tr = document.createElement('tr'); if (i%2 == 0) { tr.style.backgroundColor = "red"; }; for (var key in temp) { //设置列td1 var td1 = document.createElement('td'); td1.innerHTML = item[key]; td1.className = 'table'; //把列添加到行上 tr.appendChild(td1); }; //把行添加到表上 table.appendChild(tr); } } </script> </head> <body> </body> </html>
12 在11的基础上.鼠标滑过行,高亮显示,鼠标离开,恢复原状

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style> .table { border: 1px solid; } </style> <script> var list = [ { id: 1, country: '中国', capital: '北京' }, { id: 2, country: '美国', capital: '华盛顿' }, { id: 3, country: '日本', capital: '东京' }, { id: 4, country: '韩国', capital: '首尔' } ]; //01-加载事件 onload = function() { var body = document.getElementsByTagName('body')[0]; //创建表 var table = document.createElement('table'); table.className = 'table'; body.appendChild(table); //设置标题列 var thead = document.createElement('thead'); var temp = list[0]; for (var key in temp) { var th = document.createElement('th'); th.className = 'table'; th.innerHTML = key; thead.appendChild(th); }; //把行添加到表上 table.appendChild(thead); //创建列,并填充数据 for (var i = 0; i < list.length; i++) { //遍历对象 var item = list[i]; //设置行 var tr = document.createElement('tr'); if (i%2 == 0) { tr.style.backgroundColor = "red"; }; for (var key in temp) { //设置列td1 var td1 = document.createElement('td'); td1.innerHTML = item[key]; td1.className = 'table'; //把列添加到行上 tr.appendChild(td1); }; //把行添加到表上 table.appendChild(tr); } //02-鼠标移上---高亮显示 var trs = document.getElementsByTagName('tr'); for (var i = 0; i < trs.length; i++) { trs[i].onmouseover = function() { this.style.backgroundColor = "yellow"; } } //03 鼠标移开---恢复到原来 var trs_Stute = document.getElementsByTagName('tr'); for (var i = 0; i < trs_Stute.length; i++) { if (i % 2 == 0) { trs_Stute[i].onmouseout = function() { this.style.backgroundColor = "red"; } } else { trs_Stute[i].onmouseout = function () { this.style.backgroundColor = "white"; } } } } </script> </head> <body> </body> </html>
13 控制div的显示与隐藏

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style> </style> <script> window.onload = function() { var btn = document.getElementById("btnDiv"); var div = document.getElementById('div'); btn.onclick = function () { if (div.style.display == "none") { div.style.display = "block"; } else { div.style.display = "none"; } } } </script> </head> <body> <div id="div" style="display:none"> 通过按钮控制div的显示于隐藏</div> <input id="btnDiv" type="button" value="显示div/隐藏div"/> </body> </html>
14 图片跟着鼠标走

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style> #imgIdle { position: absolute; width: 63px; height: 75px; } </style> <script> //01 获取鼠标的位置 //01-01 鼠标移动 mouseover //01-02 通过事件 event e 获取x y 坐标 onload = function () { window.onmousemove = function (e) { //02 获取对象 var img1 = document.getElementById("imgIdle"); //设置xy img1.style.left = e.clientX - parseInt(img1.width) / 2 + 'px'; img1.style.top = e.clientY - parseInt(img1.height) / 2 + 'px'; } } //02 指定图片的位置 </script> </head> <body> <img id="imgIdle" src="../Img/idle.png" /> </body> </html>
15 右下角显示元素id信息

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style> #divID { position: absolute; width: 80px; height: 80px; border: 1px; background: yellow; display: none; } </style> <script> onload = function() { var childs = document.getElementsByName('items'); for (var i = 0; i < childs.length; i++) { childs[i].onmouseover= function() { //调用方法--显示div showDiv(this); } } function showDiv(obj) { //获取div的坐标 var x = obj.offsetLeft + obj.offsetWidth; var y = obj.offsetTop + obj.offsetHeight; //获取div的显示 var div = document.getElementById('divID'); div.style.left = x + 'px'; div.style.top = y + 'px'; div.style.display = "block"; div.innerHTML = 'id = '+ obj.id; } } </script> </head> <body> <input name="items" id="button1" type="button" value="按钮1" /> <input name="items" id="text1" type="text" value="文本框" /> <input name="items" id="button2" style="height: 50px" type="button" value="按钮4" /> <div id="divID" ></div> </body> </html>
16 看图识国家

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style> #showInfo { position: absolute; width: 200px; height: 200px; background: green; display: none; } .img { width: 200px; height: 200px; } </style> <script> var list = { 'zg': ['中国', '北京', '牡丹', '世界第二大经济体'], 'mg': ['美国', '华盛顿', '玫瑰', '白人与黑人一起劳动,却想到仇视'], 'rb': ['日本', '东京', '樱花', '世界文明的两样东西:忍者和动漫'], 'hg': ['韩国', '首尔', '无穷', '民族意识超强'] }; window.onload = function() { var imgs = document.getElementsByTagName('img'); for (var i = 0; i < imgs.length; i++) { imgs[i].onmouseover = function (e) { //01 获取国家id var imgid = this.id;//ng //02 根据id获取list中的国家信息 var msg = list[imgid]; //03构造描述字符串 var msgStr = '国家:' + msg[0] + '<br>首都:' + msg[1] + '<br>国花:' + msg[2] + '<br>描述:' + msg[3]; //获取div var div = document.getElementById('showInfo'); //设置div div.style.left = e.clientX + 'px'; div.style.top = e.clientY + 'px'; div.innerHTML = msgStr; div.style.display = 'block'; } } } </script> </head> <body> <div> <img class="img" name="img" id="hg" src="../Img/hg.jpg" /> <img class="img" name="img" id="mg" src="../Img/mg.jpg" /> <img class="img" name="img" id="rb" src="../Img/rb.jpg" /> <img class="img" name="img" id="zg" src="../Img/zg.jpg" /> </div> <div id="showInfo"> </div> </body> </html>
17 正则表达式
两种写法
var regObj = new RegExp("\\d{5}");
var regObj = /\d/;
17.1 匹配

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script>
onload = function() {
document.getElementById('btnTest').onclick = function () {
//01 构建正则表达式
var repExp = /^\d{6}$/;
//02 获取用户输入的值
var txtMsg = document.getElementById('txtMsg').value;
//03 进行匹配
if (repExp.test(txtMsg)) {
alert('OK');
} else {
alert('no');
}
}
}
</script>
</head>
<body>
<input type="text" id="txtMsg"/>
<input type="button" id="btnTest" value="匹配test"/>
</body>
</html>

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script> onload = function() { document.getElementById('btnTest').onclick = function () { //01 构建正则表达式 var repExp = /^\w+@[a-z0-9]+\..+$/; //02 获取用户输入的值 var txtMsg = document.getElementById('txtMsg').value; //03 进行匹配 if (repExp.test(txtMsg)) { alert('OK'); } else { alert('no'); } } } </script> </head> <body> <input type="text" id="txtMsg"/> <input type="button" id="btnTest" value="匹配test"/> </body> </html>
17.2 获取

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script> onload = function() { //匹配 document.getElementById('btnTest').onclick = function () { //01 构建正则表达式 var repExp = /^\w+@[a-z0-9]+\..+$/; //02 获取用户输入的值 var txtMsg = document.getElementById('txtMsg').value; //03 进行匹配 if (repExp.test(txtMsg)) { alert('OK'); } else { alert('no'); } } //提取 document.getElementById('btnExec').onclick = function() { var str = document.getElementById('txtMsg').value; //'火车票12306 电信10000 火警119'; var reg = /\d+/g;//匹配所有 // var reg = /\d+/;//只匹配第一个 while (true) { var result = reg.exec(str); if (result==null) { break; } alert(result); } } } </script> </head> <body> <input type="text" id="txtMsg"/> <input type="button" id="btnTest" value="匹配test" /> <input type="button" id="btnExec" value="提取Exec"/> </body> </html>
17.3 提取组

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script> onload = function() { //匹配 document.getElementById('btnTest').onclick = function () { //01 构建正则表达式 var repExp = /^\w+@[a-z0-9]+\..+$/; //02 获取用户输入的值 var txtMsg = document.getElementById('txtMsg').value; //03 进行匹配 if (repExp.test(txtMsg)) { alert('OK'); } else { alert('no'); } } //提取 document.getElementById('btnExec').onclick = function() { var str = document.getElementById('txtMsg').value; //'火车票12306 电信10000 火警119'; var reg = /\d+/g;//匹配所有 // var reg = /\d+/;//只匹配第一个 while (true) { var result = reg.exec(str); if (result==null) { break; } alert(result); } } //提取组--匹配第二个数字 document.getElementById('btnGropExec').onclick = function () { var str = document.getElementById('txtMsg').value; var reg = /\d(\d)\d*/g; while (true) { var result = reg.exec(str); if (result == null) { break; } alert(result); } } } </script> </head> <body> <input type="text" id="txtMsg"/> <input type="button" id="btnTest" value="匹配test" /> <input type="button" id="btnExec" value="提取Exec" /> <input type="button" id="btnGropExec" value="提取组Exec"/> </body> </html>
17.4 替换

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script> onload = function() { //匹配 document.getElementById('btnTest').onclick = function () { //01 构建正则表达式 var repExp = /^\w+@[a-z0-9]+\..+$/; //02 获取用户输入的值 var txtMsg = document.getElementById('txtMsg').value; //03 进行匹配 if (repExp.test(txtMsg)) { alert('OK'); } else { alert('no'); } } //提取 document.getElementById('btnExec').onclick = function() { var str = document.getElementById('txtMsg').value; //'火车票12306 电信10000 火警119'; var reg = /\d+/g;//匹配所有 // var reg = /\d+/;//只匹配第一个 while (true) { var result = reg.exec(str); if (result==null) { break; } alert(result); } } //提取组--匹配第二个数字 document.getElementById('btnGropExec').onclick = function () { var str = document.getElementById('txtMsg').value; var reg = /\d(\d)\d*/g; while (true) { var result = reg.exec(str); if (result == null) { break; } alert(result); } } //替换 document.getElementById('btnReplace').onclick = function () { var str = document.getElementById('txtMsg').value; var reg = /\s+/g; var result = str.replace(reg, ''); alert(result); } } </script> </head> <body> <input type="text" id="txtMsg"/> <input type="button" id="btnTest" value="匹配test" /> <input type="button" id="btnExec" value="提取Exec" /> <input type="button" id="btnGropExec" value="提取组Exec"/> <input type="button" id="btnReplace" value="替换" /> </body> </html>
18 密码强度验证

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script> onload = function() { //失去焦点验证 document.getElementById("txtPwd").onblur = function () { var msg = this.value; //获取提示框 var msgResult = document.getElementById("resultMsg"); if (msg.length < 6) { msgResult.innerHTML = '弱爆了'; } else { var pw = 0; if (/[a-zA-Z]+/.test(msg)) { pw++; } if ( /[0-9]+/.test(msg) ) { pw++; } if ( /[!@#$%^&*()]+/.test(msg)) { pw++; } } switch (pw) { case 1: msgResult.innerHTML = '弱'; break; case 2: msgResult.innerHTML = '中'; break; case 3: msgResult.innerHTML = '强'; break; } } } </script> </head> <body> <input type="text" id="txtPwd"/> <span id="resultMsg"></span> </body> </html>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步