分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow
也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!
<!DOCTYPE html><html lang="zh-cn"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="jquery-2.1.4.min.js"></script> <title>转盘抽奖</title> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <style type="text/css"> * { padding: 0px; margin: 0px; font-size: 16px; font-family: "Microsoft YaHei"; } .turnplate_box { width: 300px; height: 300px; margin: 100px auto; position: relative; border: 1px solid red; } .turnplate_box canvas { position: absolute; border: 1px solid yellow; } #myCanvas { background-color: white; border-radius: 100%; } #myCanvas01, #myCanvas03 { left: 50px; top: 50px; z-index: 30; } #myCanvas02 { left: 75px; top: 75px; z-index: 20; } #myCanvas { -o-transform: transform 6s; -ms-transform: transform 6s; -moz-transform: transform 6s; -webkit-transform: transform 6s; transition: transform 6s; -o-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } .turnplatw_btn { width: 60px; height: 60px; left: 120px; top: 120px; border-radius: 50%; position: absolute; cursor: pointer; border: none; background: transparent; outline: none; z-index: 40; border: 1px solid red; } </style> <script type="text/javascript"> $(document).ready(function() { //旋转角度 var angles; //可抽奖次数 var clickNum = 5; //旋转次数 var rotNum = 0; //中奖公告 var notice = null; //转盘初始化 var color = ["red", "green", "blue", "darkblue", "black", "yellow"];//转盘,转盘,内园,字颜色,开始抽奖颜色,开始抽奖背景颜色 var info = ["谢谢参与", " 1000", " 10", " 500", " 100", " 4999", " 1", " 20"]; var info1 = ['再接再厉', ' 元', ' 万元', ' 淘金币', ' 万美元', ' 淘金币', ' 日游(月球)', ' 个美女'] canvasRun(); $('#tupBtn').bind('click', function() { alert(1); if (clickNum >= 1) { //可抽奖次数减一 clickNum = clickNum - 1; //转盘旋转 runCup(); //转盘旋转过程“开始抽奖”按钮无法点击 $('#tupBtn').attr("disabled", true); //旋转次数加一 rotNum = rotNum + 1; //“开始抽奖”按钮无法点击恢复点击 setTimeout(function() { alert(notice); $('#tupBtn').removeAttr("disabled", true); }, 6000); } else { alert("亲,抽奖次数已用光!"); } }); //转盘旋转 function runCup() { probability(); var degValue = 'rotate(' + angles + 'deg' + ')'; $('#myCanvas').css('-o-transform', degValue); //Opera $('#myCanvas').css('-ms-transform', degValue); //IE浏览器 $('#myCanvas').css('-moz-transform', degValue); //Firefox $('#myCanvas').css('-webkit-transform', degValue); //Chrome和Safari $('#myCanvas').css('transform', degValue); } //各奖项对应的旋转角度及中奖公告内容 function probability() { //获取随机数 var num = parseInt(Math.random() * (7 - 0 + 0) + 0); //概率 if (num == 0) { angles = 2160 * rotNum + 1800; notice = info[0] + info1[0]; } //概率 else if (num == 1) { angles = 2160 * rotNum + 1845; notice = info[7] + info1[7]; } //概率 else if (num == 2) { angles = 2160 * rotNum + 1890; notice = info[6] + info1[6]; } //概率 else if (num == 3) { angles = 2160 * rotNum + 1935; notice = info[5] + info1[5]; } //概率 else if (num == 4) { angles = 2160 * rotNum + 1980; notice = info[4] + info1[4]; } //概率 else if (num == 5) { angles = 2160 * rotNum + 2025; notice = info[3] + info1[3]; } //概率 else if (num == 6) { angles = 2160 * rotNum + 2070; notice = info[2] + info1[2]; } //概率 else if (num == 7) { angles = 2160 * rotNum + 2115; notice = info[1] + info1[1]; } } //绘制转盘 function canvasRun() { var canvas = document.getElementById('myCanvas'); var canvas01 = document.getElementById('myCanvas01'); var canvas03 = document.getElementById('myCanvas03'); var canvas02 = document.getElementById('myCanvas02'); var ctx = canvas.getContext('2d'); var ctx1 = canvas01.getContext('2d'); var ctx3 = canvas03.getContext('2d'); var ctx2 = canvas02.getContext('2d'); createCircle(); createCirText(); initPoint(); //外圆 function createCircle() { var startAngle = 0; //扇形的开始弧度 var endAngle = 0; //扇形的终止弧度 //画一个8等份扇形组成的圆形 for (var i = 0; i < 8; i++) { startAngle = Math.PI * (i / 4 - 1 / 8); endAngle = startAngle + Math.PI * (1 / 4); ctx.save(); ctx.beginPath(); ctx.arc(150, 150, 100, startAngle, endAngle, false); ctx.lineWidth = 120; if (i % 2 == 0) { ctx.strokeStyle = color[0]; } else { ctx.strokeStyle = color[1]; } ctx.stroke(); ctx.restore(); } } //各奖项 function createCirText() { ctx.textAlign = 'start'; ctx.textBaseline = 'middle'; ctx.fillStyle = color[3]; var step = 2 * Math.PI / 8; for (var i = 0; i < 8; i++) { ctx.save(); ctx.beginPath(); ctx.translate(150, 150); ctx.rotate(i * step); ctx.font = " 20px Microsoft YaHei"; ctx.fillStyle = color[3]; ctx.fillText(info[i], -30, -115, 60); ctx.font = " 14px Microsoft YaHei"; ctx.fillText(info1[i], -30, -95, 60); ctx.closePath(); ctx.restore(); } } function initPoint() { //箭头指针 ctx1.beginPath(); ctx1.moveTo(100, 24); ctx1.lineTo(90, 62); ctx1.lineTo(110, 62); ctx1.lineTo(100, 24); ctx1.fillStyle = color[5]; ctx1.fill(); ctx1.closePath(); //中间小圆 ctx3.beginPath(); ctx3.arc(100, 100, 40, 0, Math.PI * 2, false); ctx3.fillStyle = color[5]; ctx3.fill(); ctx3.closePath(); //小圆文字 ctx3.font = "Bold 20px Microsoft YaHei"; ctx3.textAlign = 'start'; ctx3.textBaseline = 'middle'; ctx3.fillStyle = color[4]; ctx3.beginPath(); ctx3.fillText('开始', 80, 90, 40); ctx3.fillText('抽奖', 80, 110, 40); ctx3.fill(); ctx3.closePath(); //中间圆圈 ctx2.beginPath(); ctx2.arc(75, 75, 75, 0, Math.PI * 2, false); ctx2.fillStyle = color[2]; ctx2.fill(); ctx2.closePath(); } } }); </script> </head> <body> <div class="turnplate_box"> <canvas id="myCanvas" width="300px" height="300px">抱歉!浏览器不支持。</canvas> <canvas id="myCanvas01" width="200px" height="200px">抱歉!浏览器不支持。</canvas> <canvas id="myCanvas03" width="200px" height="200px">抱歉!浏览器不支持。</canvas> <canvas id="myCanvas02" width="150px" height="150px">抱歉!浏览器不支持。</canvas> <button id="tupBtn" class="turnplatw_btn"></button> </div> <!-- 更改系统默认弹窗 --> <script type="text/javascript"> window.alert = function(str) { var shield = document.createElement("DIV"); shield.id = "shield"; shield.style.position = "absolute"; shield.style.left = "50%"; shield.style.top = "50%"; shield.style.width = "280px"; shield.style.height = "150px"; shield.style.marginLeft = "-140px"; shield.style.marginTop = "-110px"; shield.style.zIndex = "25"; var alertFram = document.createElement("DIV"); alertFram.id = "alertFram"; alertFram.style.position = "absolute"; alertFram.style.width = "280px"; alertFram.style.height = "150px"; alertFram.style.left = "50%"; alertFram.style.top = "50%"; alertFram.style.marginLeft = "-140px"; alertFram.style.marginTop = "-110px"; alertFram.style.textAlign = "center"; alertFram.style.lineHeight = "150px"; alertFram.style.zIndex = "300"; strHtml = "<ul style=\"list-style:none;margin:0px;padding:0px;width:100%\">\n"; strHtml += " <li style=\"background:#626262;text-align:left;padding-left:20px;font-size:14px;font-weight:bold;height:25px;line-height:25px;border:1px solid #F9CADE;color:white\">[中奖提醒]</li>\n"; strHtml += " <li style=\"background:#787878;text-align:center;font-size:12px;height:95px;line-height:95px;border-left:1px solid #F9CADE;border-right:1px solid #F9CADE;color:#DCC722\">" + str + "</li>\n"; strHtml += " <li style=\"background:#626262;text-align:center;font-weight:bold;height:30px;line-height:25px; border:1px solid #F9CADE;\"><input type=\"button\" value=\"确 定\" onclick=\"doOk()\" style=\"width:80px;height:20px;background:#626262;color:white;border:1px solid white;font-size:14px;line-height:20px;outline:none;margin-top: 4px\"/></li>\n"; strHtml += "</ul>\n"; alertFram.innerHTML = strHtml; document.body.appendChild(alertFram); document.body.appendChild(shield); this.doOk = function() { alertFram.style.display = "none"; shield.style.display = "none"; } alertFram.focus(); document.body.onselectstart = function() { return false; }; } </script> </body></html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
- 254
- 255
- 256
- 257
- 258
- 259
- 260
- 261
- 262
- 263
- 264
- 265
- 266
- 267
- 268
- 269
- 270
- 271
- 272
- 273
- 274
- 275
- 276
- 277
- 278
- 279
- 280
- 281
- 282
- 283
- 284
- 285
- 286
- 287
- 288
- 289
- 290
- 291
- 292
- 293
- 294
- 295
- 296
- 297
- 298
- 299
- 300
- 301
- 302
- 303
- 304
- 305
- 306
- 307
- 308
- 309
- 310
- 311
- 312
- 313
- 314
- 315
- 316
- 317
给我老师的人工智能教程打call!http://blog.csdn.net/jiangjunshow
![这里写图片描述](https://i-blog.csdnimg.cn/blog_migrate/2e19ffb3303a490d20ea5d00dd397156.gif)