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

devtools/2025/1/20 20:49:56/

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

<!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 = prefixArray[i];
                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


http://www.ppmy.cn/devtools/152183.html

相关文章

vue3 el-table 根据id合并指定列单元格

参考文章&#xff1a;https://www.cnblogs.com/gggggggxin/p/14311726.html 在mounted方法中调用 onMergeLines() const onMergeLines () > {// 先给所有的数据都加一个v.rowspan 1tableData.value.forEach((item) > {item.rowspan 1})// 双层循环for (let i 0; i…

国产化中间件东方通TongWeb环境安装部署(图文详解)

文章目录 前言一、TongWeb部署环境介绍二、安装步骤 1.导入安装包2.安装3.登录网页 总结 前言 中国政府一直致力于促进国内产业的发展和国产化进程。作为全球第二大经济体&#xff0c;中国政府部门在推动国产化方面发挥着至关重要的作用。本文是东方通中间件TongWeb的详细安装…

MongoDB 学习指南与资料分享

MongoDB学习资料 MongoDB学习资料 MongoDB学习资料 在数据爆炸的当下&#xff0c;MongoDB 作为非关系型数据库的佼佼者&#xff0c;以其独特优势在各领域发光发热。无论是海量数据的存储&#xff0c;还是复杂数据结构的处理&#xff0c;MongoDB 都能轻松应对。接下来&#xf…

达梦数据库经验笔记

达梦数据库还算好使&#xff0c;这些年的使用经验留作笔记&#xff0c;给后来人或者同行铺路。 一、服务相关 1.有时候接入会提示“网络异常”&#xff0c;但换成local host也会提示&#xff0c;自己连接本地还会出现网络异常&#xff1f;——此时就代表服务可能没开&#xff…

快速上手 Spring Boot:基础使用详解

快速上手 Spring Boot&#xff1a;基础使用详解 文章目录 快速上手 Spring Boot&#xff1a;基础使用详解 1、什么是SpringBoot2、Springboot快速入门搭建3、SpringBoot起步依赖4、SpringBoot自动配置&#xff1a;以tomcat启动为例5、SpringBoot基础配置6、yaml7、多环境开发配…

利用R计算一般配合力(GCA)和特殊配合力(SCA)

前记 一般配合力(General Combining Ability, GCA)和特殊配合力(Specific Combining Ability, SCA)是杂交育种中用于评估亲本组合潜力的重要概念,具体定义和区别如下: 一般配合力(GCA) 定义:GCA是指一个自交系与其他多个自交系杂交时,其杂交后代在某一性状(如产量)…

cmake foreach 条件判断

格式 foreach(<loop_var> <items>)<commands> endforeach()其中<items>是由空格或空白分隔的项目列表。foreach和匹配的endforeach之间的所有命令都被记录下来而不被调用。一旦计算完endforeach&#xff0c;将为<items>中的每个项目调用一次记录…

网络系统管理Linux环境——StorageSrv之SAMBA

题目要求 服务器StorageSrv上的工作任务 4. SAMBA 创建 samba 共享&#xff0c;本地目录为/data/share1&#xff0c;要求&#xff1a; 共享名为 share1&#xff1b; 仅允许 zsuser 用户能上传文件&#xff1b; 创建 samba 共享&#xff0c;本地目录为/data/public&am…