数字滚动效果实现-优快云博客

本文链接：https://blog.youkuaiyun.com/molu_chase/article/details/52502231

主要实现的是数字滚动，点击开始，再次点击结束

jsp代码，（本身就是html改过来的）

<%@ page language="java" contentType="text/html; charset=utf-8"
      pageEncoding="utf-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>未命名</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<style type="text/css">
body {
	background-color: #fff;
	text-align: center;
	padding-top: 50px;
}

#Result {
	border: 3px solid #40AA53;
	margin: 0 auto;
	text-align: center;
	width: 600px;
	padding: 50px 0;
	background: #efe;
}

#ResultNum {
	font-size: 50pt;
	font-family: Verdana
}

#Button {
	margin: 50px 0 0 0;
}

#Button input {
	font-size: 40px;
	padding: 0 50px;
}

#btn {
	background-color: #40AA53;
	border: 1px solid #40AA53;
	width: 20%;
	height: 45px;
	margin: 0em auto;
	font-size: 1em;
	border-radius: 2.5px;
	-moz-border-radius: 2.5px;
	-webkit-border-radius: 2.5px;
	color: #FFF;
}

#h1c{
color:#40AA53;
font-size:2em;

}
</style>

</head>
<body>
	
<h1 ><center><marquee scrollAmount=5 width=500  >未命名</marquee> </center></h1>
	<br/>
	<h1 id="h1c">小心~~~~~~</h1>

	<div id="Result" style="color: #40AA53">
		<span id="ResultNum">0</span>
	</div>

	<div id="Button">
		<input type='button' id="btn" value='开始' οnclick='beginRndNum(this)' />
	</div>

</body>
</html>

然后是script.js（其中获取HTML字段都有详细的说明）

var g_Interval = 1;
var g_PersonCount = 94;//人数
var g_Timer;
var running = false;
var infos=new Array();

/*
 * 传入的trigger是input标签
 * $是jQuery的用法
 */
function beginRndNum(trigger){
	/*
	 * 如果running为true，表示用户点击了停止，此时将input标签的停止改为开始，将span中的数字的颜色改为红色。
	 * 如果running为false，表示用户点击了开始，正在计数，则将input标签的开始改为停止，span中的数字的颜色改为黑色。
	 */
	if(running){
		running = false;
		clearTimeout(g_Timer);		
		$(trigger).val("开始");//将input标签的value设置为开始
		$('#ResultNum').css('color','red');//将ID为#ResultNum的样式中为color的值改为red
		$('#h1c').html("恭喜^_^");
		$('#h1c').css('color','red');//同上
	}
	else{
		running = true;
		$('#ResultNum').css('color','black');
		$('#h1c').css('color','#40AA53');
		$(trigger).val("停止");
		$('#h1c').html("小心~~~~~~");
		beginTimer();
	}
}


function updateRndNum(){
	var num = Math.floor(Math.random()*g_PersonCount+1);
	num+=2016140283;
	$('#ResultNum').html(num);//将id为#ResultNum的标签的内容改为num。
}

function beginTimer(){
	g_Timer = setTimeout(beat, g_Interval);
}

function beat() {
	g_Timer = setTimeout(beat, g_Interval);
	updateRndNum();
}

运行的时候只要js文件夹和jsp文件在一个目录下就可以了

后面一直想使用js获取excel的表格数据，但是一直抛异常，即使改了浏览器中ActiveX的启动，也没有效果，网上查说是不安全，但是我只是访问项目中的xls文件，不知道有没有其他的什么方法，先留在这