使用 JavaScript 中的 window 对象执行计时操作,完成一个抽奖程序

简介: 使用 JavaScript 中的 window 对象执行计时操作,完成一个抽奖程序

需求说明:


使用 JavaScript 中的 window 对象执行计时操作,完成一个抽奖程序


47.png

48.png


实现思路:


在 HTML 页面中放置背景图片、转盘和指针 3 张图片,并设置指针的点击事件

使用 window 对象的 setInterval() 方法反复执行间歇性旋转操作,当获取旋转的度数后,调用 window 对象的 clearInterval() 方法取消间歇性旋转操作

调用 window 对象的 setTimeout() 方法,在 4 秒后提示用户中奖结果


实现代码:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>抽奖</title>
    <style type="texts">
      #bg{
        width: 650px;
        height: 600px;
        margin: 0 auto;
        background:url(imgtable-bg.jpg.jpg)no-repeat ;
        position: relative;
      }
      #pointer{
        position: absolute;
        z-index: 10;
        top: 155px;
        left: 247px;
      }
      #turntable{
        position: absolute;
        z-index: 5;
        top: 60px;
        left: 116px;
        transition: all 4s;
      }
    </style>
  </head>
  <body>
    <div id="bg">
        <img id="pointer" src="img/pointer.png" alt="pointer" onClick="start()"/>
        <img id="turntable" src="imgtable.png" alt="turntable"/>  
    </div>
    <script type="text/javascript">
      var pointer=document.getElementById("pointer");
      var turntable=document.getElementById("turntable");
      var gameover=true;
      var cat=51.4;
      var lenCloc=0;
      function start(){
        if (gameover) {
          gameover=!gameover;
          rotate();
        }
      }
      function rotate(){
        lenCloc++;
        var timer=null;
        clearInterval(timer);
        timer=setInterval(function(){
          var soBuom=parseInt(Math.floor(Math.random()*51.4)-30.7);
          var rdm=lenCloc*3*360+soBuom;
          turntable.style.transform="rotate("+rdm+"deg)";
          clearInterval(timer);
          setTimeout(function(){
            gameover=!gameover;
            num=rdm%360;
            if (num<=cat*1) {
              alert("恭喜您获得一等奖\n4999元免单");
            }else if (num<=cat*2) {
              alert("恭喜您获得二等奖\n50元免单");
            } else if (num<=cat*3) {
              alert("恭喜您获得三等奖\n10元免单");
            }else if (num<=cat*4) {
              alert("恭喜您获得四等奖\n5元免单");
            }else if (num<=cat*5) {
              alert("恭喜您获得五等奖\n免分期服务费");
            }else if (num<=cat*6) {
              alert("恭喜您获得六等奖\n提高白条额度");
            }else if (num<=cat*7) {
              alert("未中奖");
            }
          },4000);
        },30);
      }
    </script>
  </body>
<ml>
相关文章
|
12天前
|
缓存 JavaScript 前端开发
【JavaScript 技术专栏】DOM 操作全攻略:从基础到进阶
【4月更文挑战第30天】本文深入讲解JavaScript与DOM交互,涵盖DOM基础、获取/修改元素、创建/删除元素、事件处理结合及性能优化。通过学习,开发者能掌握动态改变网页内容、结构和样式的技能,实现更丰富的交互体验。文中还讨论了DOM操作在实际案例、与其他前端技术结合的应用,助你提升前端开发能力。
|
3天前
|
JavaScript 前端开发 UED
在 JavaScript 中,异步编程和回调函数是处理非阻塞操作(如网络请求、文件读写等)的重要工具
【5月更文挑战第10天】JavaScript中的异步编程和回调函数用于处理非阻塞操作,提高应用响应性和吞吐量。异步编程通过回调函数、Promises和async/await等方式实现,避免程序因等待操作完成而阻塞。回调函数是异步操作完成后调用的函数,常用于处理网络请求等。然而,回调函数存在嵌套问题和错误处理困难,因此出现了Promises和async/await等更优解决方案。
10 3
|
6天前
|
JavaScript 前端开发
javascript操作BOM的方法
javascript操作BOM的方法
14 0
|
1天前
|
JavaScript 前端开发
在JavaScript中,函数原型(Function Prototype)是一个特殊的对象
JavaScript中的函数原型是一个特殊对象,它为所有函数实例提供共享的方法和属性。每个函数在创建时都有一个`prototype`属性,指向原型对象。利用原型,我们可以向所有实例添加方法和属性,实现继承。例如,我们定义一个`Person`函数,向其原型添加`greet`方法,然后创建实例`john`和`jane`,它们都能调用这个方法。尽管可以直接在原型上添加方法,但推荐在构造函数内部定义以封装数据和逻辑。
8 2
|
1天前
|
JavaScript 前端开发
JavaScript 提供了多种方法来操作 DOM(文档对象模型)
【5月更文挑战第11天】JavaScript 用于DOM操作的方法包括获取元素(getElementById, getElementsByClassName等)、修改内容(innerHTML, innerText, textContent)、改变属性、添加/删除元素(appendChild, removeChild)和调整样式。此外,addEventListener用于监听事件。注意要考虑兼容性和性能当使用这些技术。
6 2
|
3天前
|
Web App开发 JavaScript 前端开发
javascript操作DIV总结 转
javascript操作DIV总结 转
|
5天前
|
存储 JavaScript 前端开发
JavaScript对象方法详解
JavaScript对象方法详解
14 1
|
6天前
|
JavaScript 前端开发 安全
javascript操作DOM的方法
javascript操作DOM的方法
11 0
|
6天前
|
JavaScript 前端开发 容器
js操作dom元素
js操作dom元素
13 0
|
6天前
|
JavaScript
js多维数组去重并使具有相同属性的对象数量相加
js多维数组去重并使具有相同属性的对象数量相加
10 1