js实现翻盘抽奖

于 2023-03-02 18:21:03 发布
阅读量522 收藏 1
点赞数
文章标签： javascript css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44540152/article/details/129306340
版权 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>礼物编辑</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      list-style-type: none;
      text-decoration: none;
    }
    .container {
      display: flex;
      padding: 20px;
    }
    .handle {
      margin: 100px;
      width: 340px;
    }
    .tit {
      padding: 16px;
      text-align: center;
      font-size: 20px;
    }
    .input-item {
      display: flex;
      align-items: center;
    }
    .input-item + .input-item {
      margin-top: 20px;
    }
    label {
      width: 50px;
    }
    input {
      -webkit-appearance: none;
      background-color: #fff;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      box-sizing: border-box;
      color: #606266;
      display: inline-block;
      font-size: inherit;
      height: 40px;
      line-height: 40px;
      outline: none;
      padding: 0 15px;
      transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      width: 240px;
      cursor: pointer;
    }
    input:hover {
      border-color: #c0c4cc;
    }
    input:focus {
      outline: none;
      border-color: #409eff;
    }
    .btn {
      color: #fff;
      margin: 20px 0 0 0;
      background-color: #409eff;
      font-size:12px;
      cursor: pointer;
      text-align: center;
      font-weight: 500;
      border-color: #409eff;
      border-radius: 3px;
      padding: 9px 15px;
      width: 100px;
    }
    .btn-group {
      display: flex;
    }
    .btn-group .btn + .btn{
     margin-left: 24px;
     background-color: #e73d3d;
    }
    .confirm {
      margin-left: 50px;
    }
    .gift-list {
      margin: 100px;
      width: calc(100% - 240px);
      height: 100%;
    }
    .list {
      border: 2px solid rgb(200, 173, 196);
      border-radius: 8px;
      cursor: pointer;
      padding: 20px;
      min-height: 200px;
      max-height: 440px;
      overflow-y: auto;
    }
    .list ul li {
      display: flex;
      justify-content: space-between;
      padding: 8px;
    }
    .list ul li:hover {
      background-color: #f5f7fa;;
    }
    .del {
      color: #e73d3d;
    }

    .pop-box{
      display: none;
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      text-align: center;
      z-index: 999;
    }
    .pop-box:after{
      content: "";
      display: inline-block;
      height: 100%;
      width: 0;
      vertical-align: middle;
    }
    .pop {
      width: 420px;
      text-align: left;
      display: inline-block;
      backface-visibility: hidden;
      overflow: hidden;
      box-shadow: 0 2px 12px 0 rgb(0 0 0/10%);
      z-index: 999;
      color: #333;
      border-radius:4px ;
      background-color: #fff;
      border: 1px solid #ebeef5;
      padding-bottom: 15px;
      vertical-align: middle;
    }
    .model{
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      height: 100%;
      width: 100%;
      background-color: #000;
      opacity: 0.5;
      z-index: 50;
    }
     .model-tit{
      color: #303133;
      font-size: 18px;
      padding: 15px 15px 10px;
    }
    .model-btn{
      text-align: right;
      padding: 5px 15px 0;
    }
    .back {
      color: #fff;
      margin-top: 20px;
      background-color: #409eff;
      font-size:12px;
      cursor: pointer;
      text-align: center;
      font-weight: 500;
      border-color: #409eff;
      border-radius: 3px;
      padding: 9px 15px;
    }
    .back + .back {
      margin-left: 16px;
    }
    .content{
      padding: 10px 15px;
      color: #606266;
      font-size: 14px;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="handle">
    <div class="tit">添加奖品</div>
    <div class="input-item">
      <label for="gift">名称:</label><input type="text" autocomplete="off" maxlength="12" class="ipt" name="gift" value="" id="gift">
    </div>
    <div class="input-item">
      <label for="num">数量:</label><input type="number" autocomplete="off" maxlength="12" class="ipt num" name="num" value="1" id="num" min="1">
    </div>
    <div class="btn confirm">确定</div>
  </div>
  <div class="gift-list">
    <div class="tit">
      奖品列表
    </div>
    <div class="list">
      <ul>
      <!--  <li>
            <div class="value">1.11111</div>
            <div class="del">删除</div>
        </li>-->
      </ul>
    </div>
    <div class="btn-group">
      <div class="btn save">保存</div>
      <div class="btn reset">清空</div>
    </div>
  </div>
</div>
<div class="pop-box">
  <div class="pop">
    <div class="model-tit">提示</div>
    <div class="model-content">确认重置吗！</div>
    <div class="model-btn">
      <a href="#" class="back" id="confirm">
        确认
      </a>
      <a href="#" class="back" id="cancel">
        取消
      </a>
    </div>
  </div>
</div>
<div class="model"></div>
<script>
  const giftIpt = document.querySelectorAll('[name="gift"]')[0]
  const numIpt = document.querySelectorAll('[name="num"]')[0]
  const confirm = document.querySelectorAll('.confirm')[0]
  const ulBox = document.querySelectorAll('ul')[0]
  const reset = document.querySelectorAll('.reset')[0]
  const save = document.querySelectorAll('.save')[0]
  let delList = document.querySelectorAll('.del')
  let value = ''
  let num = 1
  giftIpt.oninput = function() {
      value = giftIpt.value
  }
  numIpt.oninput = function() {
      num = numIpt.value
  }
  confirm.onclick = function() {
    if  (value === '') {
      alert('名称不能为空!')
      return
    }
    // 判断新添加的是否在奖品列表中包含，包含则数量相加
    const liList = document.querySelectorAll('li')
    const len = liList.length
    let flag = false
    if (len >= 1) {
        for (let i = 0; i < len; i++) {
            let giftName = liList[i].querySelectorAll('.value .giftName')[0].innerHTML
            let giftNum = liList[i].querySelectorAll('.value .num')[0].innerHTML
            if (value === giftName) {
                liList[i].querySelectorAll('.value .num')[0].innerHTML = giftNum / 1 + num / 1
                flag = true
                break
            }
        }
        if (!flag) {
            add(len)
        }
    } else {
        add(len)
    }

    value = ''
    num = 1
    giftIpt.value = ''
    numIpt.value = 1
    delList = document.querySelectorAll('.del')
    del(delList)
  }
  function add(len) {
      let li = document.createElement('li')
      li.innerHTML = `
            <div class="value"><span class="giftName">${value}</span>×<span class="num"> ${num}</span></div>
            <div class="del" data-index= "${len + 1}">删除</div>
    `
      ulBox.appendChild(li)
  }
  function del (nodeList) {
      for (let i = 0; i < nodeList.length; i++) {
          nodeList[i].onclick = function() {
              ulBox.removeChild(this.parentNode)
          }
      }
      // 删除后重新排列
  }
  reset.onclick = function () {
      ulBox.innerHTML = ''
  }
  save.onclick = function() {
     window.localStorage.setItem('giftList', '')
     const liList = document.querySelectorAll('li')
     if (liList.length === 0) {
         alert('奖品不能为空!')
         return
     }
     let giftList = []
     for (let i = 0; i < liList.length; i++) {
        let giftName = liList[i].querySelectorAll('.value .giftName')[0].innerHTML
        let giftNum = liList[i].querySelectorAll('.value .num')[0].innerHTML / 1
        for (let j = 0; j < giftNum; j++) {
            giftList.push(giftName)
        }
     }
     localStorage.setItem('giftList', giftList.toString())
     setTimeout(()=> {
         alert('保存成功!')
         window.location.href = './index.html'
     }, 500)
  }
</script>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>辛运抽奖</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      list-style-type: none;
      user-select: none;
      text-decoration: none;
    }
    .container {
      position: fixed;
      width: 100%;
      height: 100%;
      overflow-y: scroll;
      background-image: url('./images/texture.png');
      transition: background-color 2s ease-in;
      background-color: rgb(200, 173, 196);
    }
    .title {
      padding: 40px 40px 0 40px;
      text-align: center;
      font-size: 36px;
      color: rgb(237, 47, 106);
    }
    .screen {
      position: fixed;
      right: 180px;
      top: 20px;
      color: #333;
      font-weight: bold;
      font-size: 16px;
      cursor: pointer;
    }
    .reset {
      position: fixed;
      right: 120px;
      top: 20px;
      color: #333;
      font-weight: bold;
      font-size: 16px;
      cursor: pointer;
    }
    .edit-gift {
      position: fixed;
      right: 30px;
      top: 20px;
      color: #333;
      font-weight: bold;
      font-size: 16px;
      cursor: pointer;
    }
     ul {
       display: flex;
       flex-wrap: wrap;
     }
     li {
       position: relative;
       padding: 80px 100px;
       width: 100px;
     }

    .front {
      position: absolute;
      width: 100px;
      height: 140px;
      cursor: pointer;
      z-index: 2;
      transition: 0.6s;
      background-image: url("./images/front.png");
      background-size: 100% 100%;
    }
    .end {
      position: absolute;
      width: 100px;
      height: 140px;
      cursor: pointer;
      transition: 0.6s;
      transform: rotateY(180deg);
      background-image: url("./images/end.png");
      background-size: 100% 100%;
      text-align: center;
      color: #333;
      font-size: 20px;
      font-weight: bold;
      padding: 18px;
    }
    .text {
      display: flex;
      align-items: center;
      height: 100%;
      width: 100%;
    }
    .pop-box{
      display: none;
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      text-align: center;
      z-index: 999;
    }
    .pop-box:after{
      content: "";
      display: inline-block;
      height: 100%;
      width: 0;
      vertical-align: middle;
    }
    .pop{
      width: 420px;
      text-align: left;
      display: inline-block;
      backface-visibility: hidden;
      overflow: hidden;
      box-shadow: 0 2px 12px 0 rgb(0 0 0/10%);
      z-index: 999;
      color: #333;
      border-radius:4px ;
      background-color: #fff;
      border: 1px solid #ebeef5;
      padding-bottom: 15px;
      vertical-align: middle;
    }
    .model{
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      height: 100%;
      width: 100%;
      background-color: #000;
      opacity: 0.5;
      z-index: 50;
    }
    .tit{
      color: #303133;
      font-size: 18px;
      padding: 15px 15px 10px;
    }
    .btn{
      text-align: right;
      padding: 5px 15px 0;
    }
    .back {
      color: #fff;
      margin-top: 20px;
      background-color: #409eff;
      font-size:12px;
      cursor: pointer;
      text-align: center;
      font-weight: 500;
      border-color: #409eff;
      border-radius: 3px;
      padding: 9px 15px;
    }
    .back + .back {
      margin-left: 16px;
    }
    .content{
      padding: 10px 15px;
      color: #606266;
      font-size: 14px;
    }
  </style>
</head>
<body>
 <div class="container">
    <span class="screen">全屏</span>
    <span class="reset">重置</span>
    <span class="edit-gift">编辑奖品</span>
    <div class="title">幸运抽奖</div>
    <div class="content">
      <ul>
<!--
        <li>
          <div class="front"></div>
          <div class="end">
            <div class="text">钢笔一支</div>
          </div>
        </li>
-->
      </ul>
    </div>
 </div>
 <div class="pop-box">
   <div class="pop">
     <div class="tit">提示</div>
     <div class="content">确认重置吗！</div>
     <div class="btn">
       <a href="#" class="back" id="confirm">
         确认
       </a>
       <a href="#" class="back" id="cancel">
         取消
       </a>
     </div>
   </div>
 </div>
 <div class="model"></div>
 <script>
    let gift = localStorage.getItem('giftList').split(',') || []
    gift.sort(function () {
        return Math.random() - 0.5
    })
    // const gift = [
    //     '钢笔一支',
    //     '练习册一本',
    //     '一杯奶茶',
    //     '一包零食',
    //     '钢笔一支',
    //     '练习册一本',
    //     '一杯奶茶',
    //     '一包零食',
    //     '钢笔一支',
    //     '练习册一本',
    //     '一杯奶茶',
    //     '一包零食',
    //     '钢笔一支',
    //     '练习册一本',
    //     '一杯奶茶',
    //     '一包零食'
    // ]
    const ulBox = document.querySelectorAll('ul')[0]
    let liList = ''
    for (let i = 0; i < gift.length; i++) {
        liList +=  `
                    <li>
                      <div class="front"></div>
                      <div class="end">
                        <div class="text">${gift[i]}</div>
                      </div>
                    </li>
                    `
    }
    ulBox.innerHTML = liList
    const frontList = document.querySelectorAll('.front')
    const backList = document.querySelectorAll('.end')
    const screenBox = document.querySelectorAll('.screen')[0]
    const resetBtn = document.querySelectorAll('.reset')[0]
    const popBox = document.querySelectorAll('.pop-box')[0]
    const model = document.querySelectorAll('.model')[0]
    const confirmBtn = document.querySelector('#confirm')
    const cancelBtn = document.querySelector('#cancel')
    const editGiftBtn = document.querySelectorAll('.edit-gift')[0]
    for( let i = 0; i < frontList.length; i++) {
        frontList[i].onclick = function () {
            this.style.transform = 'rotateY(180deg)'
            this.style.zIndex = '-1'
            backList[i].style.transform = 'rotateY(0deg)'
        }
    }
    function fullScreen() {
        let de = document.documentElement
        if (de.requestFullscreen) {
            de.requestFullscreen()
        } else if (de.mozRequestFullScreen) {
            de.mozRequestFullScreen();
        } else if (de.webkitRequestFullScreen) {
            de.webkitRequestFullScreen()
        }
    }
    function exitFullscreen() {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        }
    }

    let flag = false
    screenBox.onclick = function () {
        flag = !flag
        if (flag) {
            this.innerText = '退出全屏'
            fullScreen()
        } else {
            this.innerText = '全屏'
            exitFullscreen()
        }
    }

    resetBtn.onclick = function () {
        model.style.display = 'block'
        popBox.style.display = 'block'
    }

    confirmBtn.addEventListener('click', function () {
        model.style.display = 'none'
        popBox.style.display = 'none'
        for( let i = 0; i < frontList.length; i++) {
            frontList[i].style.transform = 'rotateY(0deg)'
            frontList[i].style.zIndex = '2'
            backList[i].style.transform = 'rotateY(180deg)'
        }
    })

    cancelBtn.addEventListener('click', function () {
        model.style.display = 'none'
        popBox.style.display = 'none'
    })

    editGiftBtn.addEventListener('click', function () {
        window.location.href = './editGiftList.html'
    })
 </script>
</body>
</html>
当小怪兽遇见大白
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
PHP+jQuery+Flash完美演示翻盘抽奖
11-02
总结来说，这个“PHP+jQuery+Flash完美演示翻盘抽奖”项目结合了后端处理（PHP）、前端交互（jQuery）和动态视觉（Flash），实现了功能完备且用户体验良好的在线抽奖系统。这种多技术融合的方式展示了Web开发中的...
WPF实现魔方小游戏
12-25
今天给大家带来的是一块用WPF 实现魔方的小游戏，先看一下效果图 代码如下，先写一个类，用来判断是否可以移动 using System; using System.Collections.Generic; using System.Linq; using System.Text; ...
进度条练习
scting_的博客
03-17 474
HTML CSS初学者
干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)
weixin_46837985的博客
02-17 1742
大家应该在很多网页中看到了数字翻牌的效果吧，比如倒计时、数字增长等。相信很多人都已经自己独立实现过了，我也在网上看了一些demo，发现HTML结构大多比较复杂，用了4个并列的标签来放置前...
js实现翻牌效果
zhaishanhui的博客
05-20 5994
$("#divlist li").mouseenter(          function (){ var num = $("div", this).attr("num"); if (num == undefined){ return; } var id = "div"+num; var objDiv = $("div", this); myTimer = setTimeout(
JS实现数字翻牌效果
默存
07-27 1万+
JS实现数字变化翻牌效果 一、效果图如下： 二、代码如下： 注意：需要引入JQuery.js。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数字翻牌器</title> <script s...
如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)
全栈前端精选
11-27 2038
双十一剁手节过去了，大家应该在很多网页中看到了数字翻牌的效果吧，比如倒计时、数字增长等。相信很多人都已经自己独立实现过了，我也在网上看了一些demo，发现HTML结构大多...
电子-一种电池翻盘机
09-15
标题中的“电子-一种电池翻盘机”暗示了我们即将探讨的主题聚焦于电子技术领域，具体是关于电池翻盘机的设备或技术。电池翻盘机通常是指用于电池生产和维护过程中，翻转电池以进行充电、检测或其他工艺操作的机械...
逆风翻盘向阳而生的作文精选.doc
09-18
逆风翻盘向阳而生的作文精选.doc
电子政务-包漆机光铜丝报警翻盘控制电路.zip
09-14
翻盘控制电路就是实现这一功能的关键部分，它可能包含传感器、执行机构和控制系统等组件，确保翻盘操作的准确性和安全性。 控制电路的设计和实现涉及到多个知识点： 1. **自动化控制理论**：理解如何通过编程和...
用户幸运翻牌抽奖活动
11-27
抽奖翻牌基本上都是Javascript实现
JS世界杯抽奖（翻牌，抽牌，跑马灯）效果
06-20
JS世界杯抽奖（翻牌，抽牌，跑马灯）效果，跑马灯效果有问题，懒得写了，用不着了
js实现抽奖的两种方法
11-21
本文实例为大家分享了js实现抽奖的具体代码，供大家参考，具体内容如下 抽奖活动的原理还是很简单的，通过代码一目了然，如果看不懂就私聊我，可以私下交流！ 方法一：使用table写一个随机抽奖 这是html+js代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
H5手机翻牌抽奖领红包代码，翻牌源码，抽奖源码，抽奖代码
06-13
H5手机翻牌抽奖领红包代码，翻牌源码，抽奖源码，抽奖代码，jquery实现翻牌旋转特效代码，九宫格手机端翻牌旋转抽奖代码
js实现游戏（翻牌游戏）
01-03
js实现游戏（翻牌游戏） 运用了 数组（二维）的 重新 洗牌 setinterval 刷新技术
js翻牌占卜抽奖代码
ICode联盟
10-04 238
js翻牌占卜抽奖代码，占卜球抽取奖励的js特效。
jQuery+CSS3翻牌抽奖游戏代码.7z
06-01
jQuery+CSS3翻牌抽奖游戏代码.7z
html+css+js实现抽奖功能
热门推荐
诗雨远方的博客
11-03 1万+
html+css+js实现抽奖功能 一、代码 Document *{ padding: 0; margin: 0; } #uls{ width: 500px; height: 500px; margin: 50px auto; } li{ width: 150px; height: 150px; backgro
微信小程序翻牌抽奖效果
泥猴桃的博客
12-23 3448
效果图如下 翻转动画和洗牌动画都有，奈何本人搞了一个git 图质量太大，上传不上来，无奈只能用静态图片 完整demo已经上传到github，下载好以后替换下自己的appid 即可 gitHub 地址 https://github.com/dadanihoutao/flop-xcx.git 点击再翻一次的时候会重新洗牌！ 效果类似这个， ...
如果我你说最近投资失败破产了，如何才能最快的翻盘
最新发布
02-14
如果您的投资失败并导致破产，您可以考虑以下几种方法来尽快翻盘： 1. 重新评估投资策略：仔细分析投资失败的原因，并确定更为明智的投资策略。 2. 加强自我教育：学习有关投资、经济和金融的知识，增强自己的投资实力。 3. 管理资金：合理管理资金，避免高风险投资，逐步恢复资金。 4. 寻找投资机会：寻找稳定投资的机会，如定期存款、固定收益基金等。 5. 请教专家：寻求专业的投资顾问的帮助，了解有关投资的信息和建议。 请注意，投资是有风险的，重要的是要秉持审慎和谨慎的态度。如果您不确定该如何投资，最好咨询专业人士。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值