简易抽签程序(数字滚动 HTML + JavaScript)
2024-05-20 05:33:40
效果一截图
代码如下：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>抽签系统</title><style>.container {background-color: #ffff99;margin-top: 10px;margin-left: 300px;margin-right: 300px;width: auto;height: auto;}</style>
</head>
<body><div class = "container"><inputtype="text"style="border:0px;text-align:center;font-size:60px;background-color:#ffff99;"id="txt"><br><br><font size="20">目前已经抽出<span id = "count"> 0 </span>个!</font><br><inputtype="button"style='font-size:30px'value="开始"onClick="timedCount();"> <inputtype="button"style='font-size:30px'value="停止"onClick="stopCount();Random();"> <inputtype="button"style='font-size:30px'value="清空"onclick="Clear();"/><br><br><span id="display"></span><br></div><script>var num = 0;var arr = [];var vis = [];var mark = [];var c = 0;var k = 0;var t;var tt;var cont = 0;while(true) {var tt = parseInt(Math.random() * 19 + 1);if(!mark[tt]) {mark[tt] = 1;vis[cont++] = tt;}if(cont === 19) {break;}}function timedCount() {document.getElementById('txt').value = c;k = k + 1;k = k % (vis.length);c = vis[k];t = setTimeout('timedCount()', 100);}function stopCount() {clearTimeout(t);tt = document.getElementById('txt').value;}function Random() {var draw = document.getElementById('display');num += 1;arr.push(tt);draw.innerHTML = draw.innerHTML + '<h1>第' + num + '组抽中：' + tt + '<br/></h1>';var tmp = [];var cnt = 0;tmp.length = 0;for (var i = 0, len = vis.length; i < len; i += 1) {if (vis[i] != tt) {tmp[cnt] = vis[i];cnt = cnt + 1;}}vis.length = 0;for(var i = 0; i < tmp.length; i += 1) {vis[i] = tmp[i];}document.getElementById('count').innerHTML = arr.length;if (arr.length === 19) {alert('已经抽完!');}}function Clear() {arr = null;arr = [];mark = [];var cont = 0;while(true) {var tt = parseInt(Math.random() * 19 + 1);if (!mark[tt]) {mark[tt] = 1;vis[cont++] = tt;}if(cont === 19) {break;}}k = 0;num = 0;c = 0;clearTimeout(t);document.getElementById('txt').value= "0";document.getElementById("count").innerHTML = "0";document.getElementById("display").innerHTML = "";}</script>
</body>
</html>
效果二截图
代码如下：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="Content-Type" content="text/html; charset=gb2312"/><title>简易抽签系统</title><style>.container {background-color: #ffff99;margin-top: 10px;margin-left: 300px;margin-right: 300px;width: auto;height: auto;}</style>
</head><body><div class="container"><inputtype="text"style="border:0px;text-align:center;font-size:60px;background-color:#ffff99;"id="txt"><br><br><font size="20">目前已经抽出<span id="count"> 0 </span>个!</font><br><inputtype="button"style="font-size:30px"value="开始"onClick="solve1();"> <inputtype="button"style='font-size:30px'value="停止"onClick="solve2()"> <inputtype="button"style='font-size:30px'value="清空"onClick="Clear();"><br><br><span id="display"></span><br></div><script>var num = 0;var arr = [];var vis = [];var mark = [];var stringpro = "送元二使安西,江雪,过故人庄,石壕吏,三吏三别,逢雪宿芙蓉山主人"var pro = stringpro.split(',');var c = 0;var k = 0;var t;var tt;var flag = true;//for(var i = 0; i < 19; i++)// vis[i] = i+1;var cont = 0;while(true) {var tt = parseInt(Math.random() * 6 + 1);if(!mark[tt]) {mark[tt] = 1;vis[cont++] = tt;}if(cont === 6) {break;}}function timedCount() {document.getElementById('txt').value = c;k = k + 1;k = k % (vis.length);c = vis[k];t = setTimeout("timedCount()",50)}function solve1() {if(flag) {timedCount();flag = false;}}function stopCount() {clearTimeout(t);tt = document.getElementById('txt').value;}function Random() {var draw = document.getElementById('display');num += 1;arr.push(tt);var tmp = tt;tmp -= 1;draw.innerHTML = draw.innerHTML + '<h1>第' + num + '组抽中：' + pro[tmp] + '<br/></h1>';var tmp = [];tmp.length = 0;var cnt = 0;for(var i = 0, len = vis.length; i < len; i += 1) {if(vis[i] != tt) {tmp[cnt] = vis[i];cnt = cnt+1;}}vis.length = 0;for(var i = 0, len = tmp.length; i < len; i += 1) {vis[i] = tmp[i];}document.getElementById("count").innerHTML = arr.length;if(arr.length === 6){alert('已经抽完!');}}function solve2() {if(!flag) {stopCount();Random();flag = true;}}function Clear() {arr = null;arr = [];mark = [];var cont = 0;while(true) {var tt = parseInt(Math.random() * 6 + 1);if(!mark[tt]) {mark[tt] = 1;vis[cont++] = tt;}if(cont === 6) {break;}}k = 0;num = 0;c = 0;clearTimeout(t);document.getElementById('txt').value = '0';document.getElementById('count').innerHTML = '0';document.getElementById('display').innerHTML = '';}</script>
</body>
</html>
简易抽签程序(数字滚动 HTML + JavaScript)相关推荐
- 在线抽签html,简易抽签程序(数字滚动 HTML + JavaScript)
效果截图 代码如下: 抽签系统啊 .container{background-color:#ffff99; margin-top:10px;margin-left:300px;margin-right ...
- 微信小程序 -数字滚动动画
效果图 实现思路 为了实现数字的无限滚动效果,每个数字框的内部,其实包含了两组0~9的view,每个View的高度都一样 数字框内使用绝对定位,通过调整top位置,显示出指定的数字 使用transti ...
- javascript随机抽签程序
将下面的代码保存为html格式即可运行. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...
- WxCountUp - 数字滚动（微信小程序插件）
github地址 wx-extend 欢迎star~~ 插件介绍 该插件是参照 CountUp.js 封装的,为小程序提供的数字滚动,以更有趣的方式显示数值数据. 参数说明 Params 参数 类型 ...
- 数字滚动（微信小程序）
数字滚动(微信小程序) 微信小程序使用数字滚动的功能,引用了外部的包 WxCountUp.js 页面使用: countup.wxml <view class="page"&g ...
- 单片机加减法计算器_51单片机简易计算器程序 实现数字的加减乘除运算
单片机源程序如下: #include //头文件 #define uint unsigned int #define uchar unsigned char sbit lcden=P1^1; //LC ...
- matlab编写识别手写数字_MATLAB--数字图像处理 车牌识别之简易识别程序
车牌识别之简易识别程序 代码 I=imread('car2.jpg'); figure(1),imshow(I);title('原图') I1=rgb2gray(I);%功能是将真彩色图像转换为灰度图 ...
- 用java制作一个简易抽签器
最近闲来无事,想用Java编写一个随机抽签器,最终编写后的运行结果是这样的 下面说一下怎么具体实现,非常简单. 首先,要想出现这个滚动标签,首先必须要有一个窗口来承载它,所以要在main()方法中创建 ...
- php 滑块 爬虫_PHP实现简易爬虫与简易采集程序
今天跟大家分享两段php代码,一段是PHP实现简易爬虫,一段是PHP实现简易采集程序.代码都比较简单,适合会点php的SEO初学者. PHP实现简易爬虫 代码中涉及两个表,urls和visited,分 ...
- jquery 数字滚动特效 数字自增特效 数字位数动态适应
最近做了个大项目,需要在首页动画显示实时统计数据,虽然百度了不少jquery特效,但有的需要积分,有的功能不全面,下面我将源码分享出来. html <!DOCTYPE html> < ...
最新文章
- Platform Builder 5下WinCE 5.0目录结构
- 开源-BDCI2018供应链需求预测模型第一名解决方案和代码
- 2021年北京交通大学925数据结构考研真题回忆版
- Hive-分区分桶操作
- 2021-2025年中国电影行业市场供需与战略研究报告
- tensorflow代码cpu上可以跑gpu跑报错Blas GEMM launch failed
- umount强制卸载不起作用,卸载光驱终极办法---fuser
- 5.PHP 命令行模式
- PDF编辑器中文版怎么插入PDF空白页面
- m6000查看端口状态_M6000日常维护命令
- Linux 测试连接端口
- ubuntu中修改只读文件
- C# 实现俄罗斯方块
- java打印字符串显示_JAVA调用系统打印机打印字符串
- 许知远在吴晓波《预见2019——国运70》2018年年终演讲上的精华
- 微信小程序：小秋工具箱开发总结
- 如何用 R 绘制动态统计图？
- 服务器怎样创建多台虚拟主机,服务器是如何实现多台虚拟主机
- 记录一下自己写的小工具：shell 调度 SQL 批处理，递归查找调度路径
- QT错误1-error: invalid use of incomplete type ‘class xxx‘