| 前言 |
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（ 或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
今天，影子就通过一个小游戏，剪刀石头布，来给大家介绍下，两者之间的区别。
| 1、原生JS实现游戏 |
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:
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