首页 > 其他 > 详细

常见的跑马灯 动图 抽奖的案例

时间:2017-12-15 14:30:29      阅读:252      评论:0      收藏:0      [点我收藏+]

//抽奖的案例

<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;width: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>

常见的跑马灯 动图 抽奖的案例

原文:http://www.cnblogs.com/johnny-cli/p/8042793.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!