//抽奖的案例
<script type="text/javascript">
var alldata = "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z";
var alldataarr = alldata.split(",");
var num = alldataarr.length - 1;
var timer;
function start() {
clearInterval(timer);
timer = setInterval('change()', 10);
}
function change() {
document.getElementById("oknum").innerHTML = alldataarr[GetRnd(0, num)];
}
function GetRnd(min, max) {
return parseInt(Math.random() * (max - min + 1));
}
function ok() {
clearInterval(timer);
document.getElementById("showresult").value = document.getElementById("oknum").innerText;
}
</script>
<div id="oknum" name="oknum">请单击开始</div>
<button onclick="start()" accesskey="s">开始</button> <!--//accesskey 属性规定激活（使元素获得焦点）元素的快捷键。-->
<button onclick="ok()" accesskey="o">停止</button>
您的选择是：
<input type="text" id="showresult" value=""/>
//动图的案例
<div>
<img src="./a1.jpg" alt="boom" id="img" width="500" height="500">
</div>
<script>
window.onload= function () {
setInterval(step,1000);
}
var num=1;
function step(){
if(num<5){
num++;
}else {
num=1;
}
// console.log(num);
var dom = document.getElementById("img");
dom.src='./a'+num+'.jpg';
}
</script>
//跑马灯的案例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-3.2.1.min.js"></script>
<script>
( function ($) {
$.fn.extend({
RollTitle: function (opt, callback) {
if (!opt) var opt = {};
var _this = this;
_this.timer = null;
_this.lineH = _this.find("li:first").height();
_this.line = opt.line ? parseInt(opt.line, 15) : parseInt(_this.height() / _this.lineH, 10);
_this.speed = opt.speed ? parseInt(opt.speed, 10) : 3000;
_this.timespan = opt.timespan ? parseInt(opt.timespan, 13) : 5000;
if (_this.line == 0) this.line = 1;
_this.upHeight = 0 - _this.line * _this.lineH;
_this.scrollUp = function () {
_this.animate({
marginTop: _this.upHeight
}, _this.speed, function () {
for (i = 1; i <= _this.line; i++) {
_this.find("li:first").appendTo(_this);
}
_this.css({ marginTop: 0 });
});
};
_this.hover(function () {
clearInterval(_this.timer);
}, function () {
_this.timer = setInterval(function () { _this.scrollUp(); }, _this.timespan);
}).mouseout();
}
})})(jQuery);
</script>
</head>
<body>
<ul id="RunTopic" style="list-style:none ;background:#0ff ;border:2px dashed blue;100px;" >
<li style="color:red">i love you</li>
<li style="color:pink">I LOVE YOU</li>
<li style="color:blue">I LOVE you</li>
<li style="color:green">i LOVE YOU</li>
<li style="color:yellowgreen">I love YOU</li>
</ul>
<br/>
<input type="button" onclick="test();" value="启动" >
<input type="button" onclick="stop();" value="停止" >
<script>
var timer;
function test()
{
clearInterval(timer);
timer = setInterval(test,1000);
$("#RunTopic").find("li:first").appendTo($("#RunTopic"));
}
function stop(){
clearInterval(timer);
}
</script>
</body>
</html>