案例 ---- 手机号抽奖 开始抽奖 停止
*具体的备注在代码里面
*含有作弊功能 下面讲到
效果是这样的
***初始界面 *** ***抽到的第一个幸运号码***
**
**
***************************************************************************************
***号码正在滚动 但由于截图速度比不上计算机滚动速度 无法截取滚动瞬间的画面 自己运行代码去观察***
****************************************************
<title>无标题文档</title>
<style type="text/css">
/*<!--号码滚动的DIV的样式-->*/
#show{
text-align:center;
font-size:48px;
font-weight:blod;
}
div
{
text-align:center;/*居中*/
}
div span
{
display:inline-block;/* 看效果变化吧*/
padding:10px; /*字体与边框之间距离*/
background-color:rgb(255,0,102); /*背景颜色*/
color:white; /*字体颜色*/
font-weight:bold; /*字体加粗*/
cursor:default;/*鼠标移动到DIV里面会变成箭头不是光变标了-不信看效果吧*/
margin-top:10px;/*本DIV顶部拥有10个PX（像素）*/
/* display:inline 的作用是设置对象做为行内元素显示，inline是内联对象的默认值（ps:内联对象就是不自动产生换行的元素，比如span） 而我们一般用的div是块级元素，默认display属性是block, 但将div的display设置为inline的话，则多个div可以象span一样显示在一行了。*/ } </style>
</head> <body> <div id="show">1516930589</div><!--号码滚动的DIV-->
<div><span id="btn" onclick="dobegin()">开始抽奖</span></div><!--开始按钮的div-->
</body>
</html>
<script language="javascript">
var a = new Array()
a[0]="15069301897";
a[1]="13913254568";
a[2]="13856556565";
a[3]="13756665656";
a[4]="15269123456";
a[5]="15145647232";
a[6]="15366552323";
a[7]="15422665629";
a[8]="15569305454";
a[9]="15669354547";
var timeoutID;
function cellShow()
{
var n=Math.round(Math.random()*1000000)%10;/*取出a[]随这个数组里的机数*/
var s=a[n];/*取出a几里代表的手机号 也就是随机出的上一步的数组的值*/
var dd=document.getElementById("show");/*找出id为show的DIV的元素*/
dd.innerHTML=s; <!--让手机号滚动-->
timeoutID=window.setTimeout("cellShow()",50)<!--让手机号滚动 延迟50毫秒-->
}
function dobegin()
{
var dd=document.getElementById("btn"); /* {cellShow();} */
/*{document.getElementById("btn").innerHTML="停止"}*/
<!--对上面括号里进行解释 当执行cellShow函数的同时 计算机执行速度快 相当于同时执行 这步 找到btn标签 并让btn里的值等于“停止”-->
if(dd.innerHTML=="开始抽奖")
{
cellShow(); /*开始按钮那里SPAN标签要加上一个dobegin函数*/ dd.innerHTML="停止";
} else
{
window.clearTimeout(timeoutID);
dd.innerHTML="开始抽奖";
document.getElementById("show").innerHTML="15069301897"/*作弊 专门选到固定号码*/
}
}
</script>