<body>
<script>
var number
function showImg(url){
var img = document.getElementById("img1")
img.src = url
}
function hideImg(){
document.getElementById("img1").src = ""
}
function clicke(){
number = 1+ Math.floor(Math.random()*6)
hideImg()
if(number==1)
showImg("C:\\Users\\lalala\\Desktop\\1.jpg")
if(number==2)
alert("等于2")
if(number==3)
alert("等于3")
if(number==4)
alert("等于4")
if(number==5)
alert("等于5")
if(number==6)
alert("等于6")
}
</script>
<div><img id="img1" /></div>
<div><input type="button" onClick="clicke()" value="Click"/></div>
</body>
</HTML>
html5模拟3d掷骰子代码如下：1 <!DOCTYPE>
2 <html>
3 <title>柯乐义</title>
4 <head>
5 <script>
6 var leftX = 150
7 var topY = 100
8 var diceX = 80
9 var diceY = 80
10 var dotR = 4
11 var count = 0
12 var lastNum = 0
13 var flag = false
14
15 function clickMe() {
16 count = 0
17 if(flag) {
18 return false
19 }
20 flag = true
21 var ctx = document.getElementById("canvas").getContext('2d')
22 ctx.beginPath()
23 //ctx.arc(100,100,50,0,Math.PI,false)
24 ctx.strokeRect(leftX,topY,diceX,diceY)
25
26setTimeout(function(){
27 random(ctx)
28},200)
29
30 }
31
32 function drawDice(ctx,randomNum) {
33 ctx.clearRect(leftX,topY,diceX,diceY)
34 switch(randomNum) {
35 case 1:
36 draw1()
37 break
38 case 2:
39 draw2()
40 break
41 case 3:
42 draw3()
43 break
44 case 4:
45 draw4()
46 break
47 case 5:
48 draw5()
49 break
50 case 6:
51 draw6()
52 break
53 }
54 count++
55 if(count>=20) {
56 if(randomNum==6) {
57 alert("哇！你走狗屎运啦，今天可以去买彩票啦")
58 } else if(randomNum <=3) {
59 alert("今天运气不太好哦！再试一把")
60 } else {
61 alert("请再接再厉，在来一把")
62 }
63 flag = false
64 return false
65 } else {
66 setTimeout(function(){
67 random(ctx)
68},200-count)
69 }
70 }
71
72 function random(ctx) {
73 var randomNum = Math.floor(Math.random()*6)+1
74 if(randomNum == lastNum) {
75 random(ctx)
76 } else {
77 lastNum = randomNum
78 drawDice(ctx,randomNum)
79 }
80
81 }
82
83 function commonDraw(ctx,dotX,dotY) {
84 ctx.beginPath()
85 ctx.arc(dotX,dotY,dotR,0,2*Math.PI,false)
86 ctx.stroke()
87 ctx.fill()
88 }
89
90 function draw1() {
91 var ctx = document.getElementById("canvas").getContext('2d')
92 ctx.fillStyle="#0000ff"
93 var dotX = leftX+diceX/2
94 var dotY = topY+diceY/2
95 commonDraw(ctx,dotX,dotY)
96 }
97
98 function draw2() {
99 var ctx = document.getElementById("canvas").getContext('2d')
100 ctx.fillStyle="#99FF66"
101 var dotX = leftX+4*dotR
102 var dotY = topY+4*dotR
103 commonDraw(ctx,dotX,dotY)
104 var dotX = leftX+diceX-4*dotR
105 var dotY = topY+diceY-4*dotR
106 commonDraw(ctx,dotX,dotY)
107 }
108
109 function draw3() {
110 draw1()
111 draw2()
112 }
113
114 function draw4() {
115 draw2()
116 var ctx = document.getElementById("canvas").getContext('2d')
117 ctx.fillStyle="#99CC00"
118 var dotX = leftX+diceX-4*dotR
119 var dotY = topY+4*dotR
120 commonDraw(ctx,dotX,dotY)
121 var dotX = leftX+4*dotR
122 var dotY = topY+diceY-4*dotR
123 commonDraw(ctx,dotX,dotY)
124 }
125
126 function draw5(){
127 draw1()
128 draw4()
129 }
130 //http://www.cnblogs.com/sosoft/
131 function draw6(){
132 var ctx = document.getElementById("canvas").getContext('2d')
133 ctx.fillStyle="#996633"
134 var dotX = leftX+4*dotR
135 var dotY = topY+diceY/2
136 commonDraw(ctx,dotX,dotY)
137 var dotX = leftX+diceY-4*dotR
138 commonDraw(ctx,dotX,dotY)
139 draw4()
140 }
141
142 function init() {
143 var ctx = document.getElementById("canvas").getContext('2d')
144 ctx.beginPath()
145 ctx.strokeRect(leftX,topY,diceX,diceY)
146 ctx.stroke()
147 draw6()
148
149 }
150 </script>
151 </head>
152
153 <body onload="init()">
154 <canvas id="canvas" width="400" height="300" style="background-color:#CCFFCC">
155 your brower is not support html5
156 </canvas>
157
158 <input type="button" value="掷骰子" onclick="clickMe()"/>
159 </body>
160 </html>
