步步为营-55-js练习
生活随笔
收集整理的這篇文章主要介紹了
步步为营-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>View Code
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>View Code
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>View Code
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>View Code
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>View Code
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>View Code
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>View Code
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) {//設置列td1var td1 = document.createElement('td');td1.innerHTML = item[key];td1.className = 'table';//把列添加到行上 tr.appendChild(td1);};//把行添加到表上 table.appendChild(tr);}}</script> </head> <body></body> </html>View Code
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) {//設置列td1var 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>View Code
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>View Code
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");//設置xyimg1.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>View Code
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() {//調用方法--顯示divshowDiv(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>View Code
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 獲取國家idvar 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];//獲取divvar div = document.getElementById('showInfo');//設置divdiv.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>View Code
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>View Code
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>View Code
?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>View Code
轉載于:https://www.cnblogs.com/YK2012/p/6831844.html
總結
以上是生活随笔為你收集整理的步步为营-55-js练习的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 创维电视多少钱啊？
- 下一篇： Windows Phone开发（16）：