当前位置: 首页 > news >正文

html(抽奖设计)

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>抽奖</title><style type="text/css">* {margin: 0;padding: 0;}.container {width: 800px;height: 800px;border: 1px dashed red;position: absolute;left: 50%;margin-left: -400px;text-align: center;line-height: 100px;}.container .box, .box2 {width: 300px;height: 300px;background: red;border-radius: 50%;margin: auto;margin-top: 50px;text-align: center;line-height: 300px;}.box2 {background: deepskyblue;}#show {font-size: 30px;color: white;font-weight: bold;}#start {width: 300px;height: 50px;background: palevioletred;}</style></head><body><div class="container"><div class="box" id="box"><span id="show">奖品</span></div><button id="start" onclick="start()">开始抽奖</button></div><script type="text/javascript">var flag = false;var goods = ["香蕉", "地狱火", "八宝粥", "宝马五元代金券", "联想电脑", "iPhoneX", "1QB", "黄钻",'练习册','谢谢惠顾'];var show = document.getElementById("show");var _start = document.getElementById("start");var _box = document.getElementById("box")var timer;function start() {if (!flag) {flag = true;_start.innerHTML = "停止抽奖"timer = setInterval(function() {var index = Math.floor(Math.random()*goods.length);var good = goods[index]show.innerText = good;_box.className = "box2";}, 10)} else {flag = false;_start.innerHTML = "开始抽奖";clearInterval(timer);
//					_box["className"] = "box";_box.setAttribute("class", "box");}				}	</script></body>
</html>

可以根据自己的喜好设计抽奖内容,或者修改颜色。

http://www.lryc.cn/news/401982.html

相关文章:

  • Linux·权限与工具(上)
  • 成为CMake砖家(2): macOS创建CMake本地文档的app
  • 基于opencv的图片加水印实现方案
  • STM32 IAP 需要关注的一些事
  • 高并发服务器-使用多进程(Multi-Process)实现【C语言】
  • 线程控制
  • Spring Data Jpa 原生SQL联表查询返回自定义DTO
  • Hadoop3:HDFS存储优化之小文件归档
  • Golang | Leetcode Golang题解之第234题回文链表
  • Unity Apple Vision Pro 开发(四):体积相机 Volume Camera
  • C语言 | Leetcode C语言题解之第231题2的幂
  • GitHub备份代码的学习笔记
  • 微信小程序与本地MySQL数据库通信
  • Flutter热更新技术探索
  • 【机器学习-00】机器学习是什么?
  • 【BUG】已解决:WslRegisterDistribution failed with error: 0x800701bc
  • 无人机监测的必要性及方法
  • PHP框架详解:Symfony框架
  • 在 Navicat BI 创建自定义字段:类型更改字段
  • llama-index,uncharted and llama2:7b run locally to generate Index
  • vue、js截取视频任意一帧图片
  • STM32智能家居系统教程
  • uniapp 开发 App 对接官方更新功能
  • 【PostgreSQL】PostgreSQL 教程
  • Qt类 | QLabel类详解
  • 深入剖析 Android 开源库 EventBus 的源码详解
  • End-to-End Object Detection with Transformers【目标检测-方法详细解读】
  • CSS3实现提示工具的渐入渐出效果及CSS3动画简介
  • JVM 垃圾回收算法
  • 吴恩达大模型系列课程《Prompt Compression and Query Optimization》中文学习打开方式