yuanchuan · May 17, 2017 05:11
diff --git a/index.html b/index.html
 <!doctype html>
 <html>
 <head>
  <meta charset="utf-8"/>
  <style>
    body {
      background: #333;
      text-align: center;
    }
    #num {
      font-size: 500px;
      color: orange;
      height: 500px;
      display: block;
      width: 100%;
    }
    #button {
      cursor: pointer;
      font-size: 100px;
      padding: 20px 100px;
      color: white;
      background: green;
      display: inline-block;
      text-decoration:none;
      -webkit-transition: all .1s linear;
         -moz-transition: all .1s linear;
          -ms-transition: all .1s linear;
              transition: all .1s linear;
    }
    #button:hover, #button:active {
      -webkit-box-shadow: inset 5px 5px 5px rgba(0,0,0,.5),inset -5px -5px 5px rgba(0,0,0,.5);
         -moz-box-shadow: inset 5px 5px 5px rgba(0,0,0,.5),inset -5px -5px 5px rgba(0,0,0,.5);
              box-shadow: inset 5px 5px 5px rgba(0,0,0,.5),inset -5px -5px 5px rgba(0,0,0,.5);
    }
  </style>
 </head>
 <body>
  
  <span id="num" range="1,100">0</span>
  <a id="button" status="ready" href="#">开始</a>
    
  <script>
    window.onload = function() {
      
      var num = document.getElementById('num')
        , button = document.getElementById('button');
        
      var range = (function(){
        var range = num.getAttribute('range').split(',');
        return {
          x: Math.min(range[0], range[1]), 
          y: Math.max(range[0], range[1])
        };
      }());
          
      var rand = function(a,b) {
        return Math.floor( Math.random() * (b-a+1))+(~~a);
      };

      var roll = {
        timer: null,
        start: function() {
          this.timer = setInterval(function() {
            num.innerHTML = rand(range.x, range.y)
          }, 10);
          button.innerHTML = "停止";
          button.style.background = "purple";
          button.setAttribute('status','stop');
        },
        stop: function() {
          this.timer && clearInterval(this.timer);
          button.innerHTML = "开始"
          button.style.background = "green";
          button.setAttribute('status','ready')
        },
        toggle: function() {
          var status = button.getAttribute('status');
          this[(status==='ready')?'start':'stop'].call();
          return false;
        }
      };        

      button && (button.onclick = function(){
        return roll.toggle();
      });
    };
  </script>
 </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<style>
	body {
	background: #333;
	text-align: center;
	}
	#num {
	font-size: 500px;
	color: orange;
	height: 500px;
	display: block;
	width: 100%;
	}
	#button {
	cursor: pointer;
	font-size: 100px;
	padding: 20px 100px;
	color: white;
	background: green;
	display: inline-block;
	text-decoration:none;
	-webkit-transition: all .1s linear;
	-moz-transition: all .1s linear;
	-ms-transition: all .1s linear;
	transition: all .1s linear;
	}
	#button:hover, #button:active {
	-webkit-box-shadow: inset 5px 5px 5px rgba(0,0,0,.5),inset -5px -5px 5px rgba(0,0,0,.5);
	-moz-box-shadow: inset 5px 5px 5px rgba(0,0,0,.5),inset -5px -5px 5px rgba(0,0,0,.5);
	box-shadow: inset 5px 5px 5px rgba(0,0,0,.5),inset -5px -5px 5px rgba(0,0,0,.5);
	}
	</style>
	</head>
	<body>

	<span id="num" range="1,100">0</span>
	<a id="button" status="ready" href="#">开始</a>

	<script>
	window.onload = function() {

	var num = document.getElementById('num')
	, button = document.getElementById('button');

	var range = (function(){
	var range = num.getAttribute('range').split(',');
	return {
	x: Math.min(range[0], range[1]),
	y: Math.max(range[0], range[1])
	};
	}());

	var rand = function(a,b) {
	return Math.floor( Math.random() * (b-a+1))+(~~a);
	};

	var roll = {
	timer: null,
	start: function() {
	this.timer = setInterval(function() {
	num.innerHTML = rand(range.x, range.y)
	}, 10);
	button.innerHTML = "停止";
	button.style.background = "purple";
	button.setAttribute('status','stop');
	},
	stop: function() {
	this.timer && clearInterval(this.timer);
	button.innerHTML = "开始"
	button.style.background = "green";
	button.setAttribute('status','ready')
	},
	toggle: function() {
	var status = button.getAttribute('status');
	this[(status==='ready')?'start':'stop'].call();
	return false;
	}
	};

	button && (button.onclick = function(){
	return roll.toggle();
	});
	};
	</script>
	</body>
	</html>