經過遊戲認識 --- JQuery與原生JS的差別
| 前言 |
jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype以後又一個優秀的JavaScript代碼庫（ 或JavaScript框架）。jQuery設計的宗旨是「write Less，Do More」，即倡導寫更少的代碼，作更多的事情。它封裝JavaScript經常使用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操做、事件處理、動畫設計和Ajax交互。javascript
今天，影子就經過一個小遊戲，剪刀石頭布，來給你們介紹下，二者之間的區別。css
| 一、原生JS實現遊戲 |
HTML：html
1 <body> 2 3 <div id="body"> 4 <div id="tips"> 5 請選擇 6 </div> 7 8 <div id="imgs"> 9 <img src="插件/img/jiandao.png" id="jiandao" onclick="jianDao()"class="img1"/> 10 <img src="插件/img/shitou.png" id="shitou" onclick="shiTou()"class="img1"/> 11 <img src="插件/img/bu.png" id="bu" onclick="bU()" class="img1"/> 12 </div> 13 14 <div id="jieguo"> 15 <div class="jieguo"> 16 <div>您選擇了</div> 17 <img src="插件/img/daiding.png" id="myImg" /> 18 </div> 19 20 <div class="pk">PK</div> 21 22 <div class="jieguo"> 23 <div>系統選擇了</div> 24 <img src="插件/img/daiding.png" id="computer" /> 25 </div> 26 </div> 27 28 <div id="score"> 29 等待結果中.... 30 </div> 31 32 <div id="scoreFen"> 33 <span>00</span>：<span>00</span> 34 </div> 35 </div> 36 </body>
css:java
1 <style type="text/css"> 2 *{ 3 margin: 0px; 4 padding: 0px; 5 } 6 7 #body{ 8 width: 100%; 9 height: 700px; 10 max-width: 500px; 11 margin: 0 auto; 12 background-color: #FAE738; 13 overflow: hidden; 14 } 15 16 #tips{ 17 margin-top: 40px; 18 text-align: center; 19 color: white; 20 font-size: 36px; 21 font-weight: bold; 22 } 23 24 #imgs{ 25 width: 90%; 26 margin: 20px auto; 27 display: flex; 28 justify-content: space-around; 29 } 30 31 #jieguo{ 32 width: 90%; 33 margin: 30px auto; 34 display: flex; 35 justify-content: space-around; 36 } 37 38 #jieguo .jieguo div{ 39 height: 30px; 40 width: 89px; 41 line-height: 30px; 42 text-align: center; 43 color: white; 44 } 45 46 #jieguo .jieguo img{ 47 height: 89px; 48 } 49 50 #jieguo .pk{ 51 height: 120px; 52 line-height: 120px; 53 font-size: 48px; 54 font-weight: bold; 55 } 56 57 #score,#scoreFen{ 58 text-align: center; 59 font-size: 24px; 60 color: red; 61 padding-top: 10px; 62 } 63 64 </style>
js:jquery
1 <script src="JS/jquery-3.1.1.js" type="text/javascript"></script>
1 <script type="text/javascript"> 2 3 var jiandao = document.getElementById("jiandao"); 4 var shitou = document.getElementById("shitou"); 5 var bu = document.getElementById("bu"); 6 var myImg = document.getElementById("myImg"); 7 var computer = document.getElementById("computer"); 8 var score = document.getElementById("score"); 9 var scoreFen = document.getElementById("scoreFen"); 10 11 var myScore=0,comScore=0; 12 13 var imgs = ["插件/img/jiandao.png","插件/img/shitou.png","插件/img/bu.png"]; 14 console.log(imgs[0]); 15 jiandao.onclick = function(){ 16 var imgSrc = jiandao.getAttribute("src"); 17 18 myImg.setAttribute("src",imgSrc); 19 checkImg(imgSrc); 20 } 21 22 shitou.onclick = function(){ 23 var imgSrc = shitou.getAttribute("src"); 24 myImg.setAttribute("src",imgSrc); 25 checkImg(imgSrc); 26 } 27 28 bu.onclick = function(){ 29 var imgSrc = bu.getAttribute("src"); 30 myImg.setAttribute("src",imgSrc); 31 checkImg(imgSrc); 32 } 33 34 35 function checkImg(imgSrc){ 36 var myIndex = imgs.indexOf(imgSrc); 37 var intervalId = setInterval(function(){ 38 var num = parseInt(Math.random()*3); 39 computer.setAttribute("src",imgs[num]); 40 41 },20); 42 43 setTimeout(function(){ 44 clearInterval(intervalId); 45 var comSrc = computer.getAttribute("src"); 46 var comIndex = imgs.indexOf(comSrc); 47 if(myIndex==comIndex){ 48 score.innerHTML = "平局！再戰一輪吧！"