HTML代码：
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>JS</title>
6
7 <script rel="script" src="js1.js"></script>
8
9 <style>
10 #Div {
11 width: 1000px;
12 height: 700px;
13 position: relative;
14 border-style: groove;
15 border-width: 2px;
16 }
17 /*猜拳区*/
18 #area {
19 width: 300px;
20 height: 200px;
21 background-color: #011bfd;
22 position: absolute;
23 top: 20%;
24 left: 50%;
25 transform: translate(-50%, -50%);
26 }
27 /*显示区*/
28 #results {
29 width: 400px;
30 height: 50px;
31 background-color: #f7f8fd;
32 text-align:center;
33 font-size:30px;
34 position: absolute;
35 top: 50%;
36 left: 50%;
37 transform: translate(-50%, -50%);
38 }
39 /*卡牌石头*/
40 #stone {
41 width: 100px;
42 height: 150px;
43 background-color: #011bfd;
44 position: absolute;
45 top: 80%;
46 left: 30%;
47 transform: translate(-50%, -50%);
48 }
49 /*卡牌剪刀*/
50 #scissors {
51 width: 100px;
52 height: 150px;
53 background-color: #011bfd;
54 position: absolute;
55 top: 80%;
56 left: 50%;
57 transform: translate(-50%, -50%);
58 }
59 /*卡牌布*/
60 #cloth {
61 width: 100px;
62 height: 150px;
63 background-color: #011bfd;
64 position: absolute;
65 top: 80%;
66 left: 70%;
67 transform: translate(-50%, -50%);
68 }
69 </style>
70
71</head>
72<body>
73
74<div id="Div">
75 <div id="area"></div>
76
77 <div id="results"></div>
78
79 <div id="stone" draggable="true"></div>
80 <div id="scissors" draggable="true"></div>
81 <div id="cloth" draggable="true"></div>
82
83</div>
84
85<script rel="script">
86 show();
87</script>
88
89</body>
90</html>
JavaScript 代码：
16
7
811
12
13
14function Init () {
15 //获取并且绑定HTML的ID,返回HTML格式（HTMLDivElement）
16 const area = document.querySelector("#area");
17 const results = document.querySelector("#results");
18 const stone = document.querySelector("#stone");
19 const scissors = document.querySelector("#scissors");
20 const cloth = document.querySelector("#cloth");
21
22 //定义拖拽的卡牌
23 let ondragstart_ID = null
24 //猜拳类型编写成数组
25 const random_Action = ['stone', 'scissors', 'cloth'];
26 //随机获取数组中的一个数组的键
27 const random_Digital = Math.round(Math.random() * (random_Action.length - 1) + 1);
28 //获取数组中的键值，如数组random_Action中的'stone'（random_Action[0]）
29 const random_Value = random_Action[random_Digital-1];
30
31 //编写猜拳类型的方法
32 function attribute (parameter) {
33 //鼠标移入时（猜拳卡片变大）
34 parameter.onmouseover = function () {
35 this.style.height = '200px';
36 this.style.width = '150px';
37 }
38 //鼠标移出时（猜拳卡片恢复初始状态）
39 parameter.onmouseleave = function () {
40 this.style.height = '150px';
41 this.style.width = '100px';
42 }
43 //元素开始拖动时（猜拳卡片变透明）
44 parameter.ondragstart = function () {
45 this.style.opacity = '0.3';
46 ondragstart_ID = parameter.id
47 }
48 }
49 //创建猜拳类型的对象，给猜拳对象的属性赋值
50 this.show_attribute = function () {
51 attribute(stone)
52 attribute(scissors)
53 attribute(cloth)
54 }
55 //编写卡牌拖动事件
56 this.overout = function () {
57 //当卡牌拖拽到area（猜拳区域）之上
58 area.ondragenter = function () {
59 //判断随机数random_Digital，不能等于null
60 if (random_Digital !== null) {
61 //判断拖拽的卡牌
62 if (ondragstart_ID === 'stone') {
63 //判断随机数对等于哪一个
64 switch (random_Value) {
65 case stone.id:
66 results.innerHTML = 'stone = stone,平局！';
67 break;
68 case scissors.id:
69 results.innerHTML = 'stone > scissors,你赢了！';
70 break;
71 case cloth.id:
72 results.innerHTML = 'stone < cloth,你输了！';
73 break;
74 default:
75 //刷新
76 window.location.reload();
77 }
78 //元素拖动结束（猜拳卡片恢复初始状态）
79 stone.ondragend = function () {
80 this.style.opacity = '1';
81 }
82 //延迟1秒后刷新
83 setTimeout(function (){
84 window.location.reload();
85 }, 1000);
86 //判断拖拽的卡牌
87 }else if (ondragstart_ID === 'scissors') {
88 //判断随机数对等于哪一个
89 switch (random_Value) {
90 case stone.id:
91 results.innerHTML = 'scissors < stone,你输了！';
92 break;
93 case scissors.id:
94 results.innerHTML = 'scissors = scissors,平局！';
95 break;
96 case cloth.id:
97 results.innerHTML = 'scissors > cloth,你赢了！';
98 break;
99 default:
100 //刷新
101 window.location.reload();
102 }
103 //元素拖动结束（猜拳卡片恢复初始状态）
104 scissors.ondragend = function () {
105 this.style.opacity = '1';
106 }
107 //延迟1秒后刷新
108 setTimeout(function (){
109 window.location.reload();
110 }, 1000);
111 //判断拖拽的卡牌
112 }else if (ondragstart_ID === 'cloth') {
113 //判断随机数对等于哪一个
114 switch (random_Value) {
115 case stone.id:
116 results.innerHTML = 'cloth > stone,你赢了！';
117 break;
118 case scissors.id:
119 results.innerHTML = 'cloth < scissors,你输了！';
120 break;
121 case cloth.id:
122 results.innerHTML = 'cloth = cloth,平局！';
123 break;
124 default:
125 //刷新
126 window.location.reload();
127 }
128 //元素拖动结束（猜拳卡片恢复初始状态）
129 cloth.ondragend = function () {
130 this.style.opacity = '1';
131 }
132 //延迟1秒后刷新
133 setTimeout(function (){
134 window.location.reload();
135 }, 1000);
136 }
137 }
138 }
139 }
140}
141
142//调用函数
143function show() {
144 const show_html = new Init();
145 show_html.show_attribute()
146 show_html.overout()
147}
