當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

dya04 js_02

發布時間：2023/12/20 编程问答 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 dya04 js_02 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1 json的入門

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>JSON數據格式</title> </head> <body> <h2>JSON對象</h2> <script type="text/javascript">//一個person對象的JSON對象，屬性名：firstname、lastname、age給三個屬性賦值var person = {firstname : "孫悟空",lastname : "弼馬溫",age : 18}//輸出對象：對象名.屬性名document.write("姓名: " + person.firstname + ", 昵稱: " + person.lastname + ", 年齡: " + person.age + "<br/>");document.write(`姓名: ${person.firstname}, 昵稱: ${person.lastname}, 年齡: ${person.age} <br/>`); </script> <hr/><h2>創建一個數組，其中每個元素是JSON對象</h2> <script type="text/javascript">var personArr = [{firstname : "孫悟空",lastname : "弼馬溫",age : 18},{firstname : "豬八戒",lastname : "天蓬元帥",age : 19},{firstname : "沙和尚",lastname : "卷簾大將",age : 28}];//遍歷輸出每個JSON對象的屬性值/*Java中寫法：for(類型變量名: 集合)JavaScript中寫法：for(類型變量名 of 集合)*/for(let person of personArr) {document.write(`姓名: ${person.firstname}, 昵稱: ${person.lastname}, 年齡: ${person.age} <br/>`)}</script> <hr/><h2>JSON對象,其中屬性是集合</h2> <script type="text/javascript"> var xiyouji = {name : "唐僧",age : 15,brothers : [{firstname : "孫悟空",lastname : "弼馬溫",age : 18},{firstname : "豬八戒",lastname : "天蓬元帥",age : 19},{firstname : "沙和尚",lastname : "卷簾大將",age : 28}] } document.write(`師傅姓名: ${xiyouji.name}, 年齡: ${xiyouji.age}<br/>`); document.write("徒弟們: <br/>")for(let personJson of xiyouji.brothers) {document.write(`姓名: ${personJson.firstname}, 昵稱: ${personJson.lastname}, 年齡: ${personJson.age} <br/>`)}</script> </body> </html>

2 json和字符串的相互轉化

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>JSON有關的函數</title> </head> <body> <script type="text/javascript">//定義一個字符串，屬性名一定是雙引號var jsonStr = '{"name":"悟空", "age":18}';document.write("類型:" + typeof(jsonStr));//把字符串轉成JSON對象var jsonObj = JSON.parse(jsonStr);document.write("<hr/>");document.write(jsonObj.name + " ====== " + jsonObj.age);document.write("<hr/>");//把JSON對象轉成字符串var jsonStr2 = JSON.stringify(jsonObj);document.write("jsonStr2 = " + jsonStr2 + "<br/>");document.write("jsonStr2 類型:" + typeof(jsonStr2));</script></body> </html>

3 window.confirm 確認操作

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>window中的方法</title> </head> <body> <input type="button" value="刪除訂單" onclick="delOrder()" /> <script type="text/javascript">function delOrder() {/*** 出現一個確定框，有2個按鈕* 點確定，返回true，否則返回false*/// var flag = window.confirm("您確定要刪除此訂單嗎?");var flag = confirm("2222222222 您確定要刪除此訂單嗎?");// 如果選擇的是確定, 返回true; 否則返回falseconsole.log(flag);if(flag) {document.write("用戶選擇的是確定! 執行刪除操作!")}else {document.write("用戶選擇的是取消! 可能是用戶誤操作!")}} </script> </body> </html>

4 location對象

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>BOM：location對象</title> </head> <body>  <input type="button" onclick="location.reload()" value="刷新"> <br/> <input type="button" onclick="history.back()" value="后退"> <br/> <input type="button" onclick="history.go(-1)" value="后退"> <br/><script type="text/javascript">//1. 獲取屬性值，得到當前訪問的地址console.log("當前頁面地址: " + location.href);//2. 設置屬性值，跳轉到指定的頁面(常用)// location.href = "http://www.jd.com"; // (推薦)//location是window的一個屬性，省略了window//window.location.href = "http://www.baidu.com";//location對象默認的屬性是href，href也可以省略// location = "http://www.tianmao.com";//獲取?后面的參數字符串let canshu = location.search;console.log(canshu);//顯示現在的時間document.write(new Date().toLocaleString()) </script> </body> </html>

5 倒計時跳轉

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>跳轉</title> </head> <body> <span id="counter">5</span>秒以后跳轉<script type="text/javascript">/*分析：1.用到倒計時：window.setInterval()2.頁面跳轉：location.href3.修改標簽中文字使用屬性：innerText*/// 聲明一個變量var num = 5;// 每隔1秒更新秒數setInterval(function(){// 判斷if(num == 0) {location.href = "http://www.baidu.com";} else {// 將變化后的秒數顯示在標簽中document.getElementById("counter").innerText = num;}// 讓總秒數-1num--;}, 1000);</script> </body> </html>

6 會動的時鐘

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>會動的時鐘</title> </head> <body> <input type="button" value="開始" id="btnBegin">  <input type="button" value="暫停" id="btnPause" disabled="disabled"> <hr/><h1 id="clock" style="color: darkgreen"></h1><script type="text/javascript">// 變量var timer;// 需求1: 點擊開始按鈕, 就將電子始終開始走document.getElementById("btnBegin").onclick = function() {// setInterval(函數, 2000)timer = setInterval(function() {// 將當前時間顯示 id=clock的標簽中document.getElementById("clock").innerText = new Date().toLocaleString();}, 1000);// 讓開始按鈕不可用document.getElementById("btnBegin").disabled = true;// 讓暫停按鈕可用document.getElementById("btnPause").disabled = false;}// 需求2: 點擊結束按鈕, 將電子鐘暫停document.getElementById("btnPause").onclick = function() {// setInterval(函數, 2000)clearInterval(timer);// 讓開始按鈕可用document.getElementById("btnBegin").disabled = false;// 讓暫停按鈕不可用document.getElementById("btnPause").disabled = true;} </script> </body> </html>

7 innerHtml 和 innerText的區別

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>innerText和innerHTML的區別</title> </head> <body> <input type="button" value="改內容" id="btn"> <hr/> <span id="content1">xxxxxxx</span> <span id="content2">xxxxxxx</span><script type="text/javascript">// 需求: 點擊按鈕后, 將內容放到 span標簽中// 1 給按鈕綁定單擊事件document.getElementById("btn").onclick = function() {// 將內容放到 span標簽中document.getElementById("content1").innerText = "<h1 style='color:red'>32期天生傲嬌111</h1>";document.getElementById("content2").innerHTML = "<h1 style='color:green'>32期天生傲嬌222</h1>";} </script> </body> </html>

8 dom的常用操作(查)

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>DOM：查找元素的方法</title><style>table {/*細邊框樣式*/border-collapse: collapse;width: 500px;}</style> </head> <body> <input type="button" value="(通過標簽名)給表格奇偶行添加不同的背景色" id="b1"> <hr/> <table border="1"><tr><td>100</td><td>100</td><td>100</td></tr><tr><td>100</td><td>100</td><td>100</td></tr><tr><td>100</td><td>100</td><td>100</td></tr><tr><td>100</td><td>100</td><td>100</td></tr><tr><td>100</td><td>100</td><td>100</td></tr> </table><script type="text/javascript">// 目標: 單擊按鈕時, 讓表格隔行變色// 單擊按鈕時document.getElementById("b1").onclick = function () {// 獲取頁面中的所有trvar trObjArr = document.getElementsByTagName("tr");for (let i = 0; i < trObjArr.length; i++) {const trObj = trObjArr[i];// 判斷if(i%2==0) {trObj.style.backgroundColor = "lightyellow";}else {trObj.style.backgroundColor = "lightblue";}}}</script><hr/> <input type="button" value="(通過name屬性)選中所有的商品" id="b2"/> <hr/>  <input type="checkbox" name="product" >自行車 <input type="checkbox" name="product">電視機 <input type="checkbox" name="product">洗衣機<script type="text/javascript">//通過css的#id選擇器來選中元素// 1 給按鈕綁定單擊事件// document.getElementById("b2").onclick = function () {// alert(1111);// }document.querySelector("#b2").onclick = function() {// 根據name屬性值選中一組標簽對象var productObjArr = document.getElementsByName("product");for (const productObj of productObjArr) {productObj.checked = true; // ture 選中, false 取消選中}} </script> <hr/><input type="button" value="(通過類名)給a添加鏈接" id="b3"/> <hr/> <a class="company">傳智播客</a> <a class="company">傳智播客</a> <a class="company">傳智播客</a><script type="text/javascript">document.getElementById("b3").onclick = function () {// 根據class屬性值獲取一組標簽var companyObjArr = document.getElementsByClassName("company");for (let i = 0; i < companyObjArr.length; i++) {const companyObj = companyObjArr[i];companyObj.href = "http://www.itcast.cn";}} </script> </body> </html>

9 dom 增

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <div id="myDiv"></div> <script>// 目標: 創建a標簽顯示到頁面上// 方式一// // 創建a標簽 <a></a>// var aObj = document.createElement("a");// // 設置屬性 <a href="http://www.jd.com"></a>// aObj.setAttribute("href", "http://www.jd.com");// // 設置內容 <a href="http://www.jd.com">京東</a>// aObj.innerText = "京東";// // 將a標簽放到 div中// document.getElementById("myDiv").appendChild(aObj);// 方式二var str = "<a href='http://www.baidu.com'>百度</a>";document.getElementById("myDiv").innerHTML = str; </script> </body> </html>

10 二級聯動

<!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><title>省市聯動</title> </head> <body> <select id="province"><option>--請選擇省份--</option> </select> <select id="city"><option>--請選擇城市--</option> </select> </body><script>// 省份數據var provinces= ["廣東省","湖南省","廣西省"];// 城市數據，數據是一個二維數組，一維中每個元素是一個數組var cities = [["深圳","廣州","東莞"],["長沙市","郴州市","湘潭市"],["南寧市","桂林市","柳州市"]];// 需求1: 初始化省級信息var provinceStr = `<option>--請選擇省份--</option>`;for (let i = 0; i < provinces.length; i++) {provinceStr += `<option value="${i}">${provinces[i]}</option>`;}//console.log(provinceStr);document.getElementById("province").innerHTML = provinceStr;// 需求2: 當省發生變化時, 加載市級信息document.getElementById("province").onchange = function () {console.log(this.value);//var provinceVal = document.getElementById("province").value;var provinceVal = this.value;var cityArr = cities[provinceVal];var cityStr = `<option>--請選擇城市--</option>`;if(cityArr!=null && cityArr.length>0) {for (let i = 0; i < cityArr.length; i++) {cityStr += `<option value="${i}">${cityArr[i]}</option>`;}//console.log(cityStr);}document.getElementById("city").innerHTML = cityStr;}</script> </html>

11 正則寫法

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>正則表達式</title> </head> <body> <script type="text/javascript">/*** 創建正則表達式的2種方式：* 1. new RegExp("正則表達式")* 2. /正則表達式/** 判斷正則表達式是否匹配字符串的方法：* boolean 正則表達式對象.test(字符串) 如果匹配返回true，否則返回false* 與Java不同，Java默認是精確匹配。JS默認是模糊匹配，只要包含這個正則表達式的內容就可以* 結論：如果要在JS中精確匹配，必須以^開頭，以$結尾*/// 匹配含有三個數字var reg1 = new RegExp("\\d{3}");// document.write(reg1.test("123") + "<br/>"); // true// document.write(reg1.test("a123") + "<br/>"); // true// document.write(reg1.test("123z") + "<br/>"); // true// document.write(reg1.test("a123z") + "<br/>"); // truedocument.write("<hr/>")// 匹配以3個數字開頭的var reg2 = new RegExp("^\\d{3}");// document.write(reg2.test("123") + "<br/>"); // true// document.write(reg2.test("a123") + "<br/>"); // false// document.write(reg2.test("123z") + "<br/>"); // true// document.write(reg2.test("a123z") + "<br/>"); // false//// document.write("<hr/>");// 匹配三個數字結尾的// var reg3 = new RegExp("\\d{3}$");// document.write(reg3.test("123") + "<br/>"); // true// document.write(reg3.test("a123") + "<br/>"); // true// document.write(reg3.test("123z") + "<br/>"); // false// document.write(reg3.test("a123z") + "<br/>"); // false//// document.write("<hr/>");// 正確寫法var reg4 = new RegExp("^\\d{3}$");document.write(reg4.test("123") + "<br/>"); // truedocument.write(reg4.test("a123") + "<br/>"); // falsedocument.write(reg4.test("123z") + "<br/>"); // falsedocument.write(reg4.test("a123z") + "<br/>"); // falsedocument.write("<hr/>");/*使用第2種寫法*/var reg5 = /^\d{3}$/;document.write(reg5.test("123") + "<br/>"); // truedocument.write(reg5.test("a123") + "<br/>"); // falsedocument.write(reg5.test("123z") + "<br/>"); // falsedocument.write(reg5.test("a123z") + "<br/>"); // false</script> </body> </html>

12 正則修飾符

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>正則表達式匹配模式</title> </head> <body> <script type="text/javascript">/*i 忽略大小寫比較1. new RegExp("正則表達式","匹配模式")2. /正則表達式/匹配模式*/var reg1 = new RegExp("^cat$");document.write(reg1.test("CAT") + "<br/>"); // falsedocument.write(reg1.test("Cat") + "<br/>"); // falsedocument.write("<hr/>");var reg2 = new RegExp("^cat$", "i");document.write(reg2.test("CAT") + "<br/>"); // truedocument.write(reg2.test("Cat") + "<br/>"); // truedocument.write("<hr/>");var reg3 = /^cat$/;document.write(reg3.test("CAT") + "<br/>"); // falsedocument.write(reg3.test("Cat") + "<br/>"); // falsedocument.write("<hr/>");var reg4 = /^cat$/i;document.write(reg4.test("CAT") + "<br/>"); // truedocument.write(reg4.test("Cat") + "<br/>"); // true </script> </body> </html>

13 注冊案例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>驗證注冊頁面</title><style type="text/css">body {margin: 0;padding: 0;font-size: 12px;line-height: 20px;}.main {width: 525px;margin-left: auto;margin-right: auto;}.hr_1 {font-size: 14px;font-weight: bold;color: #3275c3;height: 35px;border-bottom-width: 2px;border-bottom-style: solid;border-bottom-color: #3275c3;vertical-align: bottom;padding-left: 12px;}.left {text-align: right;width: 80px;height: 25px;padding-right: 5px;}.center {width: 280px;}.in {width: 130px;height: 16px;border: solid 1px #79abea;}.red {color: #cc0000;font-weight: bold;}div {color: #F00;}</style><script type="text/javascript">function checkAll() {// 如果通過了所有的校驗, 返回true; 否則返回falsevar flag1 = checkUser();var flag2 = checkMobile();return flag1 && flag2;}// 需求: 校驗用戶名function checkUser() {// 1 獲取用戶輸入的值let userVal = document.getElementById("user").value;// 2 創建正則對象 : 用戶名只能由英文字母和數字組成，長度為4～16個字符，并且以英文字母開頭var reg = /[a-zA-Z]\w{3,15}/;// 3 通過正則校驗, 返回boolean結果var flag = reg.test(userVal);// 4 判斷if(flag) {// 4.1 如果合法, 顯示對勾圖片, 返回truedocument.getElementById("userInfo").innerHTML = `<img src="img/gou.png" width="20"/>`;return true;}else {// 4.2 如果不合法, 提示錯誤信息, 返回falsedocument.getElementById("userInfo").innerHTML = `用戶名格式不對!`;return false;}}// 校驗手機號的格式function checkMobile() {// 1 獲取用戶輸入的值let mobileVal = document.getElementById("mobile").value;// 2 創建正則對象 : 手機號：/^1[3456789]\d{9}$/var reg = /^1[3456789]\d{9}$/;// 3 通過正則校驗, 返回boolean結果var flag = reg.test(mobileVal);// 4 判斷if(flag) {// 4.1 如果合法, 顯示對勾圖片, 返回truedocument.getElementById("mobileInfo").innerHTML = `<img src="img/gou.png" width="20"/>`;return true;}else {// 4.2 如果不合法, 提示錯誤信息, 返回falsedocument.getElementById("mobileInfo").innerHTML = `手機號格式不對!`;return false;}}</script></head><body><form action="server" method="post" id="myform" onsubmit="return checkAll()"><table class="main" border="0" cellspacing="0" cellpadding="0"><tr><td><img src="img/logo.jpg" alt="logo" /><img src="img/banner.jpg" alt="banner" /></td></tr><tr><td class="hr_1">新用戶注冊</td></tr><tr><td style="height:10px;"></td></tr><tr><td><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td class="left">用戶名：</td><td class="center"><input id="user" name="user" type="text" class="in" onblur="checkUser()"/><span id="userInfo" style="color:red"></span></td></tr><tr><td class="left">密碼：</td><td class="center"><input id="pwd" name="pwd" type="password" class="in" /></td></tr><tr><td class="left">確認密碼：</td><td class="center"><input id="repwd" name="repwd" type="password" class="in"/></td></tr><tr><td class="left">電子郵箱：</td><td class="center"><input id="email" name="email" type="text" class="in"/></td></tr><tr><td class="left">手機號碼：</td><td class="center"><input id="mobile" name="mobile" type="text" class="in" onblur="checkMobile()"/><span id="mobileInfo" style="color:red"></span></td></tr><tr><td class="left">生日：</td><td class="center"><input id="birth" name="birth" type="text" class="in"/></td></tr><tr><td class="left"> </td><td class="center"><input name="" type="image" src="img/register.jpg" /></td></tr></table></td></tr></table></form></body> </html>

總結

以上是生活随笔為你收集整理的dya04 js_02的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。