【简易幸运抽奖】

朴灿烈づ我的快乐病毒、 2022-02-19 07:06 246阅读 0赞

这是一个【简易幸运抽奖】的代码，欢迎大家前来指导！

<style type="text/css"> //css样式
      .bigbox{
       width:480px;
       height:480px;
       margin: 0 auto;
       
      }
      .box,.box1{
       width:150px;
       height:150px;
       background: skyblue;
       float: left;
       text-align: center;
       margin-right: 10px;
       margin-bottom: 10px;
       line-height: 150px;
       color:white;
      }
      #start{
       width:60px;
       height:25px;
       background: hotpink;
       border: none;
       color: white;
       margin-right: 10px;
      }
      #stop{
       width:60px;
       height:25px;
       background: hotpink;
       border: none;
       color: white;
      }
     </style>
    
    <body>
     <div class="bigbox">
      <div class="box">0</div>
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box1">
       <button id="start">开始</button>
       <button id="stop" "stop()">停止</button>
      </div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
      <div class="box">7</div>
     </div>
    </body>
    
    <script type="text/javascript">
     var box = document.getElementsByClassName("box"); //获取所有的旋转盒子
     // console.log(box);
     var arr = [0,1,2,4,7,6,5,3];  //定义数组根据下标找旋转的位置
     var order = 0;  //从0开始旋转
     var timer = null; //处理bug
     start.onclick = function(){
      clearInterval(timer); //目的是使函数每次都从第一个开始
      timer = setInterval(function(){ //间隔时间函数，0.1秒执行一次；
       var a = arr[order]; //定义a使下标与旋转的盒子对应 
          for (var i = 0; i < box.length; i++) {
           box[i].style.background = "skyblue"; //循环使每个盒子的背景颜色变为初始颜色；
           }
          box[a].style.background = "hotpink"; //当循环到每个盒子时使它变为粉色；
          order++; //每次顺序加1
          if (order == arr.length) { //判断，当顺序循环完一次后，又让它从第一张开始。
           order = 0;
          }
         },100);
        }
       function stop(){
         clearInterval(timer); //当点击停止按钮时，清除时间函数。
         order = 0;
        }
    </script>

发表评论取消回复

表情：

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

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

相关阅读

相关简易抽奖系统（Java课程设计/大作业）

简易抽奖系统（Java课程设计/大作业） package 简易抽奖系统; import java.awt.\; import java.awt.event.Actio

ゝ一世哀愁。/ 2024年03月27日 10:31/ 0 赞/ 51 阅读

相关如何用Java编写一个简易抽奖程序

下面是一个简易的 Java 抽奖程序的示例。这个程序使用 `Random` 类来生成随机数，模拟从一组参与者中抽奖的过程。 > import java.util.ArrayL

逃离我推掉我的手/ 2024年02月05日 18:30/ 0 赞/ 41 阅读

相关幸运大转盘抽奖逻辑实现

文章目录 1. 需求 2. 实现思路 2.1 实现逻辑步骤 2.2 计算中奖概率算法 3

Bertha 。/ 2022年11月02日 15:27/ 0 赞/ 215 阅读

相关幸运大转盘-jQuery+PHP实现的抽奖程序

在线抽奖程序在很多网站上得到应用，抽奖形式多种多样，本站之前有专门介绍常见的[翻板抽奖][Link 1]和[随机抽奖][Link 2]的文章，本文将给大家介绍转盘抽奖，通过转动

╰半夏微凉°/ 2022年08月23日 12:56/ 0 赞/ 266 阅读

相关 js框架jquery实现幸运大转盘抽奖程序代码,兼容多种浏览器

看到网页上有不少大转盘抽奖的[应用][Link 1],心血来潮也想弄个.于是找了点资料自己研究了下 queryRotate 这个插件就可以实现这个功能 jqueryRo

淡淡的烟草味﹌/ 2022年08月07日 04:39/ 0 赞/ 257 阅读

相关 JAVA用户抽奖系统设计（幸运大转盘作业）

商家为了吸引用户,设100个奖品,一等奖3名,二等奖6名,三等奖10名,四等奖50名,其他为谢谢参与.编写程序产生奖项. package luckPan; p

秒速五厘米/ 2022年07月16日 02:20/ 0 赞/ 288 阅读

相关简易的抽奖

<!doctype html> <html> <head> <meta charset="utf-8">

ゞ浴缸里的玫瑰/ 2022年05月18日 02:37/ 0 赞/ 166 阅读

相关 AppInventor学习笔记：幸运抽奖

功能：点击“开始抽奖”开始抽奖，然后随机出现图片，摇晃手机后停止抽奖，显示中奖信息。 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_

分手后的思念是犯贱/ 2022年05月14日 14:04/ 0 赞/ 272 阅读

相关【简易幸运抽奖】

这是一个【简易幸运抽奖】的代码，欢迎大家前来指导！ <style type="text/css"> //css样式 .bigbox{ wid

朴灿烈づ我的快乐病毒、/ 2022年02月19日 07:06/ 0 赞/ 247 阅读

相关原生js轮盘抽奖实例分析（幸运大转盘抽奖

来自[https://www.cnblogs.com/xiongzaiqiren/p/7771561.html?tdsourcetag=s\_pcqq\_aiomsg][htt

小鱼儿/ 2021年11月04日 22:22/ 0 赞/ 357 阅读