JQuery&原生js ——實現剪刀石頭布小遊戲

時間 2019-11-17

原文原文鏈接

前言

jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype以後又一個優秀的JavaScript代碼庫（ 或JavaScript框架）。jQuery設計的宗旨是「write Less，Do More」，即倡導寫更少的代碼，作更多的事情。它封裝JavaScript經常使用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操做、事件處理、動畫設計和Ajax交互。javascript

上一篇博客中，小編給你們展現了jQuery的一大優點，自定義插件。相信這個功能讓各位都躍躍欲試，想要製做一個本身的插件了吧！在這裏小編祝賀你們在成爲大牛的路上向前跨了一步！！今天，小編就實現一個小遊戲帶你們領略jQuery的最大大優點，相比於原生的簡潔，也就是「write Less，Do More」。css

1、原生JS實現剪刀石頭布遊戲功能

話很少說，直接來代碼！html

HTML：java

 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:jquery

 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:設計模式

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 = "平局！再戰一輪吧！";
49                 }else if(myIndex==0&&comIndex==2
50                          || myIndex==1&&comIndex==0
51                          || myIndex==2&&comIndex==1){
52                     score.innerHTML = "贏啦！繼續虐他吧！";
53                     myScore++;
54                 }else{
55                     score.innerHTML = "輸啦！繼續努力吧！";
56                     comScore++;
57                 }
58                 myScore = (myScore+"").length<2?"0"+myScore:myScore+"";
59                 comScore = (comScore+"").length<2?"0"+comScore:comScore+"";
60                 
61                 scoreFen.firstElementChild.innerHTML = myScore;
62                 scoreFen.lastElementChild.innerHTML = comScore;
63                 
64             },400);
65         }
66         
67         
68         
69     </script>

結果：框架

2、jQuery實現剪刀石頭布

HTML代碼與css代碼請看上慄，畢竟只是實現功能的方式不用，佈局是同樣同樣滴！dom

jQuery：函數

 1 <script type="text/javascript">
 2         $("#imgs>img").click(function(){
 3             checkImg($(this).attr("src"));
 4         });
 5         
 6         var imgs = ["插件/img/jiandao.png","插件/img/shitou.png","插件/img/bu.png"];
 7         function checkImg(imgSrc){
 8             $("#myImg").attr("src",imgSrc);
 9             var id = setInterval(function(){
10                 var num = parseInt(Math.random()*3);
11                 $("#computer").attr("src",imgs[num]);
12             },20);
13             
14             setTimeout(function(){
15                 clearInterval(id);
16                 var my = imgs.indexOf(imgSrc);
17                 var com = imgs.indexOf($("#computer").attr("src"));
18                 if(my==0&&com==2 || my==1&&com==0 || my==2&&com==1){
19                     $("#score").html("恭喜！您贏啦！");
20                     var mf = parseInt($("#scoreFen span:eq(0)").text())+1;
21                     mf = mf<10 ? "0"+mf : mf;
22                     $("#scoreFen span:eq(0)").text(mf);
23                 }else if(my==0&&com==0 || my==1&&com==1 || my==2&&com==2){
24                     $("#score").html("平局！再戰一輪吧！");
25                 }else{
26                     $("#score").html("哈哈哈哈你輸啦！！！");
27                     var cf = parseInt($("#scoreFen span:eq(1)").text())+1;
28                     cf = cf<10 ? "0"+cf : cf;
29                     $("#scoreFen span:eq(1)").text(cf);
30                 }
31             },500);
32         }
33     </script>
34

結果：佈局

3、JS&jQuery

你們從上邊的例子也發現了，功能的實現上，原生用了60多行代碼，而jQuery則用了30多行代碼。少了將近的通常，這只是一個小遊戲就有這麼大的差距。

如今，小編帶你們分析一下其中的緣由：

3.1在語法上

一、jQuery在語法上，必須使用jQuery必須先導入JQuery.x.x.x.js文件；這個是必須的，小編就很少說了；

二、JQuery中的選擇器：
$("選擇器").函數();

原生中：獲取節點要用.document.getElementById();

從這裏就發現了吧，jQuery的簡潔，這也是jQuery相對於原生最體現簡潔的地方；

你們從上慄來看個例子：實現圖片點擊事件，並在下方改變動換圖片，也就是替換圖片url地址：

JS：

1 bu.onclick = function(){
2      var imgSrc = bu.getAttribute("src");
3      myImg.setAttribute("src",imgSrc);
4      checkImg(imgSrc);
5  }

jQuery：

1 function checkImg(imgSrc){
2 $("#myImg").attr("src",imgSrc);
3 }

3.2原生JS對象與JQuery對象

①使用$("")選中的對象是jQuery對象，只能調用jQuery的函數，而不能使用元素js的事件與函數；
    $("#p").click(); √
    $("#p").onclick = function(){}； ×

    解釋：$("#p")是jQuery對象，.onclick是原生JS事件

    同理，使用document.getElement系列獲取的原生JS對象，也不能使用jQuery相關函數。

    ②原生JS對象轉爲jQuery對象
    可使用$()包裹原生JS對象便可轉爲jQuery對象。

    var p = document.getElementsByTagName("p");
    $(p).click(); √ 原生JS的對象p已轉爲jQuery對象；

    ③jQuery對象轉爲原生JS對象。使用.get(index)或[index]:
    $("#p").get(0).onclick = function(){} √
    $("#p")[0].onclick = function(){} √