JS实现抽奖效果

水深无声 2022-05-17 01:15 349阅读 0赞

这种效果很常见，所以对我们前段开发者来说是基本功，必须掌握．

页面布局：

![70][]

实现思路如图：(一条流水线的思路)

![70 1][]

代码也很简单啦

ＨＴＭＬ部分：

<body>
    <div id="box">
    <input type="button" value="开始抽奖" id="start">
    <input type="button" value="停止抽奖" id="end">
    </div>
    <img src="01.jpg" alt="" id="picture">
    </body>

ＣＳＳ部分：

<style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #picture{
                margin: 25px auto;
                width: 400px;
                height:200px;
                display: block;
            }
            #box{
                width: 300px;
                height: 70px;
                margin: 30px auto;
    
                /*background-color: yellow;*/
    
            }
            #box input{
                width: 100px;
                height: 30px;
                /*margin: 10px;*/
                margin-top:20px;
                margin-right: 20px;
    
            }
        </style>

ＪＳ部分：

<script>
            var timer;
            window.onload = function () {
                var start = document.getElementById('start');
                var end = document.getElementById('end');
                var picture = document.getElementById('picture');
                //用来存储图片路径的数组
                var picarr = ['01.jpg', '02.jpg', '03.jpg',
                    '04.jpg', '05.jpg', '06.jpg', '07.jpg',
                    '08.jpg'];
                //给按钮加单击事件
                clearInterval(timer);
                start.onclick = function () {
                    //设置定时器,每隔一秒换一张图片
                    timer = setInterval(function () {
                        //抽取数组随机下标
                        var num = Math.floor(Math.random() * (picarr.length - 1 + 1 - 0) + 0);
                        //将抽到的图片路径给图片元素
                        picture.setAttribute('src', picarr[num]);
                    }, 1000)
                }
                //给停止按钮加单击事件
                end.onclick = function () {
                    clearInterval(timer);
                }
            }
    </script>

ps:图片读者自己加呀，并且将图片与html文件放到同一个文件夹下就好了，如果没有放在同一个文件夹下，需要在存放图片的数组里面修改路径。

[70]: /images/20220517/b470044b00c3447e984df454237685fa.png
[70 1]: /images/20220517/cdb2367d1ea34a5da603eec0ebe46ac0.png

发表评论取消回复

表情：

评论列表（有 0 条评论，349人围观）

还没有评论，来说两句吧...

相关阅读

相关 css实现简单的抽奖动画效果和旋转效果，还有春联效果

使用css的animation和transform和transition可以实现简单的图片放大缩小，旋转，位移的效果，由此可以延伸的动画效果还是挺多的，比如图片慢慢放大，图片慢

傷城~/ 2024年02月17日 13:26/ 0 赞/ 39 阅读

相关【JavaWeb】JQuery实现抽奖的动画效果功能

这篇博客，教你怎么用JQuery框架实现抽奖送老婆功能哈哈哈！开个玩笑，就是简单的抽奖功能代码如下： <!DOCTYPE html>

╰+攻爆jí腚メ/ 2023年03月02日 05:25/ 0 赞/ 34 阅读

相关 JS转盘抽奖

前几年在公司因业务需要疯狂的写了一堆小游戏，刚抽空写了一个最简单的转盘抽奖游戏demo，用的JS和CSS3，几句话就搞定。注意这只是一个简单的demo，转盘游戏在生产坏境中

深碍√TFBOYSˉ_/ 2022年12月22日 08:42/ 0 赞/ 203 阅读

相关 JS 转盘抽奖效果

阅读原文,微信扫描二维码，手机关注公共号酒酒酒酒，搜索 JS 转盘抽奖效果 ![微信扫描二维码，阅读原文][96bb8c4efd754d40a80f14c6a5b7c058

曾经终败给现在/ 2022年08月29日 05:47/ 0 赞/ 269 阅读

相关 html+css+js实现抽奖功能

html+css+js实现抽奖功能一、代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-

「爱情、让人受尽委屈。」/ 2022年06月06日 08:15/ 0 赞/ 296 阅读

相关 JS实现抽奖效果

这种效果很常见，所以对我们前段开发者来说是基本功，必须掌握．页面布局： ![70][] 实现思路如图：(一条流水线的思路) ![70 1][] 代码也很简单啦Ｈ

水深无声/ 2022年05月17日 01:15/ 0 赞/ 350 阅读

相关 js随机抽奖

随机抽奖 <p>张三</p> <button>点击停止</button> var arr = ['张三','李四','老王','王五','周

今天药忘吃喽~/ 2022年01月28日 00:29/ 0 赞/ 279 阅读

相关抽奖的demo(跑马灯效果)

效果：代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

Dear 丶/ 2022年01月19日 05:43/ 0 赞/ 348 阅读

相关 js实现走马灯效果-----大屏幕滚动抽奖

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></tit

一时失言乱红尘/ 2022年01月16日 15:17/ 0 赞/ 399 阅读

相关实现一个js抽奖玩玩？

简易版： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

Myth丶恋晨/ 2021年09月17日 23:48/ 0 赞/ 346 阅读