當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JS实验案例

發(fā)布時間：2024/3/12 javascript 39 豆豆

生活随笔收集整理的這篇文章主要介紹了 JS实验案例小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

JS實驗案例

View Code

00猜字游戲

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div { width: 320px; height: 100px; border: 1px solid #8A8A8A; text-align: center; } </style> </head> <body> <div> <p>0-100間的數(shù)字，點擊開始進行猜數(shù)字游戲！</p> <input type="button" value="開始" id="start" style="width: 80px;" onclick="strat_End()" /> <input type="text" id="input" value="" /> <input type="button" value="確認" id="confirm" onclick="submit_Input()" /> </div> <script type="text/javascript"> //獲取元素節(jié)點 let confirm = document.getElementById('confirm'); let start = document.getElementById('start'); let input = document.getElementById('input'); let randomNumber; //點擊開始或結束按鈕觸發(fā)函數(shù) function strat_End() { //當按鍵是開始,就生成隨機數(shù)并保存在randomNumber中 if (start.value == "開始") { //生成隨機數(shù) randomNumber = Math.floor(Math.random() * 100); //用于在控制臺獲取生成的隨機數(shù) // console.log(randomNumber); //點擊了開始按鈕后將按鈕改變成結束按鈕 start.value = "結束"; //當按鍵是結束按鈕時,將randomNumber的值清除掉,便于游戲循環(huán) } else if (start.value == "結束") { //清除randomNumber的值 randomNumber = ''; //查看randomNumber的值是否已被清除 // console.log(randomNumber); //將按鈕轉換為開始按鈕,讓游戲可以循環(huán)進行,按鈕可以再次點擊 start.value = "開始"; } //將系統(tǒng)自動生成的隨機數(shù)返回用于計算 return randomNumber; } //點擊確認按鍵后獲取輸入框的值并進行判斷 function submit_Input() { //如果是在點擊了開始后再點擊確認按鍵,將獲取輸入框的值 if (start.value == "結束") { //判斷輸入框的值是否為空 if (input.value != '') { //輸入框的值不為空，判斷輸入框用戶輸入數(shù)據(jù)的數(shù)據(jù)類型能否轉換為數(shù)字類型 if (!isNaN(Number(input.value))) { //便于保存每次用戶輸入的數(shù)據(jù) // console.log(input.value); //數(shù)據(jù)類型可以轉換為數(shù)字時,將轉換后的數(shù)字保存起來便于比較 let inputNumber = Number(input.value); //調用封裝的result方法,比較用戶輸入數(shù)據(jù)和系統(tǒng)生成隨機數(shù)的大小 result(randomNumber, inputNumber) } else { //用戶輸入的數(shù)據(jù)類型不正確時,對用戶進行提示 alert("請輸入正確的數(shù)字！"); //將用戶輸入的錯誤數(shù)據(jù)自動清空 input.value = ''; } } else { //用戶沒有輸入數(shù)據(jù)時點擊了確認按鍵,對用戶進行提示 window.alert("請輸入數(shù)字!"); } } else { //當用戶已經結束游戲或者第一次進入游戲就先輸入了數(shù)據(jù)點擊了確認按鍵,對用戶進行提示 alert("你還沒有點擊開始哦！"); //如果用戶輸入了數(shù)據(jù),將用戶輸入的數(shù)據(jù)自動清除 input.value = ''; } } //封裝方法對用戶輸入的數(shù)據(jù)和用戶自動生成的隨機數(shù)進行比較大小 function result(randomNumber, inputNumber) { //輸入數(shù)據(jù)比隨機數(shù)大 if (inputNumber > randomNumber) { //提示用戶輸入數(shù)據(jù)大了 window.alert("輸入數(shù)字大了！"); //清空輸入的數(shù)據(jù),便于用戶再輸入 input.value = ''; } //輸入數(shù)據(jù)比隨機數(shù)小 else if (inputNumber < randomNumber) { //提示用戶輸入數(shù)據(jù)小了 window.alert("輸入數(shù)字小了！"); //清空輸入的數(shù)據(jù),便于用戶再輸入 input.value = ''; } //輸入數(shù)據(jù)與隨機數(shù)相等 else { window.alert("你猜對啦！"); //用戶點擊提示框確認按鍵后，游戲自動結束，并自動將按鈕轉換為開始按鈕 start.value = "開始"; } }</script> </body> </html> 猜字游戲

00彈力球游戲

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>彈力球案例</title> <style> *{ margin: 0px; padding: 0px; } #imgid{ width: 128px; height: 128px; position: absolute; top: 0px; left: 0px } #imgid img{ width: 128px; height: 128px; } </style></head> <body> <div id="imgid"> <img src="img/Basketball.png" alt="#"> </div> <script> imgdemo=document.getElementById('imgid'); screenHeight=document.documentElement.clientHeight;//可視區(qū)域的高 screenWidth=document.documentElement.clientWidth;//可視區(qū)域的寬 imgheight=128;//圖片的高 imgWidth=128;//圖片的寬 Height=screenHeight-imgheight;//差值 Width=screenWidth-imgWidth; ys=0;//初始值 yv=10;//變化值 xs=0; xv=10; //設置一個定時器 setInterval(function(){ //y軸 ys+=yv;//每10毫秒相加 if(ys>=Height){ ys=Height; yv=-yv;//設置yv為負值 } if(ys<=0){ yv=-yv;//到頂端時設置為正值 }//x軸 xs+=xv; if(xs>=Width){ xs=Width; xv=-xv; } if(xs<=0){ xv=-xv; }imgdemo.style.top=ys+'px'; imgdemo.style.left=xs+'px'; document.title=ys+"-"+xs; },10); </script> </body> </html> View Code

1.換圖片

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>電燈開關</title></head> <body><img id="light" src="img/off.gif"><script> i=0; imgid = document.getElementById("light"); imgid.onclick=function(){ if(i%2==0){ imgid.src="img/on.gif"; //換圖 }else{ imgid.src="img/off.gif"; //點擊換回來 } i++; } </script> </body> </html> View Code

2.觸碰行變色

<!DOCTYPE html> <html lang="zn"> <head> <meta charset="UTF-8"> <title>demo</title> <style> *{ font-family: 微軟雅黑； } .h{ background-color: #ccc; } .h:hover,h2:hover{ background-color: #999; } </style> </head> <body> <script type="text/javascript"> for(i=1;i<8;i++){ if(i%2==0){ document.write("<h2 class='h'>"+i+"</h2><br>"); } else{ document.write('<h2>'+i+'</h2><br>'); } } </script></body> </html> View Code

3.多選，反選，全選

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title>  </head> <body> <form action="javascript:"> <p>選擇愛好:</p> <p><label><input type="checkbox" name="">爬山</label></p> <p><label><input type="checkbox" name="">爬山</label></p> <p><label><input type="checkbox" name="">爬山</label></p> <p><label><input type="checkbox" name="">爬山</label></p> <p><label><input type="checkbox" name="">爬山</label></p> <p><label><input type="checkbox" name="">爬山</label></p> <p><label><input type="checkbox" name="">爬山</label></p> <p><label><input type="checkbox" name="">爬山</label></p> <p> <button id='all'>全選</button> <button id='noall'>全不選</button> <button id='unall'>反選</button> </p> </form> </body> <script> all=document.getElementById('all'); noall=document.getElementById('noall'); unall=document.getElementById('unall'); objs=document.getElementsByTagName('input'); //全選 all.onclick=function(){ for(i=0;i<objs.length;i++){ objs[i].checked=true; } } //全不選 noall.onclick=function(){ for(i=0;i<objs.length;i++){ objs[i].checked=false; } } //反選 unall.onclick=function(){ for(i=0;i<objs.length;i++){ // if(objs[i].checked){ // objs[i].checked=false; // }else{ // objs[i].checked=true; // }//三元運算符改進 //objs[i].checked=objs[i].checked?false:true; //一元運算符 objs[i].checked=!objs[i].checked; } } </script> </html> View Code

4.秒表

<!DOCTYPE html><html lang="zn"><head><meta charset="UTF-8"><title>秒表</title><style> .contain{ width: 200px; height: 50px; background: #000; border-radius: 20px; font-weight: bold; color: #0f0; text-align: center; font-size: 30px; line-height: 50px; }</style> </head> <body> <div class="contain"> <span id="Interval">10:38:00</span> </div>  <button id='pause'>暫停</button>   <button id='action'>開始</button><script>//獲取日期對象function getDate(){dobj=new Date();hour = dobj.getHours();　　//時minute=dobj.getMinutes(); //分second = dobj.getSeconds();//秒str=hour+":"+minute+":"+second;dsq=document.getElementById("Interval");//獲取id Intervaldsq.innerHTML=str;}//未點擊按鈕前，先執(zhí)行一次getDate();start();//開始函數(shù)function start(){sobj=setInterval(getDate,1000);　　//設置定時器，一秒鐘執(zhí)行一次getDate()}//停止函數(shù)function stop(){　　clearInterval(sobj);　　//清除定時器}//關閉按鈕c = document.getElementById("pause");c.onclick=function(){stop();}//開始按鈕action = document.getElementById("action");action.onclick=function(){start();}</script> </body></html> View Code

5.表單事件和鼠標事件

<!DOCTYPE html> <html lang="zn"> <head> <meta charset="UTF-8"> <title>表單事件和鼠標、鍵盤事件</title> <style> .txt{ border-style: 2px solid;} </style> </head> <body> <form action="http://www.baidu.com" method="get" id='fid'> <p>用戶名</p> <input class="txt" type="text" name="name" placeholder="請輸入用戶名" id="input" value="java"> <input class="txt" type="text" name="name" value="javascript" id="input2"> <input class="txt" type="text" id='input3'> <input class="txt" type="text" id='input4'>  <select id='s1'> <option placeholder="選擇城市">選擇城市</option> <option value="北京">北京</option> <option value="太原">太原</option> <option value="南京">南京</option> <option value="南寧">南寧</option> <option value="天津">天津</option> </select><br> <h3>請確認你選擇的城市：<span id="s2"> </span></h3><input type="submit" value="提交">  <input type="reset" value="重置"> </form> <script type="text/javascript"> inobj=document.getElementById('input'); inobj.onfocus=function(){ this.style.outlineColor="#f00"; } /*inobj.onblur=function(){ val=this.value; if(val.length<6){ alert("用戶名至少6位"); } }*/ //當值改變的時候 inobj.onchange=function(){ alert("不要改變我的元素"); } //當表單元素被選中的時候 inobj.onselect=function(){ alert('我已被選中'); } //當表單提交的時候 fidobj=document.getElementById('fid'); fidobj.onsubmit=function(){ r = confirm('您要提交表單嗎？'); if(!r){ return false; } } //當表單重置的時候 fidobj.onreset=function(){ r = confirm('你要重置嗎？'); if(!r){ return false; } }//onchange應用下拉菜單 s1obj=document.getElementById('s1'); s2obj=document.getElementById('s2'); s1obj.onchange=function(){ s1val=this.value; s2obj.innerHTML=s1val; } //獲得表單焦點，全選中表單元素 inobj2=document.getElementById('input2'); inobj2.onfocus=function(){ this.select();//全選 }//鼠標事件 //鼠標移入 inobj.onmouseenter=function(){ this.value="I love javascript"; } //鼠標移出 inobj.onmouseleave=function(){ this.value="I love java"; }inobj3=document.getElementById('input3'); //鼠標一移動 inobj3.onmousemove=function(){ this.style.outlineColor="#f00"; this.value="javascript"; }//鍵盤事件 inobj4=document.getElementById('input4'); //鍵盤按下時 /*inobj4.onkeydown=function(){ alert('你按下就會觸發(fā)我'); }*/ //鍵盤彈起時 /*inobj4.onkeyup=function(){ //alert('你彈起鍵盤就會觸發(fā)我'); val = this.value.toUpperCase();//轉成大寫 this.value=val; }*/ //鍵盤按下并釋放一個鍵 inobj4.onkeypress=function(){ alert('按住我不放，我會一直彈出的喔'); } </script> </body> </html> View Code

6.回到頂部案例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>回到頂部案例</title> <style> .fooer{ position: fixed; bottom: 0px; right:0px; margin-bottom: 15px; margin-right: 15px; } img{ width: 120px; height: 130px; cursor: pointer; } </style> </head> <body><div class="fooer">  <img src="img/arrive.png" alt="回到頂部" id="ar" /> </a> </div>    <h1>0000000000000001</h1> <h1>0000000000000002</h1> <h1>0000000000000003</h1> <h1>0000000000000004</h1> <h1>0000000000000005</h1> <h1>0000000000000006</h1> <h1>0000000000000007</h1> <h1>0000000000000008</h1> <h1>0000000000000009</h1> <h1>0000000000000010</h1> <h1>0000000000000011</h1> <h1>0000000000000012</h1> <h1>0000000000000013</h1> <h1>0000000000000014</h1> <h1>0000000000000015</h1> <h1>0000000000000016</h1> <h1>0000000000000017</h1> <h1>0000000000000018</h1> <h1>0000000000000019</h1> <h1>0000000000000020</h1> <h1>0000000000000021</h1> <h1>0000000000000022</h1> <h1>0000000000000023</h1> <h1>0000000000000024</h1> <h1>0000000000000025</h1> <h1>0000000000000026</h1> <h1>0000000000000027</h1> <h1>0000000000000028</h1> <h1>0000000000000029</h1> <h1>0000000000000030</h1> <h1>0000000000000031</h1> <h1>0000000000000032</h1> <h1>0000000000000033</h1> <h1>0000000000000034</h1> <h1>0000000000000035</h1> <h1>0000000000000036</h1> <h1>0000000000000037</h1> <h1>0000000000000038</h1> <h1>0000000000000039</h1> <h1>0000000000000040</h1> <h1>0000000000000041</h1> <h1>0000000000000042</h1> <h1>0000000000000043</h1> <h1>0000000000000044</h1> <h1>0000000000000045</h1> <h1>0000000000000046</h1> <h1>0000000000000047</h1> <h1>0000000000000048</h1> <h1>0000000000000049</h1> <h1>0000000000000050</h1> <h1>0000000000000051</h1> <h1>0000000000000052</h1> <h1>0000000000000053</h1> <h1>0000000000000054</h1> <h1>0000000000000055</h1> <h1>0000000000000056</h1> <h1>0000000000000057</h1> <h1>0000000000000058</h1> <h1>0000000000000059</h1> <h1>0000000000000060</h1> <h1>0000000000000061</h1> <h1>0000000000000062</h1> <h1>0000000000000063</h1> <h1>0000000000000064</h1> <h1>0000000000000065</h1> <h1>0000000000000066</h1> <h1>0000000000000067</h1> <h1>0000000000000068</h1> <h1>0000000000000069</h1> <h1>0000000000000070</h1> <h1>0000000000000071</h1> <h1>0000000000000072</h1> <h1>0000000000000073</h1> <h1>0000000000000074</h1> <h1>0000000000000075</h1> <h1>0000000000000076</h1> <h1>0000000000000077</h1> <h1>0000000000000078</h1> <h1>0000000000000079</h1> <h1>0000000000000080</h1> <h1>0000000000000081</h1> <h1>0000000000000082</h1> <h1>0000000000000083</h1> <h1>0000000000000084</h1> <h1>0000000000000085</h1> <h1>0000000000000086</h1> <h1>0000000000000087</h1> <h1>0000000000000088</h1> <h1>0000000000000089</h1> <h1>0000000000000090</h1> <h1>0000000000000091</h1> <h1>0000000000000092</h1> <h1>0000000000000093</h1> <h1>0000000000000094</h1> <h1>0000000000000095</h1> <h1>0000000000000096</h1> <h1>0000000000000097</h1> <h1>0000000000000098</h1> <h1>0000000000000099</h1> <h1>0000000000000100</h1> </body> <script> //用js方法 window.onscroll=function(){ st=document.documentElement.scrollTop;//獲取滾動的高 document.title=st; arobj=document.getElementById('ar'); arobj.onclick=function(){ document.documentElement.scrollTop=0;//設置為0，回到頂部 } }</script> </html> View Code

7.正則表達式

　　1)匹配電話號碼

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>正則匹配電話號碼</title> </head> <body> <h1>正則匹配電話號碼</h1> </body> <script> phone='13876457345'; if(phone.match(/^138+(\d{8})+$/g)){ alert('電話匹配成功'); }else{ alert('匹配失敗'); } </script> </html> View Code

　　2)匹配郵箱

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>正則郵箱格式</title> </head> <body> <h1>正則匹配郵箱</h1> </body> <script type="text/javascript"> email='1363f@qq.com' if(email.match(/^\w+@\w+\.\w+$/i)){ alert('郵箱格式正確'); }else{ alert('郵箱格式有誤'); } </script> </html> View Code

　　3)替換

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>替換</title> </head> <body> <h1>替換</h1> <script> //有'2019/7/15'換成2019-7-15 date='2019/7/15'; time=date.replace(/(\d+)\/+(\d+)\/+(\d)/g,"$1-$2-$3"); alert(time); </script></body> </html> View Code

8.閉包

閉包的定義：在一個函數(shù)的內部有一個返回的函數(shù)，內部的函數(shù)使用外部函數(shù)的變量，通過returnf返回，內部函數(shù)被拋到外部，導致這個變量沒有被釋放回收。(相當于全局變量)。

閉包切換圖片的簡單應用

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #box>span{ display: inline-block; width: 100px; background: #faa; height: 50px; color:#fff; font-size:24px; text-align: center; line-height: 50px; } #box>span:hover{ background: orange; } img{ display: none; } </style> </head> <body> <div id="box"> <span>圖1</span> <span>圖2</span> <span>圖3</span> </div> <img src="路徑" alt="圖1" > <img src="路徑" alt="圖2" > <img src="路徑" alt="圖3" > <script type="text/javascript"> window.onload=function(){ //獲取box的子 var boxs=document.getElementById('box').children; for(var i=0;i<boxs.length;i++){ boxs[i].onclick=function(){ var k=i; return function(){ var imgobj=document.getElementsByTagName('img'); //把所有的圖片隱藏 for(var j=0;j<imgobj.length;j++){ imgobj[j].style.display='none'; } //顯示當前點擊的圖片 imgobj[k].style.display='block'; }; }(); } } </script> </body> </html> View Code

9.控制圖片走動

通過event.clientX和event.clientY來獲取鼠標移動的坐標

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>移動圖片</title> <style> img{ position: absolute; top:0px; left: 0px; } </style> </head> <body><img id="light" src="img/69.png"><script> imgobj=document.getElementById('light'); //鼠標移動改變標題 //document.onmousemove=function(){ // document.title='你還好嗎'; //} //移動鼠標顯示像素 //document.onmousemove=function(event){ // x=event.clientX; // y=event.clientY; // document.title=x+"-"+y; //} //移動圖片 document.onmousemove=function(event){ x=event.clientX; y=event.clientY; imgobj.style.top=x+"px"; imgobj.style.left=y+"px"; }</script> </body> </html> View Code

10.ajax

ajax是處理前端和后端數(shù)據(jù)的通訊，是一種無須加載完整個頁面實現(xiàn)網(wǎng)頁部分刷新的技術，同時和定時器、框架、一樣也是實現(xiàn)異步的一種方式。在客戶端請求ajax時，ajax處理數(shù)據(jù)有可能會失敗，所以有一種失敗的狀態(tài)，在jquery框架中ajax更加的清晰。

js中寫ajax的步驟

1.聲明一個xhr對象

2.打開發(fā)射器open

3.聲明請求頭

4.發(fā)射(發(fā)射器發(fā)射)

5.處理狀態(tài)(等待ajax處理)

模擬請求百度的ajax,具體代碼實現(xiàn)

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="box"></div> <script type="text/javascript"> var box = document.getElementById('box'); // 1.聲明 var xhr=new XMLHttpRequest(); // 2.發(fā)射器(參數(shù)1：發(fā)送數(shù)據(jù)的方式，參數(shù)2：接口地址，參數(shù)3：false(同步),true(異步)) xhr.open('get','http://wwww.baidu.com',true); // 3.設置請求頭類型 //xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); // 4.發(fā)送數(shù)據(jù) xhr.send(); // 5.狀態(tài) box.innerHTML='加載中...' xhr.onreadystatechange=function(){ setInterval(function(){ if(xhr.status==200&&xhr.readyState==4){ //(readyState)五種準備狀態(tài) 0:未發(fā)送 1:已發(fā)送 2:已收到 3:正在處理 4:處理完畢 //(status)三種結果狀態(tài) 200:成功 0:失敗 404:服務器未找到 box.innerHTML='加載完畢' } },1000); }</script> </body> </html> View Code

通過請求百度的接口，模擬請求的時間，如果瀏覽器(谷歌)出現(xiàn)了：No 'Access-Control-Allow-Origin'這種錯誤，說明瀏覽器需要降級

點擊瀏覽器鼠標右鍵屬性：在地址的最后面空格再添加--disable-web-security --user-data-dir=c:\

c表示瀏覽器所在的盤符

總結

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

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

案例
js