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

前端学习之DOM编程案例：抽奖案例

news 2026/3/30 17:32:16

代码 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>抽奖案例</title><style>*{margin: 0;padding: 0;}</style>
</head>
<body><div id="container"></div><script>let div0 = document.querySelector('#container')//最外边的大盒子div0.style.width = 800 +'px'div0.style.height = 900 +'px'div0.style.border = '1px dashed red'        div0.style.margin = 'auto'div0.style.textAlign = 'center'//抽奖显示的圆let cirle =  document.createElement('div')cirle.style.borderRadius = '50%'// cirle['borderRadius'] = '50%'// cirle['backgroundColor'] = 'red'cirle.style.backgroundColor = 'red'cirle.style.width = 300 + 'px'cirle.style.height = 300 + 'px'cirle.style.margin = 'auto'cirle.textContent = '宝马五元代金卷'cirle.style.fontSize = '30px'cirle.style.color = 'white'cirle.style.marginTop = '80px'cirle.style.lineHeight = '300px'cirle.style.textAlign='center'div0.appendChild(cirle)//抽奖按钮let button1 = document.createElement('button')button1.style.width=300+'px'button1.style.height=40+'px'button1.textContent = '开始抽奖'button1.style.margin='auto'button1.style.marginTop = 40+'px'let btn_status = '开始抽奖'//奖品let arr = ['宝马五元代金卷','兰博基尼五元代金卷','法拉利五元代金卷','iphone五元代金卷']    //抽奖逻辑button1.onclick = function(){if (btn_status == '开始抽奖'){id = setInterval(start,10)}else{btn_status = '开始抽奖'button1.textContent = btn_statusclearInterval(id)} }div0.appendChild(button1)function start(){index = Math.ceil(Math.random()*4)cirle.textContent = arr[index]btn_status = '停止抽奖'button1.textContent = btn_status}</script>
</body>
</html>

结果

不嫌弃的点点关注，点点赞 ଘ(੭ˊᵕˋ)੭* ੈ✩‧

相关文章：

前端学习之DOM编程案例：抽奖案例

代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>抽奖案例</title><style>*{margin: 0;padding: 0;}</style> </head> <body><div id"container"&g…...

编程日记 2024/4/12 1:17:51

解决windows下Qt Creator显示界面过大的问题

&#x1f40c;博主主页&#xff1a;&#x1f40c;​倔强的大蜗牛&#x1f40c;​ &#x1f4da;专栏分类&#xff1a;QT❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 目录 问题描述 解决方法 1、右击此电脑--->属性 2、点击高级系统设置--->点击环境变量 3、 找到系…...

编程日记 2024/4/12 1:15:47

MySQL 通信协议 tcp c/s架构 jdbc java

简介 服务器启动后&#xff0c;会使用 TCP 监听一个本地端口&#xff0c;当客户端的连接请求到达时&#xff0c;就会执行三段握手以及 MySQL 的权限验证&#xff1b;验证成功后&#xff0c;客户端开始发送请求&#xff0c;服务器会以响应的报文格式返回数据&#xff1b;当客户…...

编程日记 2024/4/12 1:13:44

蓝桥杯第十三届电子类单片机组决赛程序设计

前言 一、决赛题目 1.比赛题目 2.题目解读 二、功能实现 1.关于定时器资源 1&#xff09;超声波和NE555需要的定时器资源 2&#xff09;定时器2 2.单位切换 3.数据长度不足时&#xff0c;高位熄灭 4.AD/DA多通道的处理 5.PWM输出 6.长按功能的实现 三、完整代码演…...

编程日记 2024/4/12 1:12:43

【Entity Framework】如何使用EF中的生成值

【Entity Framework】如何使用EF中的生成值 文章目录 【Entity Framework】如何使用EF中的生成值一、概述二、默认值三、计算列四、设置主键五、显示配置值生成六、设置日期/时间值生成6.1 创建时间戳6.2 更新时间戳 七、替代值生成八、无值生成九、总结 一、概述 数据库列的值…...

编程日记 2024/4/12 1:11:42

【MATLAB源码-第185期】基于matlab的16QAM系统相位偏移估计EOS算法仿真，对比补偿前后的星座图误码率。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 1. 引言 M-QAM调制技术的重要性 现代通信系统追求的是更高的数据传输速率和更有效的频谱利用率。M-QAM调制技术&#xff0c;作为一种高效的调制方案&#xff0c;能够通过在相同的带宽条件下传输更多的数据位来满足这一需求…...

编程日记 2024/4/12 1:08:39

C++入门语法（命名空间缺省函数函数重载引用内联函数nullptr）

目录 前言 1. 什么是C 2. C关键字 3. 命名空间 3.1 命名空间的定义 3.2 命名空间的使用 4. C输入和输出 5. 缺省函数 5.1 概念 5.2 缺省参数分类 6. 函数重载 6.1 概念 6.2 为何C支持函数重载 7. 引用 7.1 概念 7.2 特性 7.3 常引用 7.4 引用与指针的区别 7…...

编程日记 2024/4/12 1:05:35

9.vector的使用介绍和模拟实现

1.vector的介绍及使用 1.1 vector的介绍 vector的文档介绍 vector是表示可变大小数组的序列容器。 就像数组一样&#xff0c;vector也采用的连续存储空间来存储元素。也就是意味着可以采用下标对vector的元素进行访问&#xff0c;和数组一样高效。但是又不像数组&#xff0c…...

编程日记 2024/4/12 1:03:34

探索设计模式的魅力：MVVM模式在AI大模型领域的创新应用-打破传统，迎接智能未来

​&#x1f308; 个人主页&#xff1a;danci_ &#x1f525; 系列专栏&#xff1a;《设计模式》 &#x1f4aa;&#x1f3fb; 制定明确可量化的目标&#xff0c;坚持默默的做事。 MVVM模式在AI大模型领域的创新应用-打破传统迎接智能未来 &#x1f680; “在人工智能的领域里&a…...

编程日记 2024/4/12 0:59:30

Docker使用— Docker部署安装Nginx

Nginx简介 Nginx 是一款高性能的 web 服务器、反向代理服务器以及电子邮件&#xff08;IMAP/POP3/SMTP&#xff09;代理服务器&#xff0c;由俄罗斯开发者伊戈尔塞索耶夫&#xff08;Igor Sysoev&#xff09;编写&#xff0c;并在2004年10月4日发布了首个公开版本0.1.0。Nginx…...

编程日记 2024/4/12 0:58:28

C/C++基础----运算符

算数运算符 运算符 描述 例子 两个数字相加 两个变量a b得到两个变量之和 - 两个数字相减 - * 两个数字相乘 - / 两个数字相除 - % 两个数字相除后取余数 8 % 3 2 -- 一个数字递减 变量a&#xff1a;a-- 、--a 一个数字递增 变量a: a 、 a 其中递…...

编程日记 2024/4/12 0:54:24

YOLOv9：下一代目标检测的革新

目标检测作为计算机视觉领域的一个重要分支&#xff0c;一直是研究的热点。YOLO系列作为目标检测算法的佼佼者&#xff0c;自YOLO1发布以来&#xff0c;就在速度和精度上取得了很好的平衡&#xff0c;深受业界和学术界的喜爱。 YOLOv9作为该系列的最新版本&#xff0c;不仅在性…...

编程日记 2024/4/12 0:50:20

Leetcode算法训练日记 | day20

一、合并二叉树 1.题目 Leetcode&#xff1a;第 617 题 给你两棵二叉树&#xff1a; root1 和 root2 。 想象一下&#xff0c;当你将其中一棵覆盖到另一棵之上时&#xff0c;两棵树上的一些节点将会重叠&#xff08;而另一些不会&#xff09;。你需要将这两棵树合并成一棵新…...

编程日记 2024/4/12 0:48:18

conda创建虚拟环境太慢，Collecting package metadata (current_repodata.json): failed

(省流版&#xff1a;只看加粗红色&#xff0c;末尾也有哦) 平时不怎么用conda&#xff0c;在前公司用服务器的时候用的是公司的conda源&#xff0c;在自己电脑上直接用python创建虚拟环境完事儿&#xff0c;所以对conda的配置并不熟悉~~【狗头】。但是python虚拟环境的最大缺点…...

编程日记 2024/4/12 0:47:15

Tensorflow（GPU版本配置）一步到位！！！

Tensorflow&#xff08;GPU版本配置&#xff09;一步到位&#xff01;&#xff01;&#xff01; CUDA安装CUDA配置Tensorflow配置常见的包 CUDA安装 配置了N次的Tensorflow–Gpu版本&#xff0c;完成了踩坑&#xff0c;这里以配置Tensorflow_gpu 2.6.0为例子进行安装 以下为ten…...

编程日记 2024/4/12 0:45:13

STL之map

CSTL之map 1.介绍 map是映射的意思&#xff0c;即每个x对应一个y&#xff0c;我们这里说成key和value 举例子说明&#xff1a;运动->篮球 &#xff08;运动是key,篮球是value&#xff09;用电脑->写代码 &#xff08;用电脑是key&#xff0c;写代码是value&#xff09;…...

编程日记 2024/4/12 0:44:11

闲谈2024(一)

时光飞逝&#xff0c;一转眼24年的第一个季度已经过去了&#xff0c;回望这3个多月&#xff0c;感触颇多。首先&#xff0c;24年从一个一心只读圣贤书&#xff0c;全身心投入在技术上的研发工程师&#xff0c;转变为一个团队的小leader。从我个人对自己的定位来说&#xff0c;我…...

编程日记 2024/4/12 0:38:03

SQL注入利用 学习- 布尔盲注

布尔盲注适用场景&#xff1a; 1、WAF或者过滤函数完全过滤掉union关键字 2、页面中不再回显具体数据&#xff0c;但是在SQL语句执行成功或失败返回不同的内容 代码分析&#xff1a;过滤关键字 union if(preg_match(/union/i, $id)) { echo "fail"; exit; } 代码…...

编程日记 2024/4/12 0:37:02

前端项目部署教程——有域名有证书

一、拉取nginx镜像 docker pull nginx //先拉取nginx镜像二、打包前端项目 1、将Vue打包项目传输到/usr/local/vue/下blog和admin文件夹下 重点: 每一个子域名都要申请证书&#xff0c;在阿里云每年可以免费申请20个证书&#xff0c; 免费证书申请教程在 免费证书申请教程 …...

编程日记 2024/4/12 0:36:01

《看漫画学C++》第12章 可大可小的“容器”——向量

在C编程的世界里&#xff0c;数组是一种基础且广泛使用的数据结构。然而&#xff0c;传统的静态数组在大小固定、管理不便等方面的局限性&#xff0c;常常让开发者感到束手束脚。幸运的是&#xff0c;C标准库中的vector类为我们提供了一种更加灵活、高效的动态数组解决方案。 …...

编程日记 2024/4/12 0:28:54

保姆级教程：用Davinci Configurator配置RH850F1KMS1双看门狗（AWO域与ISO域）

RH850F1KMS1双看门狗配置实战&#xff1a;从AWO域到ISO域的完整设计指南 在汽车电子开发领域&#xff0c;系统可靠性直接关系到行车安全。RH850F1KMS1作为瑞萨电子面向功能安全应用的高性能MCU&#xff0c;其独特的双看门狗架构&#xff08;AWO域与ISO域&#xff09;为系统提供…...

编程新知 2026/3/30 16:43:25

SDXL 1.0电影级绘图工坊真实案例：文化遗产数字化重建与风格复原实践

SDXL 1.0电影级绘图工坊真实案例&#xff1a;文化遗产数字化重建与风格复原实践 想象一下&#xff0c;你面前有一张因年代久远而模糊不清的古建筑照片&#xff0c;或是仅存于文字描述中的历史场景。如何将它们清晰地、生动地、甚至以不同艺术风格再现出来&#xff1f;这曾是考…...

编程新知 2026/3/30 16:31:18

如何快速配置安卓虚拟摄像头VCAM：专业使用技巧完整指南

如何快速配置安卓虚拟摄像头VCAM&#xff1a;专业使用技巧完整指南 【免费下载链接】com.example.vcam 虚拟摄像头 virtual camera 项目地址: https://gitcode.com/gh_mirrors/co/com.example.vcam 安卓虚拟摄像头VCAM是一款基于Xposed框架的创新工具&#xff0c;能够将…...

编程新知 2026/3/30 14:38:18

解密GPT：从架构解析到实战应用

1. GPT架构深度拆解 第一次接触GPT模型时&#xff0c;我被它流畅的文本生成能力震撼到了。记得当时用GPT-2生成了一篇伪莎士比亚风格的十四行诗&#xff0c;连文学系的朋友都分不清真假。这种"魔法"背后&#xff0c;其实是精妙的架构设计在支撑。 GPT的核心是Transfo…...

编程新知 2026/3/30 14:20:04

【分箱基础篇】pandas 分箱双子星：pd.cut 与 pd.qcut

进阶篇参考&#xff1a;【分箱进阶篇】分箱的工程细节&#xff1a;从训练到部署的完整模式 拿到一列连续数值&#xff1a;年龄、收入、交易金额等&#xff0c;第一步常常是分箱&#xff0c;也就是把连续值映射到几个离散区间。pandas 提供了两个内置函数干这件事&#xff1a;pd…...

编程新知 2026/3/30 14:09:29

【SpringAI篇04】：从内存到MySQL，构建可重启的智能对话系统

1. 为什么需要从内存存储升级到数据库持久化 刚开始接触SpringAI开发时&#xff0c;很多开发者都会选择默认的内存存储方案。这种方案简单直接&#xff0c;不需要额外配置数据库&#xff0c;特别适合快速原型开发。但当你真正要把应用部署到生产环境时&#xff0c;就会发现内存…...

编程新知 2026/3/30 13:43:07

一文搞懂 Spring Cloud：从入门到实战的微服务全景指南（建议收藏）

如果你正在做后端开发&#xff0c;或者正在准备找实习/秋招&#xff0c;那你一定绕不开一个关键词&#xff1a;微服务。 而在 Java 技术栈中&#xff0c;微服务的“标配方案”&#xff0c;就是今天的主角——Spring Cloud。 很多同学第一次接触 Spring Cloud 时&#xff0c;都…...

编程新知 2026/3/30 13:31:01

从拒稿到录用：一个生物医学工程研究生的UMB投稿实战复盘（含完整时间线与避坑点）

从拒稿到录用&#xff1a;一个生物医学工程研究生的UMB投稿实战复盘 第一次收到CIBM编辑部的秒拒邮件时&#xff0c;我正在实验室熬夜跑数据。屏幕上的"reject"字样像一盆冷水浇下来——这个被我寄予厚望的期刊&#xff0c;从投稿到拒稿只用了17天。作为生物医学工程…...

编程新知 2026/3/30 13:24:57

别再纠结硬件滚动了！用Arduino+SSD1306库实现超长文本的软件滚动显示（附完整代码）

ArduinoSSD1306实现超长文本流畅滚动的终极方案 当你在创客项目中需要显示超出屏幕宽度的日志数据或长消息时&#xff0c;硬件滚动的局限性就会暴露无遗。我曾在一个环境监测项目中遇到这个问题——传感器数据经常超过OLED屏幕的16字符显示限制&#xff0c;硬件滚动方案直接截断…...

编程新知 2026/3/30 13:12:41

边缘计算中的存储挑战与解决方案

边缘计算中的存储挑战与解决方案 背景 作为一个专注于存储架构的技术人&#xff0c;我一直在关注边缘计算的发展。最近团队在部署边缘计算解决方案时&#xff0c;遇到了许多存储相关的挑战。为了帮助团队更好地理解和解决这些挑战&#xff0c;我决定写这篇实践指南。 边缘计算的…...

编程新知 2026/3/30 12:50:19