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

embedded/2025/1/20 22:06:57/

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

<!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/embedded/155595.html

相关文章

linux的用户管理和权限设置相关命令

一.linux的用户管理命令 1.1 useradd命令 useradd 命令用于创建新用户账号。其名称useradd 是“User Add”的缩写&#xff0c;意为添加用户。 useradd命令的基本语法&#xff1a;useradd [选项] 用户名 其中&#xff0c;[选项] 是可选的&#xff0c;可以使用不同的选项实现…

内存与缓存:保姆级图文详解

文章目录 前言1、计算机存储设备1.1、硬盘、内存、缓存1.2、金字塔结构1.3、数据流通过程 2、数据结构内存效率3、数据结构缓存效率 前言 亲爱的家人们&#xff0c;创作很不容易&#xff0c;若对您有帮助的话&#xff0c;请点赞收藏加关注哦&#xff0c;您的关注是我持续创作的…

20250118面试鸭特训营第26天

更多特训营笔记详见个人主页【面试鸭特训营】专栏 1.说下你常用的 Linux 命令&#xff1f; 文件与目录操作 命令描述ls列出当前目录和文件和子目录ls -l列出当前目录和文件和子目录&#xff0c;包括详细信息ls -a列出当前目录和文件和子目录&#xff0c;包括隐藏文件cd切换目…

微软确认Win10停更不碍Microsoft 365使用!未来是否更新成谜

快科技1月17日消息&#xff0c;微软澄清了关于Windows 10停止支持后Microsoft 365办公套件使用情况的误解。 前两天微软更新支持文档&#xff0c;表示2025年10月14日Windows 10停止支持之后&#xff0c;Microsoft 365应用程序将不再支持Windows 10设备&#xff0c;引发用户担忧…

IoTDB 常见问题 QA 第四期

关于 IoTDB 的 Q & A IoTDB Q&A 第四期来啦&#xff01;我们将定期汇总我们将定期汇总社区讨论频繁的问题&#xff0c;并展开进行详细回答&#xff0c;通过积累常见问题“小百科”&#xff0c;方便大家使用 IoTDB。 Q1&#xff1a;Java 中如何使用 SSL 连接 IoTDB 问题…

Linux-性能分析top

性能分析top 1. top 命令概述 top 是 Linux 系统中一个常用的性能监控工具&#xff0c;能够动态显示系统的资源使用情况&#xff0c;包括 CPU、内存、进程等信息。通过top命令&#xff0c;用户可以实时查看系统的状态&#xff0c;并进行性能分析&#xff0c;找出资源占用较高…

隧道IP广播与紧急电话系统:提升隧道安全的关键技术

隧道IP广播与紧急电话系统&#xff1a;提升隧道安全的关键技术 随着现代城市交通的迅猛发展&#xff0c;隧道作为重要的交通基础设施&#xff0c;其安全性与应急处理能力显得尤为重要。隧道IP广播与紧急电话系统作为保障隧道安全的关键技术&#xff0c;正发挥着越来越重要的作…

计算机网络 (49)网络安全问题概述

前言 计算机网络安全问题是一个复杂且多维的领域&#xff0c;它涉及到网络系统的硬件、软件以及数据的安全保护&#xff0c;确保这些元素不因偶然的或恶意的原因而遭到破坏、更改或泄露。 一、计算机网络安全的定义 计算机网络安全是指利用网络管理控制和技术措施&#xff0c;保…