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

Posted 2020-10-17 johnny-cli

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了常见的跑马灯动图抽奖的案例相关的知识，希望对你有一定的参考价值。

//抽奖的案例

<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>

以上是关于常见的跑马灯动图抽奖的案例的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript “跑马灯”抽奖活动代码解析与优化

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

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