首页 > 其他分享 >JS实现点击抽奖效果

JS实现点击抽奖效果

时间:2024-10-25 18:20:38浏览次数:3  
标签:arr 抽奖 random JS 点击 let index2 index3 Math

代码:

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .fu{

            width: 600px;

            height: 300px;

            margin: 0 auto;

            position: relative;

        }

        .zi{

            width: 200px;

            height: 200px;

            position: absolute;

            top: 0;

            left: 0;

            right: 0;

            bottom: 0;

            margin: auto;

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="fu">

            <img src="https://20hpa4-1321289440.cos.ap-nanjing.myqcloud.com/teng/applet/static/3c5f630400804b2eadb0d61e69aef4cb.jpg" alt="">

            <div class="zi">

                <h4>年会抽奖</h4>

                <h2></h2>

                <h3></h3>

                <h5></h5>

            </div>

        <button>点击抽奖</button>

        </div>

   

    </div>

    <script>

        let btn = document.querySelector('button')

        btn.οnclick=function cj(){

            // 随机点名

            let arr = ['杨胜',

            '陈亚茹',

            '孙忆桐',

            '李星辉',

            '颜浩然',

            '孔杰',

            '孟玥瑶',

            '李超',

            ]

            let h2 = document.getElementsByTagName('h2')[0]

            let h3 = document.getElementsByTagName('h3')[0]

            let h5 = document.getElementsByTagName('h5')[0]

            let index =Math.floor(Math.random()*arr.length)

            h2.innerHTML=`一等奖:${arr[index]}`

            let index2 =Math.floor(Math.random()*arr.length)

            for(let i=0;i<arr.length;i++){

                if(index!==index2){

                    h3.innerHTML=`二等奖:${arr[index2]}`

                    break;

                }else{

                    index2 =Math.floor(Math.random()*arr.length)

                }

            }

            let index3 =Math.floor(Math.random()*arr.length)

            for(let i=0;i<arr.length;i++){

                if(index!==index3&&index2!==index3){

                    h5.innerHTML=`三等奖:${arr[index3]}`

                    break;

                }else{

                    index3 =Math.floor(Math.random()*arr.length)

                }

            }

        }

       

       

       

       

    </script>

</body>

</html>

效果图:

标签:arr,抽奖,random,JS,点击,let,index2,index3,Math
From: https://blog.csdn.net/yyyyyyysc/article/details/143116853

相关文章

  • JS高级-手写Promise详解
    Promise的标准化之路并非一帆风顺。在Promise被正式纳入ECMAScript规范之前,有很多不同的实现和行为模式。这些差异导致了兼容性问题和在不同环境下的不可预测行为,因此产生了对统一标准的需求,最终促成了PromiseA+规范的诞生在上一章节开头中,我们简单实现Promise之前的异步......
  • ECharts 饼状图,圆心文字提示,默认显示第一个;点击外部数据高亮放大echarts饼图,点击饼状
    描述得乱七八糟的,其实就是外面有个列表,类似于图列,但是他特别复杂我就把图里给写在外面了差不多长这样需求是这样的,点击饼状图,外面的列表高亮;点击外面的列表,饼状图高亮 来吧,上代码 eChart是图标,ul是列表<divref="chart"></div><ulclass="List"><liv-for="(item,i......
  • mac nwjs程序签名公证
    为什么需要公证macos14.5之后的系统,如果不对应用进行公证,安装,打开,权限使用上都会存在问题,而且有些问题你强制开启(sudospctl--master-disable)使用后可能会有另外的问题,例如在安全和隐私里面想开启麦克风和视像头的时候找不到自己的应用;或是无法收到桌面通知(这些问题也是有......
  • 【C#】 .NET Framework 中使用JSON
    因为System.Text.Json是.NETCore和.NET5+中引入的命名空间。如果你使用的是.NETFramework,你需要使用Newtonsoft.Json库来处理JSON。 usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.Text;usingSystem.Threading.Tasks;u......
  • 如何在 Vue.js 中处理图片的上传和下载?
    在Vue.js中处理图片的上传和下载是一个常见的需求,可以通过多种方式实现。下面分别介绍图片上传和下载的基本方法。图片上传1.使用HTML <inputtype="file"> 元素这是最基础的方法,通过文件输入框让用户选择要上传的图片文件。<template><div><inputtype="file......
  • 【前端】Next.js的安装及配置
    Next.js介绍Next.js是一个流行的React框架,它具有以下优点:服务器端渲染(SSR):Next.js支持服务器端渲染,这意味着页面可以在服务器上预渲染,然后发送给用户,这可以加快首屏加载速度,并有利于搜索引擎优化(SEO)。静态站点生成(SSG):Next.js允许在构建时预渲染页面为静态HTML,这对于......
  • Nuxt.js 应用中的 pages:extend 事件钩子详解
    title:Nuxt.js应用中的pages:extend事件钩子详解date:2024/10/25updated:2024/10/25author:cmdragonexcerpt:pages:extend是Nuxt.js中的一个生命周期钩子,在页面路由解析完成后被调用。这个钩子允许开发者添加、修改或删除路由配置,为自定义页面路由的管理提供灵活......
  • js练习:实现用键盘打架子鼓
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>JSDrumKit</title><linkrel="stylesheet"href="style.css"><linkrel="icon"href......
  • js练习:实现指南针和时速实时显示效果
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><metaname="viewport"content="width=device-width"><linkrel="icon&qu......
  • js练习:跟随链接高亮显示
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>......