日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問 生活随笔！

生活随笔

當(dāng)前位置： 首頁 >

步步为营-55-js练习

發(fā)布時(shí)間：2023/11/27 37 豆豆
生活随笔 收集整理的這篇文章主要介紹了 步步为营-55-js练习 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1:加法計(jì)算器

<!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-單擊按鈕觸發(fā)事件document.getElementById("btnAdd").onclick = function () {//02-獲取數(shù)據(jù)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>
加法計(jì)算器

2:點(diǎn)擊觸發(fā)

<!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_設(shè)置圖片編號(hào)var index = 1;window.onload = function() {//02-設(shè)置定時(shí)器,每個(gè)一段時(shí)間調(diào)用圖片切換方法setInterval(ImgChange,100);}function ImgChange(){index ++;if (index>4) {index = 1;}//03-找到小鳥的圖片var birdfly = document.getElementById("BridFly");//04-設(shè)置圖片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設(shè)置為絕對定位*/#PMD {position: absolute;width: 100px;background-color: blue;}</style><script>//04 設(shè)置自增字段var left = 0;var dire = 1;window.onload = function () {//03設(shè)置定時(shí)器setInterval(Move,200);}//04設(shè)置move方法
        function Move() {//05獲得div元素var pmdDiv = document.getElementById("PMD");//06設(shè)置其移動(dòng)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設(shè)置存放跑馬燈文字的div-->
<div id="PMD">跑馬燈文字</div>
</body>
</html>
View Code

5:動(dòng)態(tài)操作元素

　　放置三個(gè)按鈕,分別添加圖片.文本框.超鏈接.放置一個(gè)按鈕,刪除所有元素

<!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有且只能有一個(gè)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:評(píng)分功能

　　設(shè)置五個(gè)等級(jí),當(dāng)鼠標(biāo)點(diǎn)擊時(shí)給出星級(jí).鼠標(biāo)沒有點(diǎn)擊,顯示上次得分.

<!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 鼠標(biāo)放置事件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 鼠標(biāo)移開事件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 鼠標(biāo)點(diǎn)擊事件imgs[i].onclick = function() {clickId = parseInt(this.id);};}}</script>
</head>
<body>
<!--01放置五個(gè)評(píng)分的圖片--><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首先定義一個(gè)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-動(dòng)態(tài)創(chuàng)建超鏈接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 根據(jù)json對象創(chuàng)建表格

<!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];//創(chuàng)建表var table = document.createElement('table');table.className = 'table';body.appendChild(table);//設(shè)置標(biāo)題列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);//創(chuàng)建列,并填充數(shù)據(jù)for (var i = 0; i < list.length; i++) {//遍歷對象var item = list[i];//設(shè)置行var tr = document.createElement('tr');if (i%2 == 0) {tr.style.backgroundColor = "red";};for (var key in temp) {//設(shè)置列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的基礎(chǔ)上.鼠標(biāo)滑過行,高亮顯示,鼠標(biāo)離開,恢復(fù)原狀

<!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];//創(chuàng)建表var table = document.createElement('table');table.className = 'table';body.appendChild(table);//設(shè)置標(biāo)題列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);//創(chuàng)建列,并填充數(shù)據(jù)for (var i = 0; i < list.length; i++) {//遍歷對象var item = list[i];//設(shè)置行var tr = document.createElement('tr');if (i%2 == 0) {tr.style.backgroundColor = "red";};for (var key in temp) {//設(shè)置列td1var td1 = document.createElement('td');td1.innerHTML = item[key];td1.className = 'table';//把列添加到行上
                    tr.appendChild(td1);};//把行添加到表上
                table.appendChild(tr);}//02-鼠標(biāo)移上---高亮顯示var trs = document.getElementsByTagName('tr');for (var i = 0; i < trs.length; i++) {trs[i].onmouseover = function() {this.style.backgroundColor = "yellow";}}//03 鼠標(biāo)移開---恢復(fù)到原來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 圖片跟著鼠標(biāo)走

<!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 獲取鼠標(biāo)的位置//01-01 鼠標(biāo)移動(dòng) mouseover//01-02 通過事件 event e 獲取x  y 坐標(biāo)onload = function () {window.onmousemove = function (e) {//02 獲取對象var img1 = document.getElementById("imgIdle");//設(shè)置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() {//調(diào)用方法--顯示divshowDiv(this);}}function showDiv(obj) {//獲取div的坐標(biāo)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?看圖識(shí)國家

<!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': ['中國', '北京', '牡丹', '世界第二大經(jīng)濟(jì)體'],'mg': ['美國', '華盛頓', '玫瑰', '白人與黑人一起勞動(dòng)，卻想到仇視'],'rb': ['日本', '東京', '櫻花', '世界文明的兩樣?xùn)|西：忍者和動(dòng)漫'],'hg': ['韓國', '首爾', '無窮', '民族意識(shí)超強(qiáng)']};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 根據(jù)id獲取list中的國家信息var msg = list[imgid];//03構(gòu)造描述字符串var msgStr = '國家：' + msg[0] + '<br>首都：' + msg[1] + '<br>國花：' + msg[2] + '<br>描述：' + msg[3];//獲取divvar div = document.getElementById('showInfo');//設(shè)置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?正則表達(dá)式

兩種寫法

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 構(gòu)建正則表達(dá)式 var repExp = /^\d{6}$/; //02 獲取用戶輸入的值 var txtMsg = document.getElementById('txtMsg').value; //03 進(jìn)行匹配 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 構(gòu)建正則表達(dá)式var repExp = /^\w+@[a-z0-9]+\..+$/;//02 獲取用戶輸入的值var txtMsg = document.getElementById('txtMsg').value;//03 進(jìn)行匹配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 構(gòu)建正則表達(dá)式var repExp = /^\w+@[a-z0-9]+\..+$/;//02 獲取用戶輸入的值var txtMsg = document.getElementById('txtMsg').value;//03 進(jìn)行匹配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+/;//只匹配第一個(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"/>
</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 構(gòu)建正則表達(dá)式var repExp = /^\w+@[a-z0-9]+\..+$/;//02 獲取用戶輸入的值var txtMsg = document.getElementById('txtMsg').value;//03 進(jìn)行匹配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+/;//只匹配第一個(gè)while (true) {var result = reg.exec(str);if (result==null) {break;}alert(result);}}//提取組--匹配第二個(gè)數(shù)字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 構(gòu)建正則表達(dá)式var repExp = /^\w+@[a-z0-9]+\..+$/;//02 獲取用戶輸入的值var txtMsg = document.getElementById('txtMsg').value;//03 進(jìn)行匹配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+/;//只匹配第一個(gè)while (true) {var result = reg.exec(str);if (result==null) {break;}alert(result);}}//提取組--匹配第二個(gè)數(shù)字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?密碼強(qiáng)度驗(yàn)證

<!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() {//失去焦點(diǎn)驗(yàn)證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 = '強(qiáng)';break;}}}</script>
</head>
<body>
<input type="text" id="txtPwd"/>
<span id="resultMsg"></span>
</body>
</html>
View Code

轉(zhuǎn)載于:https://www.cnblogs.com/YK2012/p/6831844.html

總結(jié)

以上是生活随笔為你收集整理的步步为营-55-js练习的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。