Jiyin Yiyong avatar Jiyin Yiyong committed 25daef1

add buttom

Comments (0)

Files changed (6)

 log = function(){
   return console.log.apply(console, arguments);
 };
-run = true;
+run = false;
 window.onload = function(){
-  var canvas, lottery, cx, cy, r, point, p, choice, cal, x$, setFont, draw, theta;
+  var canvas, lottery, go, cx, cy, r, point, p, choice, cal, x$, setFont, draw, theta, toggle;
   canvas = query('canvas');
   lottery = query('#lottery');
+  go = query('#go');
   window.ctx = canvas.getContext('2d');
   cx = 400;
   cy = 200;
   })();
   query('body').onkeydown = function(it){
     if (it.keyCode === 32) {
-      return run = !run;
+      return toggle();
+    }
+  };
+  window.style = document.body.style;
+  go.onclick = function(){
+    log("click");
+    return toggle();
+  };
+  return toggle = function(){
+    if (go.innerText === "Start") {
+      go.innerText = "Go";
+      return run = true;
+    } else {
+      go.innerText = "Start";
+      return run = false;
     }
   };
-  return window.style = document.body.style;
 };
 window.onfocus = function(){
   style.webkitFilter = "";
       <p>如果你想多玩几次,你可以试试。</p>
       <p>领奖时间和地点:立刻+现场!</p>
       <h2>开始抽奖</h2>
-      <p><span>说明:按下一次</span><b>空格</b><span>,盘子开始转了;再按一下,它就停了;你也就知道自己会获得什么了!</span></p>
+      <p><span>按下一次</span><b>空格</b><span>,</span><b>或者点击下面的按钮, </b><span>盘子开始转了;再按一下,它就停了;</span></p>
+      <p>你也就知道自己会获得什么了!</p>
+      <div id="go">Start</div>
     </div>
   </body>
 </html>
 }
 * {
   box-sizing: border-box;
+  font-family: "Clicker";
 }
 canvas {
   position: absolute;
-  top: 160px;
+  top: 100px;
   left: 460px;
 }
 @font-face {
 }
 #lottery {
   position: absolute;
-  top: 330px;
+  top: 270px;
   left: 550px;
-  font-family: "Clicker";
   font-size: 20px;
   color: #4747eb;
 }
 }
 #intro {
   position: absolute;
-  top: 220px;
+  top: 200px;
   left: 140px;
   color: #262673;
 }
+#go {
+  background: #d04343;
+  width: 90px;
+  height: 90px;
+  font-size: 60px;
+  color: #fff;
+  padding: 6px 14px;
+  border-radius: 40px;
+  -webkit-transform: rotate(-20deg);
+  box-shadow: 0px 0px 10px #8c7373;
+  cursor: pointer;
+  text-shadow: 0px 0px 6px #666;
+  position: relative;
+  left: 200px;
+  top: 40px;
+}
+#go:hover {
+  background: #d86464;
+}
 query = -> document.querySelector it
 log = -> console.log.apply console, arguments
 
-run = yes
+run = no
 
 window.onload = ->
   canvas = query \canvas
   lottery = query \#lottery
+  go = query \#go
   # log lottery
 
   window.ctx = canvas.get-context \2d
 
   query \body .onkeydown = ->
     if it.key-code is 32
-      run := not run
+      toggle!
 
   window.style = document.body.style
 
+  go.onclick = ->
+    log "click"
+    toggle!
+
+  toggle = ->
+    if go.inner-text is "Start"
+      go.inner-text = "Go"
+      run := yes
+    else
+      go.inner-text = "Start"
+      run := no
+
 window.onfocus = ->
   style.webkit-filter = ""
   style.background = "hsl(0,80%,96%)"
       p 领奖时间和地点:立刻+现场!
       h2 开始抽奖
       p
-        span 说明:按下一次
+        span 按下一次
         b 空格
-        span ,盘子开始转了;再按一下,它就停了;你也就知道自己会获得什么了!
+        span ,
+        b 或者点击下面的按钮, 
+        span 盘子开始转了;再按一下,它就停了;
+      p 你也就知道自己会获得什么了!
+
+      #go Start
 *
   box-sizing border-box
   // box-shadow 0px 0px 5px hsl(0,40,70)
+  font-family "Clicker"
 
 canvas
   position absolute
-  top 160px
+  top 100px
   left 460px
 
 @font-face
 
 #lottery
   position absolute
-  top 330px
+  top 270px
   left 550px
-  font-family "Clicker"
   font-size 20px
   color hsl(240,80,60)
 
 
 #intro
   position absolute
-  top 220px
+  top 200px
   left 140px
-  color hsl(240,50,30)
+  color hsl(240,50,30)
+
+#go
+  background hsl(0,60,54)
+  width 90px
+  height 90px
+  font-size 60px
+  color white
+  padding 6px 14px
+  border-radius 40px
+  -webkit-transform rotate(-20deg)
+  box-shadow 0px 0px 10px hsl(0,10,50)
+  cursor pointer
+  text-shadow 0px 0px 6px hsl(0,0,40)
+  position relative
+  left 200px
+  top 40px
+
+  &:hover
+    background hsl(0,60,62)
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.