案例 ---- 手机号抽奖 开始抽奖 停止
*具体的备注在代码里面
*含有作弊功能 下面讲到
效果是这样的
***初始界面 *** ***抽到的第一个幸运号码***
**
**
***************************************************************************************
***号码正在滚动 但由于截图速度比不上计算机滚动速度 无法截取滚动瞬间的画面 自己运行代码去观察***
**************************
**************************
<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>