当前位置: 首页 > 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>

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

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • Qt 多语言
  • 解决spring boot中使用拦截器导致swagger文档无法访问
  • 数据库内核研发学习之路(三)创建postgres内置函数
  • Linux 安装多个jdk,切换使用
  • OPC通信从入门到精通_2_OPC通信详解和C#客户端编程(OPC基础概念;OPC通信仿真(KepServer作为OPC服务器;使用Modbus Slave和另外软件仿真2个PLC设备);C#程序)
  • Android使用AndServer在安卓设备上搭建服务端(Java)(Kotlin)两种写法
  • 大语言模型LLM
  • 详解python基本语法
  • 每日一练——第四题
  • vue自制表格
  • 什么是TCP
  • vue3+TS从0到1手撸后台管理系统
  • rust + python+ libtorch
  • python用selenium网页模拟时xpath无法定位元素解决方法2
  • Spark中的JOIN机制
  • [js高手之路]搞清楚面向对象,必须要理解对象在创建过程中的内存表示
  • 【391天】每日项目总结系列128(2018.03.03)
  • 11111111
  • ES6之路之模块详解
  • JavaScript创建对象的四种方式
  • MySQL QA
  • MySQL的数据类型
  • python学习笔记-类对象的信息
  • Vue小说阅读器(仿追书神器)
  • Vue源码解析(二)Vue的双向绑定讲解及实现
  • vue总结
  • yii2权限控制rbac之rule详细讲解
  • 闭包--闭包之tab栏切换(四)
  • 马上搞懂 GeoJSON
  • 那些被忽略的 JavaScript 数组方法细节
  • 如何借助 NoSQL 提高 JPA 应用性能
  • 设计模式走一遍---观察者模式
  • 使用 QuickBI 搭建酷炫可视化分析
  • 学习ES6 变量的解构赋值
  • 第二十章:异步和文件I/O.(二十三)
  • 机器人开始自主学习,是人类福祉,还是定时炸弹? ...
  • ​LeetCode解法汇总1276. 不浪费原料的汉堡制作方案
  • ​软考-高级-系统架构设计师教程(清华第2版)【第12章 信息系统架构设计理论与实践(P420~465)-思维导图】​
  • #[Composer学习笔记]Part1:安装composer并通过composer创建一个项目
  • #{} 和 ${}区别
  • $emit传递多个参数_PPC和MIPS指令集下二进制代码中函数参数个数的识别方法
  • (70min)字节暑假实习二面(已挂)
  • (JS基础)String 类型
  • (阿里云万网)-域名注册购买实名流程
  • (亲测成功)在centos7.5上安装kvm,通过VNC远程连接并创建多台ubuntu虚拟机(ubuntu server版本)...
  • (心得)获取一个数二进制序列中所有的偶数位和奇数位, 分别输出二进制序列。
  • (转)Google的Objective-C编码规范
  • *算法训练(leetcode)第四十七天 | 并查集理论基础、107. 寻找存在的路径
  • .NET Compact Framework 多线程环境下的UI异步刷新
  • .NET Core WebAPI中使用swagger版本控制,添加注释
  • .net 使用ajax控件后如何调用前端脚本
  • .NET/C# 判断某个类是否是泛型类型或泛型接口的子类型
  • .vue文件怎么使用_vue调试工具vue-devtools的安装
  • /etc/sudoer文件配置简析
  • @Value获取值和@ConfigurationProperties获取值用法及比较(springboot)