hmtl5实现数字上升效果-网页编程网

阅读：5446 输入：2017-06-14

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style>
		body{
			margin: 0;
			padding: 0;
		}
		.box{
			width: 200px; 
			height: 200px;
			overflow:hidden;
		}
		.box .wrap{
			position: relative;
			top: 0;
		}
		.box .top-move{
			transition: top 0.6s ease;
			top: -200px;
		}
		.box span{
			display:block;
			width:200px;
			height:200px;
			line-height:200px;
			text-align:center;
			color:#fff;
			font-family:"Microsoft YaHei";
			font-size: 2.6em;
		}
		.box span:nth-of-type(1){
			background: #999;
		}
		.box span:nth-of-type(2){
			background: #666;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="wrap" id="wrap">
			<span class="list">2</span>
			<span class="list">1</span>
		</div>
	</div>
	<script>
		function move(obj) {
			this.el = document.getElementById(obj.el) || obj.el;
			this.list = this.el.getElementsByClassName(obj.list);
			var This = this;

// 随机数据
			// len：随机数的长度
			// return array
			this.radom = function (len) {
				var random = [];
				for (var i=0; i<len; i++) {
					random.push(Math.floor(Math.random()*10));
				}
				return random;
			}

// 定时器
			this.timer = function (time,func,bool) {
				clearInterval(timer);
				var timer = setInterval(function () {
					func();
				},time);

if (bool == false)  clearInterval(timer);
			}

this.timeout = function (time,func) {
				clearTimeout(timer);
				var timer = setTimeout(function () {
					func();
				},time);
			}
			// 将值写入dom
			this.setVal = function () {
				var arrNum = This.radom(2);
				if (arrNum.length === 0) return;
				for(var i=This.list.length-1; i>=0; i--) {
					This.list[i].innerHTML = arrNum[i];
				}
				This.move();
				This.timeout(600,function () {
					This.list[0].innerHTML = arrNum[1];
					This.list[1].innerHTML = arrNum[0];
					This.remove();
				});
				This.timeout(1600,This.setVal);
			}

this.move = function () {
				This.el.className = "wrap top-move";
			}

this.remove = function () {
				This.el.className = "wrap";
			}

this.init = function () {
				This.setVal();
			}
		}
		new move({el:"wrap",list:"list"}).init();
	</script>
</body>
</html>

hmtl5实现数字上升效果

阅读：5446 输入：2017-06-14

电脑版