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.rhkb.cn/news/377115.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

<数据集>光伏板缺陷检测数据集<目标检测>

数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;2400张 标注数量(xml文件个数)&#xff1a;2400 标注数量(txt文件个数)&#xff1a;2400 标注类别数&#xff1a;4 标注类别名称&#xff1a;[Crack,Grid,Spot] 序号类别名称图片数框数1Crack8688922Grid8248843S…

近期几首小诗汇总-生活~卷

生活 为生活飘零&#xff0c;风雨都不阻 路见盲人艰&#xff0c;为她心点灯 贺中科大家长论坛成立十五周年 科学家园有喜贺 园外丑汉翘望中 曾一学子入我科 正育科二盼长大 憧憬也能入此家 与科学家论短长 园外翘首听高论 发现有隙入此坛 竟然也能注册成 入园浏览惶然立 此贴…

零信任的架构结合模块化沙箱,实现一机两用的解决方案

零信任沙箱是深信达提出的一种数据安全解决方案&#xff0c;它将零信任原则与SDC沙箱技术的优势相结合。零信任原则是一种安全概念&#xff0c;核心思想是“永不信任&#xff0c;总是验证”。它要求对每一个访问请求都进行严格的身份验证和授权&#xff0c;无论请求来源于内部还…

Qt Quick qml自定义控件:qml实现电池控件

qml入门进阶专栏地址:https://blog.csdn.net/yao_hou/category_9951228.html?spm=1001.2014.3001.5482 本篇博客介绍如何使用qml来实现电池控件,效果图如下: 下面给出实现代码 Battery.qml /*电池组件*/import QtQuick 2.15 import QtQuick.Controls 2.15Rectangle {id: b…

ES13的4个改革性新特性

1、类字段声明 在 ES13 之前,类字段只能在构造函数中声明, ES13 消除了这个限制 // 之前 class Car {constructor() {this.color = blue;this.age = 2

EXSI 实用指南 2024 -编译环境 Ubuntu 安装篇(二)

1. 引言 在当今的虚拟化领域&#xff0c;VMware ESXi 是备受推崇的虚拟化平台&#xff0c;广泛应用于企业和个人用户中。它以卓越的性能、稳定的运行环境和丰富的功能&#xff0c;为用户提供了高效的硬件资源管理和简化的 IT 基础设施维护。然而&#xff0c;如何在不同操作系统…

STM32第十九课:FreeRTOS移植和使用

目录 需求一、FreeRtos概要二、移植FreeRtos1.复制源码2.内存空间分配和内核相关接口3.FreeRTOSConfig.h4.在工程中添加.c.h 三、任务块操作1.创建任务2.任务挂起&#xff0c;恢复&#xff0c;删除 四、需求实现代码 需求 1.将FreeRtos&#xff08;嵌入式实时操作系统&#xf…

ts使用typeorm实现db创建

1.新建基础架构 ①创建项目文件名, mkdir ‘名称’ ->cd ‘文件名’ -> mkdir ‘src’->npm init mkdir fileName cd fileName mkdir src npm init在当前项目名目录下执行npm init,按照默认执行就会创建package.json. 之后执行 npm i jest/globals casl/ability bcr…

755M全球山脉数据集分享

我们在《548M高精度全球国界数据》和《270M全球流域矢量数据》文中&#xff0c;为你分享过全球的国界数据和水系流域数据。 现在再为你分享755M全球山脉数据集&#xff0c;请在文末查看该数据的领取方法。 755M全球山脉数据集 全球山脉数据集&#xff0c;提供了在全球山地生…

【企业级监控】Zabbix监控网站并发连接数

Zabbix自定义监控项与触发器 文章目录 Zabbix自定义监控项与触发器资源列表基础环境前言一、什么是zabbix的Key值二、获取远程Key值2.1、获得主机的Key值2.2、被监控端安装Agent2.3、zabbix_get命令获取Agent数据举例2.3.1、zabbx_get获取cpu核心数2.3.2、获取目标主机系统和内…

ESP32CAM物联网教学11

ESP32CAM物联网教学11 霍霍webserver 在第八课的时候&#xff0c;小智把乐鑫公司提供的官方示例程序CameraWebServer改成了明码&#xff0c;这样说明这个官方程序也是可以更改的嘛。这个官方程序有四个文件&#xff0c;一共3500行代码&#xff0c;看着都头晕&#xff0c;小智决…

opencascade AIS_InteractiveContext源码学习8 trihedron display attributes

AIS_InteractiveContext 前言 交互上下文&#xff08;Interactive Context&#xff09;允许您在一个或多个视图器中管理交互对象的图形行为和选择。类方法使这一操作非常透明。需要记住的是&#xff0c;对于已经被交互上下文识别的交互对象&#xff0c;必须使用上下文方法进行…

探索IP形象设计:快速掌握设计要点

随着市场竞争的加剧&#xff0c;越来越多的企业开始关注品牌形象的塑造和推广。在品牌形象中&#xff0c;知识产权形象设计是非常重要的方面。在智能和互联网的趋势下&#xff0c;未来的知识产权形象设计可能会更加关注数字和社交网络。通过数字技术和社交媒体平台&#xff0c;…

年轻人「躺平」、「摆烂」现象的根源是什么?

年轻人「躺平」、「摆烂」现象的根源是什么? 穷人没有资格躺平 我可以躺平吗?当然可以了! 对于有些人来说是躺平在房车里,直接开到命运的终点;而你是躺在马路中间,被命运的车轮反复碾压。 中国一线城市的00后,他们的父母多是没有哥哥、姐姐、弟弟、妹妹的独生子女,…

S7-200smart与C#通信

https://www.cnblogs.com/heizao/p/15797382.html C#与PLC通信开发之西门子s7-200 smart_c# s7-200smart通讯库-CSDN博客https://blog.csdn.net/weixin_44455060/article/details/109713121 C#上位机读写西门子S7-200SMART PLC变量 教程_哔哩哔哩_bilibilihttps://www.bilibili…

昇思25天学习打卡营第19天|sea_fish

打卡第19天。本次学习的内容为生成式中的Diffusion扩散模型。记录学习的过程。 模型简介 什么是Diffusion Model&#xff1f; 如果将Diffusion与其他生成模型&#xff08;如Normalizing Flows、GAN或VAE&#xff09;进行比较&#xff0c;它并没有那么复杂&#xff0c;它们都…

【C语言报错已解决】格式化字符串漏洞(Format String Vulnerability)

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 文章目录 引言&#xff1a;一、问题描述&#xff1a;1.1 报错示例&#xff1a;1.2 报错分析&#xff1a;1.3 解决思路&#xff…

Qt中文个数奇数时出现问号解决

Qt中文个数奇数时出现问号解决 目录 Qt中文个数奇数时出现问号解决问题背景问题场景解决方案 问题背景 最近在开发一个小工具&#xff0c;涉及到一些中文注释自动打印&#xff0c;于是摸索如何把代码里面的中文输出到csv文件中&#xff0c;出现了乱码&#xff0c;按照网上的攻…

RedisTemplate 中序列化方式辨析

在Spring Data Redis中&#xff0c;RedisTemplate 是操作Redis的核心类&#xff0c;它提供了丰富的API来与Redis进行交互。由于Redis是一个键值存储系统&#xff0c;它存储的是字节序列&#xff0c;因此在使用RedisTemplate时&#xff0c;需要指定键&#xff08;Key&#xff09…

Hi3861 OpenHarmony嵌入式应用入门--HTTPD

httpd 是 Apache HTTP Server 的守护进程名称&#xff0c;Apache HTTP Server 是一种广泛使用的开源网页服务器软件。 本项目是从LwIP中抽取的HTTP服务器代码&#xff1b; Hi3861 SDK中已经包含了一份预编译的lwip&#xff0c;但没有开启HTTP服务器功能&#xff08;静态库无法…