htmlcssJavaScript网页开发:年会手机号抽奖案例

见过不少人、经过不少事、也吃过不少苦,感悟世事无常、人心多变,靠着回忆将往事串珠成链,聊聊感情、谈谈发展,我慢慢写、你一点一点看......

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>抽奖</title>

<style>

#choujiang{

display:block;

width: 400px;

margin: 0 auto;

border:1px solid black;

padding: 0;

text-align: center;

}

#choujiang form .contents{

display: block;

width: 400px;

height: 70px;

background: #ff3435;

color:black;

font-weight: bold;

text-align: center;

line-height: 70px;

cursor: pointer;

}

#choujiang form input{

display:inline-block;

width: 100px;

height: 30px;

border:0;

border-radius: 15px;

background: #34f4e4;

line-height: 30px;

color:red;

font-family: 黑体;

font-size:15px;

font-weight: bold;

margin-bottom: 15px;

cursor: pointer;

}

#choujiang form label{

display: block;

width: 400px;

margin: 0 auto;

background: #ffffff;

color:red;

}

</style>

</head>

<body>

<!--

抽奖,根据手机号码抽奖

-->

<div id="choujiang">

<form action="">

<div id="contents" class="contents" onclick="start_cj();">

<!--抽奖界面-->点击开始滚动手机号码

</div>

<br>

<input id="cj" type="button" value="抽1次" onclick="choujiang(1);">

<input id="cj" type="button" value="抽3次" onclick="choujiang(3);">

<input id="cj" type="button" value="抽10次" onclick="choujiang(10);">

<label id="show" class="show"></label>

</form>

</div>

<script>

//抽奖

function choujiang(number) {

var tel = "";

for (var i = 0; i < number; i++) {

tel = tel + get_tel() + " <br> ";

}

//将抽奖结果放入到指定位置显示

var show = document.getElementById("show");

show.innerHTML = "<h1>恭喜以下手机用户获奖</h1>" + tel;

}

//启动抽奖

function start_cj() {

var tel = get_tel();

document.getElementById("contents").innerHTML = tel;

setTimeout("start_cj()", 10); //设置计时器,循环

}

//获取手机号码

function get_tel() {

var prefixArray = new Array("130", "131", "132", "133", "135", "137", "138", "170", "187", "189");

var i = parseInt(Math.random() * 10);

var prefix = prefixArrayi;

for (var j = 0; j < 8; j++) {

prefix = prefix + parseInt(Math.random() * 10);

}

return prefix;

}

</script>

</body>

</html>

关注我,不失联。有啥问题请留言。

感情恋爱合集https://blog.csdn.net/forever8341/category_12863789.html

职业发展故事https://blog.csdn.net/forever8341/category_12863790.html

常用代码片段https://blog.csdn.net/forever8341/category_12863793.html

程序开发教程https://blog.csdn.net/forever8341/category_12863792.html

自我备考经验 https://blog.csdn.net/forever8341/category_12863791.html

高阶高效代码https://blog.csdn.net/forever8341/category_12873345.html

金融语言解析https://blog.csdn.net/forever8341/category_12877262.html

相关推荐
穗余14 分钟前
Typescript let和var区别
前端·javascript·typescript
晓得迷路了19 分钟前
栗子前端技术周刊第 144 期 - Rspack 2.2、pnpm 12、Solid 2.0 RC...
前端·javascript·css
奈斯先生Vector31 分钟前
从“能调用”到“可运营”:AI Agent 进入多模型时代后的架构升级
java·javascript·数据库·人工智能·算法·架构·aigc
এ慕ོ冬℘゜2 小时前
前端实战:jQuery实现动态表格渲染与状态切换功能
前端·javascript·jquery
zzzzzz3102 小时前
react-bits:把酷炫动效从“灵感截图”变成可复用的 React 组件
javascript·react.js·动效
海兰10 小时前
【应用】基于 Next.js 16 + Python mplfinance的金融K线图与技术指标可视化平台(三)
javascript·python·金融
小磊哥er12 小时前
深入解构Claude Code - 第 7 篇 · 连接外面的世界
javascript·ai编程
小磊哥er12 小时前
深入解构Claude Code - 第 6 篇 · 终端里的图形界面
javascript·ai编程
海兰12 小时前
【应用】基于 Next.js 16 + Python mplfinance的金融K线图与技术指标可视化平台(一)
javascript·python·金融
可乐鸡翅yeah_13 小时前
hls.js 内存泄漏实战排查,直播 M3U8 长时间播放异常定位方案
开发语言·javascript·python·django·ecmascript·m3u8·m3u8在线