抽奖.html(网上收集8)

<!doctype html>
<html>
<head><meta charset="utf-8"><title>在线抽奖 随机选取 自动挑选</title><script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script><style>body {background-color:aliceblue;}.wrapDiv {width:80%;max-width:1200px;margin:0 auto;text-align:center;position:absolute;top:80px;left:0;right:0;}.leftBox {float:left;width:800px;height:240px;/*background-color:aqua;*/margin:0 auto;margin-top:0px;clear:both;}#span {float:right;top:30px;right:185px;}#btn {float:left;width:100px;height:30px;margin-left:10px;margin-top:150px;}.nameBox {width:100px;height:30px;float:left;background-color:antiquewhite;margin-left:10px;margin-top:10px;text-align:center;line-height:30px;}.selectedName {float:right;width:340px;background:#666;margin-top:10px;margin-left:30px;background:#ffffff;overflow:hidden;}h1 {text-align:center;}</style>
</head>
<body>
<h1>随机抽奖系统</h1>
<span id="span"></span><div class="wrapDiv"><div id="leftBox" class="leftBox"></div><div id="selectedName" class="selectedName"><h1>中奖者名单</h1></div><input type="button" id="btn" value="开始走起">
</div><script>// 模拟后台数据var arr = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10","11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21","22", "22", "23", "24", "25", "26", "27", "28", "29", "30",];var orgArrCount = arr.length;var currentSelectNum = 0;initForm();// 初始化表单function initForm() {// 动态设置选择人的高度var selectedNameHeight = orgArrCount / 3 * 40 + 120;$("#selectedName").css("height", selectedNameHeight + "px");// 动态创建图层dynamicCreateBox();}// 动态创建层function dynamicCreateBox() {for (var i = 0; i < arr.length; i++) {var div = document.createElement("div");div.innerText = arr[i];div.className = "nameBox";$("#leftBox").append(div);};}// 清空小方格颜色function clearBoxColor() {$("#leftBox").children("div").each(function() {$(this).css("background-color", "");});}// 设置选中小方格颜色function setBoxColor() {$("#leftBox").children("div").each(function() {var thisText = ($(this).text());var selectedName = arr[currentSelectNum];if (thisText == selectedName) {$(this).css("background-color", "red");}});}function appendSelectedName() {var div = document.createElement("div");div.innerText = arr[currentSelectNum];div.className = "nameBox";$("#selectedName").append(div);}$('#btn').click(function() {var curentCount = arr.length;if (curentCount < 1) {alert("没有可选人了");// 清空所有层的颜色clearBoxColor();return;}// 监视按钮的状态if (this.value === "开始走起") {// 定时针timeId = setInterval(function() {// 清空所有层的颜色clearBoxColor();//随机生成一个数var num = Math.floor(Math.random() * curentCount);currentSelectNum = num;// 设置选中小方格颜色setBoxColor();}, 10);this.value = "停止";} else {// 清除计时器clearInterval(timeId);// 添加选中人appendSelectedName();// 移除arr.splice(currentSelectNum, 1);this.value = "开始走起";}});// 获取时间的函数getTime();setInterval(getTime, 10)function getTime() {var day = new Date();var year = day.getFullYear(); //年var month = day.getMonth() + 1; //月var dat = day.getDate(); //日var hour = day.getHours(); //小时var minitue = day.getMinutes(); //分钟var second = day.getSeconds(); //秒month = month < 10 ? "0" + month : month;dat = dat < 10 ? "0" + dat : dat;hour = hour < 10 ? "0" + hour : hour;minitue = minitue < 10 ? "0" + minitue : minitue;second = second < 10 ? "0" + second : second;$("#span").innerText = year + "-" + month + "-" + dat + " " + hour + ":" + minitue + ":" + second}
</script></body>
</html>


<!doctype html>
<html>
<head><meta charset="utf-8"><title>html随机抽奖</title><script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>.content {width:456px;margin:0 auto;text-align:center;font-weight:800;}.kuai {width:150px;height:150px;float:left;line-height:150px;border:1px solid #666;}.button {width:456px;margin:0 auto;text-align:center;}.choujiang {border:none;color:#fff;background-color:#5cb85c;border-radius:4px;font-size:20px;color:#fff;padding:5px 20px;margin-top:20px;cursor:pointer;}.choujiang:hover {background-color:red;}</style>
</head>
<body>
<div class="content"></div>
<div class="button"><button type="button" class="choujiang">抽奖</button>
</div><script>//请在此段代码前引用jq,否则代码无效$(document).ready(function() {var name = ['飞机', '大炮', '火箭', '游艇', '电脑', '键盘', '鼠标', '谢谢参与', '三年模拟两年高考']for (var i = 1; i <= name.length; i++) {$(".content").append('<div id="' + i + '" class="kuai">' + name[i - 1] + '</div>');}$('.choujiang').on('click', function() {$(this).attr("disabled", true); //点击按钮后,按钮进入不可编辑状态var sum = name.length;var le = 3 //设置滚动多轮var hh = sum * le;var y = 1;var x = hh;var times = 12; //调节滚动速度var rand = parseInt(Math.random() * (x - y + 1) + y); //获取随机数var i = Math.ceil(rand / sum); //向上取整for (var i = i; i < le; i++) {rand = rand + sum}time(1, rand, times, sum, times) //点击按钮后触发time事件})});function time(shu, sums, tie, sum, tis) { //倒计时var tie = tie + tis //滚动速度setTimeout(function() {if (shu <= sums) {$('.kuai').css({'background-color': '','color': ''}) //清除css$('#' + shu + '').css({'background-color': 'aqua','color': '#fff'}) //添加css样式if (shu == sum) {sums = sums - shushu = 0;}shu++text(shu, sums, tie, sum, tis)} else {$('.choujiang').attr("disabled", false); //抽奖完毕,按钮重新进入可编辑状态}}, tie);}function text(shu, sums, tie, sum, tis) {time(shu, sums, tie, sum, tis) //执行time事件}
</script></body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>随机点菜名</title><style>/* 初始化页面,清除所有元素的内外边距 */* {padding: 0;margin: 0;/* 设置背景颜色为414141 */background-color: #414141;}/* 盒子居中 */div {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);text-align: center;}/* 使用上期视频的文字渐变效果,再加一点点文字阴影 */span, h2 {text-shadow: 0 0 10px #dfd8d8;background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);-webkit-background-clip: text;-webkit-text-fill-color: transparent;animation: ff 0.9s linear infinite;}@keyframes ff {to {filter: hue-rotate(360deg);}}/* 设置一下字体大小 */h2 {font-size: 72px;}span {font-size: 46px;}/* 按钮居中 */button {position: absolute;top: 70%;left: 50%;transform: translate(-50%, -50%);width: 80px;height: 25px;box-shadow: 0 0 10px #fff;/* 取消轮廓线 */outline: none;background-color: gray;}</style>
</head>
<body>
<div><h2>随机点菜名</h2><span id="name"></span>
</div>
<p/><button id="button_text">stop</button><script>// 获取标签let nametxt = document.getElementById('name');let button = document.getElementById('button_text');// 创建一个数组存储名字let uname = ['阿阳热爱前端', '郝嘉慧', '冬灰条', '蒸羊羔儿', '蒸熊掌', '蒸鹿尾儿','烧花鸭', '烧雏鸡', '烧子鹅', '炉猪', '炉鸭', '酱鸡', '腊肉', '松花','小肚儿', '晾肉', '香肠儿', '什锦苏盘儿', '熏鸡白肚儿', '清蒸八宝猪','江米酿鸭子', '罐儿野鸡', '罐儿鹌鹑', '卤什件儿', '卤子鹅', '山鸡', '兔脯','菜蟒', '银鱼', '清蒸哈什蚂', '烩鸭腰儿', '鸭条', '清拌腰丝儿', '黄心管儿'];// 创建一个函数生成随机数字function getrandom(min, max) {return Math.floor(Math.random() * (max - min - 1) + min);}function clock() {// 通过获取一个随机的数组下标实现随机获取一个名字,并将这个名字赋值给变量randomlet random = uname[getrandom(0, uname.length - 1)];//将random塞到span里nametxt.innerHTML = random;};// 打印名字已经实现了,下一步让没点击按钮前名字一直刷新// 设置不停止时名字的刷新速度为30毫秒let time = self.setInterval("clock()", 30);// 将开始与停止按钮绑定到按钮上,并通过按钮控制let flag = false;button.onclick = function () {// 当flag标志为false时,点击按钮让刷新停止;if (flag == false) {time = window.clearInterval(time);// 按钮文字从stop变为start;button.innerHTML = 'start';// 标志变更flag = true;} else {// 当flag标志为true时,开始刷新,文字变更time = self.setInterval("clock()", 30);button.innerHTML = 'stop';flag = false;}}
</script>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/210616.html

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

相关文章

基于Springboot的秒杀系统(有报告)。Javaee项目,springboot项目。

演示视频&#xff1a; 基于Springboot的秒杀系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&#xf…

【Linux】ln命令使用

ln命令 ln是linux中又一个非常重要命令&#xff0c;请大家一定要熟悉。它的功能是为某一个文件在另外一个位置建立一个同步的链接&#xff0c;这个命令最常用的参数是-s&#xff0c;具体用法是&#xff1a;ln –s 源文件 目标文件。 当我们需要在不同的目录&#xff0c;用到相…

【4】PyQt输入框

1. 单行文本输入框 QLineEdit控件可以输入单行文本 from PyQt5.QtWidgets import QApplication, QWidget, QLineEdit, QVBoxLayout from PyQt5.QtCore import * from PyQt5.QtGui import QIcon import sysdef init_widget(w: QWidget):# 修改窗口标题w.setWindowTitle(单行输…

【Spark入门】基础入门

【大家好&#xff0c;我是爱干饭的猿&#xff0c;本文重点介绍Spark的定义、发展、扩展阅读&#xff1a;Spark VS Hadoop、四大特点、框架模块、运行模式、架构角色。 后续会继续分享其他重要知识点总结&#xff0c;如果喜欢这篇文章&#xff0c;点个赞&#x1f44d;&#xff…

【Openstack Train安装】五、Memcached/Etcd安装

本文介绍Memcached/Etcd安装步骤&#xff0c;Memcached/Etcd仅需在控制节点安装。 在按照本教程安装之前&#xff0c;请确保完成以下配置&#xff1a; 【Openstack Train安装】一、虚拟机创建 【Openstack Train安装】二、NTP安装 【Openstack Train安装】三、openstack安装…

持续集成交付CICD:CentOS 7 安装 Sonarqube9.6

目录 一、实验 1.CentOS 7 安装 Sonarqube9.6 二、问题 1.安装postgresql13服务端报错 2.postgresql13创建用户报错 3.bash: sonar-scanner: 未找到命令 一、实验 1.CentOS 7 安装 Sonarqube9.6 &#xff08;1&#xff09;下载软件及依赖包 ①Sonarqube9.6下载地址 h…

C/C++,图算法——求强联通的Tarjan算法之源程序

1 文本格式 #include <bits/stdc.h> using namespace std; const int maxn 1e4 5; const int maxk 5005; int n, k; int id[maxn][5]; char s[maxn][5][5], ans[maxk]; bool vis[maxn]; struct Edge { int v, nxt; } e[maxn * 100]; int head[maxn], tot 1; vo…

Vellum —— 相关特点

目录 Cloth Breaking and tearing Paneling and draping Cloth simulation Calculating mass and thickness Working with low res and high res cloth Quick moving cloth Softbody Vellum softbodies Plasticity with softbodies Constraints Stitch and slid…

Centos7 制作Openssh9.5 RPM包

Centos7 制作Openssh9.5 RPM包 最近都在升级Openssh版本到9.3.在博客里也放了openssh 9.5的rpm包. 详见:https://blog.csdn.net/qq_29974229/article/details/133878576 但还是有小伙伴不停追问这个rpm包是怎么做的,怕下载别人的rpm包里被加了盐. 于是做了个关于怎么用官方的o…

yolov8添加ca注意力机制

创建文件 coordAtt.py 位置&#xff1a;ultralytics/nn/modules/coordAtt.py ###################### CoordAtt #### start by AI&CV ############################### # https://zhuanlan.zhihu.com/p/655475515 import torch import torch.nn as nn import t…

2023年【A特种设备相关管理(锅炉压力容器压力管道)】考试内容及A特种设备相关管理(锅炉压力容器压力管道)复审考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 A特种设备相关管理&#xff08;锅炉压力容器压力管道&#xff09;考试内容根据新A特种设备相关管理&#xff08;锅炉压力容器压力管道&#xff09;考试大纲要求&#xff0c;安全生产模拟考试一点通将A特种设备相关管理…

使用 async/await 是必须避免的陷阱

使用 async/await 是必须避免的陷阱 如果我们使用过 nodejs&#xff0c;那么我们可能已经在 javaSoript 中使用了异步操作。异步任务是一个独立于 JavaSoript 引擎的主线程执行的操作。从本质上讲&#xff0c;这就是应用程序功能没有阻塞的 UI 的原因。 nodejs 的单线程性质&a…

外包干了2个月,技术明显退步了...

先说一下自己的情况&#xff0c;大专生&#xff0c;19年通过校招进入广州某软件公司&#xff0c;干了接近5年的功能测试&#xff0c;今年11月份&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测…

kubectl获取命名空间下所有configmap集合的方法

前言&#xff1a; 获取单个configmap并忽略特定字段的操作可参照&#xff1a;kubectl获取ConfigMap导出YAML时如何忽略某些字段。 要获取命名空间下所有ConfigMap并忽略特定字段&#xff0c;你可以使用kubectl命令与例如yq这样的工具结合使用来忽略或删除不需要的字段。以下是…

MYSQL8用户权限配置详解

单位的系统性能问题需要把Mysql5升级到Mysql8&#xff0c;需要用到Mysql8的一些特性来提升系统的性能。 配置用户权限过程中发现一些问题&#xff0c;学习并记录一下。 目录 一、环境 二、MySQL8 用户权限 2.1 账号管理权限 2.1.1 连接数据库 2.1.2 账号权限配置 2.2 密码…

深信服AD负载均衡频繁掉线故障分析

一个由114.114.114.114引起的AD异常 客户反馈深信服负载均衡链路频繁掉线&#xff0c;具体故障现象如下 可以获取到IP地址、网关 两分钟掉一次&#xff0c;持续一个多月&#xff0c;求IT的心理阴影面积&#xff01; 链路监视器只设置了一个114.114.114.114 处理流程&#xff…

15:00的面试,15:06就出来了,问的问题过于变态了。。。

从小厂出来&#xff0c;没想到在另一家公司又寄了。 到这家公司开始上班&#xff0c;加班是每天必不可少的&#xff0c;看在钱给的比较多的份上&#xff0c;就不太计较了。没想到5月一纸通知&#xff0c;所有人不准加班&#xff0c;加班费不仅没有了&#xff0c;薪资还要降40%…

Web漏洞分析-SQL注入XXE注入(中下)

随着互联网的不断普及和Web应用的广泛应用&#xff0c;网络安全问题愈发引起广泛关注。在网络安全领域中&#xff0c;SQL注入和XXE注入是两个备受关注的话题&#xff0c;也是导致许多安全漏洞的主要原因之一。本博客将深入研究这两种常见的Web漏洞&#xff0c;带您探寻背后的原…

【数据结构】链表OJ题(顺序表)(C语言实现)

✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅ ✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨ &#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1…

Linux Spug自动化运维平台本地部署与公网远程访问

文章目录 前言1. Docker安装Spug2 . 本地访问测试3. Linux 安装cpolar4. 配置Spug公网访问地址5. 公网远程访问Spug管理界面6. 固定Spug公网地址 前言 Spug 面向中小型企业设计的轻量级无 Agent 的自动化运维平台&#xff0c;整合了主机管理、主机批量执行、主机在线终端、文件…