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

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

相关文章:

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: absolut…...

Linux·权限与工具(上)

1. shell命令以及运行原理 Linux严格意义上来说是一个操作系统&#xff0c;我们称之为 "核心(kernel)" &#xff0c;但我们一般的用户不呢个直接使用到核心&#xff0c;因为不会用。所以开发者在核心外面封装了一层 "外壳(shell)" 程序&#xff0c;来与核心…...

成为CMake砖家(2): macOS创建CMake本地文档的app

大家好&#xff0c;我是白鱼。 使用 CMake 的小伙伴&#xff0c; 有的是在 Windows 上&#xff0c; 还有的是在 macOS 上。之前咱们讲了 windows 上查看 cmake 本地 html 文档的方式&#xff0c; 这篇讲讲 macOS 上查看 cmake 本地 html 文档的方法。 1. 问题描述 当使用 CMa…...

基于opencv的图片加水印实现方案

加水印应该是个很常见的需求&#xff0c;但是网上找的代码&#xff0c;都感觉不太完善。记录下自己搞出来的一个方案 水印有几个需求&#xff1a; 中文文字水印文字倾斜满图都是&#xff0c;而不是只有一个地方水印文字所在之处完全展示水印 实现思路 准备水印图 我是这么…...

STM32 IAP 需要关注的一些事

1、首先要知道STM32的程序是如何分布在FLASH中的。 2、升级的时候涉及到两个程序&#xff0c;一个是bootloader&#xff0c;一个是user程序&#xff0c;这两个程序的功能分别的什么作用的&#xff1f; 3、编译的固件是怎么分布的&#xff1f;通过那个配置文件去指导编译器去排布…...

高并发服务器-使用多进程(Multi-Process)实现【C语言】

在上期的socket套接字的使用详解中&#xff08;socket套接字的使用详解&#xff09;最后实现的TCP服务器只能处理一个客户端的请求发送&#xff0c;当有其他客户端请求连接时会被阻塞。为了能同时处理多个客户端的连接请求&#xff0c;本期使用多进程的方式来解决。 解决方案步…...

线程控制

对线程的控制思路和进程相似&#xff0c;创建、等待、终止&#xff0c;只需要调用接口就行。但是在Linux下没有线程的概念&#xff0c;因为Linux的设计者认为&#xff0c;线程是一种轻量级的进程&#xff0c;毕竟创建线程只需要创建PCB。因此Linux中使用多线程必须使用第三方pt…...

Spring Data Jpa 原生SQL联表查询返回自定义DTO

Spring Data Jpa 原生SQL联表查询返回自定义DTO 方案一&#xff1a;返回Map 这个就不说了 方案二&#xff1a;实体定义成接口的形式 该方式最直观&#xff01;&#xff01;推荐&#xff01;&#xff01;&#xff01; 注意&#xff1a;XxxDto是interface接口&#xff0c;而…...

Hadoop3:HDFS存储优化之小文件归档

一、情景说明 我们知道&#xff0c;NameNode存储一个文件元数据&#xff0c;默认是150byte大小的内存空间。 那么&#xff0c;如果出现很多的小文件&#xff0c;就会导致NameNode的内存占用。 但注意&#xff0c;存储小文件所需要的磁盘容量和数据块的大小无关。 例如&#x…...

Golang | Leetcode Golang题解之第234题回文链表

题目&#xff1a; 题解&#xff1a; func reverseList(head *ListNode) *ListNode {var prev, cur *ListNode nil, headfor cur ! nil {nextTmp : cur.Nextcur.Next prevprev curcur nextTmp}return prev }func endOfFirstHalf(head *ListNode) *ListNode {fast : headslo…...

Unity Apple Vision Pro 开发(四):体积相机 Volume Camera

文章目录 &#x1f4d5;教程说明&#x1f4d5;教程内容概括&#x1f4d5;体积相机作用&#x1f4d5;创建体积相机&#x1f4d5;添加体积相机配置文件&#x1f4d5;体积相机配置文件参数&#x1f4d5;体积相机的边界盒大小&#x1f4d5;体积相机边界盒大小和应用边界盒大小的区别…...

C语言 | Leetcode C语言题解之第231题2的幂

题目&#xff1a; 题解&#xff1a; const int BIG 1 << 30;bool isPowerOfTwo(int n) {return n > 0 && BIG % n 0; }...

GitHub备份代码的学习笔记

1. 备份工具&#xff1a;GitHub CLI 2. 认证方式 2.1 公用云服务器&#xff1a;SSH 可以通过使用GitHub CLI(命令行界面)在本地创建一个新的GitHub仓库,并直接使用本地项目代码文件夹的名称作为仓库名称,无需手动输入相同的名称。这可以通过以下步骤实现: 首先,确保您已安装…...

微信小程序与本地MySQL数据库通信

微信小程序与本地MySQL数据库通信 因为本地MySQL服务器没有域名&#xff0c;也没有进行相应的请求操作封装&#xff0c;因此微信小程序没办法和数据库通信。 但是对于开发人员来说&#xff0c;没有数据库&#xff0c;那还能干撒&#xff1f;虽然我尝试过用json-server&#x…...

Flutter热更新技术探索

一&#xff0c;需求背景&#xff1a; APP 发布到市场后&#xff0c;难免会遇到严重的 BUG 阻碍用户使用&#xff0c;因此有在不发布新版本 APP 的情况下使用热更新技术立即修复 BUG 需求。原生 APP&#xff08;例如&#xff1a;Android & IOS&#xff09;的热更新需求已经…...

【机器学习-00】机器学习是什么?

在科技飞速发展的今天&#xff0c;机器学习已成为一个热门话题&#xff0c;广泛应用于各个行业和领域。那么&#xff0c;机器学习到底是什么&#xff1f;它又是如何工作的&#xff1f;本文将深入探讨机器学习的定义、原理及其在各领域的应用&#xff0c;带领读者走进这个神秘而…...

【BUG】已解决:WslRegisterDistribution failed with error: 0x800701bc

已解决&#xff1a;WslRegisterDistribution failed with error: 0x800701bc 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页&#xff0c;我是博主英杰&#xff0c;211科班出身&#xff0c;就职于医疗科技公司&#xff0c;热衷分享知识&#xff0c;武…...

无人机监测的必要性及方法

为什么需要无人机探测&#xff1f; 无人机的快速发展和广泛使用为各个行业带来了巨大好处&#xff0c;包括送货服务、农业和监控。然而&#xff0c;这种扩散也导致滥用现象增多&#xff0c;造成非法入侵空域、侵犯隐私和安全威胁。监控和探测在特定空域盘旋的无人机的能力变得…...

PHP框架详解:Symfony框架

Symfony是一个功能强大且高度灵活的PHP框架&#xff0c;广泛应用于企业级项目和复杂的Web应用开发。本文将详细介绍Symfony框架的主要特性&#xff0c;并通过实例展示其强大功能。 1. 什么是Symfony&#xff1f; Symfony是一个基于MVC&#xff08;模型-视图-控制器&#xff0…...

在 Navicat BI 创建自定义字段:类型更改字段

早在 Navicat 17 的预览版中&#xff0c;我们就已经介绍了一些新的商业智能&#xff08;BI&#xff09;功能&#xff0c;即图表互动和计算字段。需要说明的是&#xff0c;计算字段不是 Navicat BI 中唯一可用的自定义字段类型。事实上&#xff0c;有五种&#xff1a;类型改变、…...

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

家政维修平台实战20:权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

高危文件识别的常用算法:原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎?2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长,文件大。2.其次,树深,IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

Docker 本地安装 mysql 数据库

Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker &#xff1b;并安装。 基础操作不再赘述。 打开 macOS 终端&#xff0c;开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...

Java编程之桥接模式

定义 桥接模式&#xff08;Bridge Pattern&#xff09;属于结构型设计模式&#xff0c;它的核心意图是将抽象部分与实现部分分离&#xff0c;使它们可以独立地变化。这种模式通过组合关系来替代继承关系&#xff0c;从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...

计算机基础知识解析:从应用到架构的全面拆解

目录 前言 1、 计算机的应用领域&#xff1a;无处不在的数字助手 2、 计算机的进化史&#xff1a;从算盘到量子计算 3、计算机的分类&#xff1a;不止 “台式机和笔记本” 4、计算机的组件&#xff1a;硬件与软件的协同 4.1 硬件&#xff1a;五大核心部件 4.2 软件&#…...

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...