首页 > 编程语言 >通过HTML和JavaScript实现随机抽取幸运员工

通过HTML和JavaScript实现随机抽取幸运员工

时间:2023-09-28 22:44:54浏览次数:45  
标签:抽取 color JavaScript 员工 isRandomSelecting HTML 随机 background font

需求描述: 公司经常会要求IT部门做一个小功能给公司随机抽取员工

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>员工分享工作感悟</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(to right, #f06, #9f6);
            font-family: Arial, sans-serif;
        }
        .container {
            text-align: center;
            color: #fff;
        }
        h1 {
            font-size: 70px;
            margin-bottom: 20px;
        }
        p {
            font-size: 80px;
            margin-bottom: 100px;
            line-height: 2; /* 调整行间距 */
        }
        .highlighted {
            font-size: 120px;
            font-weight: bold;
            color: #FFD700; /* 黄色 */
        }
        button {
            background-color: #007BFF;
            color: #fff;
            border: none;
            padding: 10px 20px;
            font-size: 50px;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>2023年度公司幸运员工</h1>
        <p>今天的幸运员工是:<span id="selectedEmployee" class="highlighted">员工1</span></p>
        <button onclick="startRandomSelection()">开始随机选择</button>
        <button onclick="stopRandomSelection()">停止选择</button>
    </div>

    <script>
        var employee_list = [
            "员工1", "员工2", "员工3", "员工4", "员工5", 
            // ...
            "员工96", "员工97", "员工98", "员工99", "员工100"
        ];

        var intervalId;
        var isRandomSelecting = false;

        // 随机选择员工
        function selectEmployeeRandomly() {
            var selectedEmployee = employee_list[Math.floor(Math.random() * employee_list.length)];
            document.getElementById("selectedEmployee").textContent = selectedEmployee;
        }

        // 开始随机选择
        function startRandomSelection() {
            if (!isRandomSelecting) {
                intervalId = setInterval(selectEmployeeRandomly, 100);
                isRandomSelecting = true;
            }
        }

        // 停止选择
        function stopRandomSelection() {
            clearInterval(intervalId);
            isRandomSelecting = false;
        }

        // 页面加载后自动开始随机选择
        window.onload = function() {
            startRandomSelection();
        }
    </script>
</body>
</html>

对应效果图如下所示

 

标签:抽取,color,JavaScript,员工,isRandomSelecting,HTML,随机,background,font
From: https://www.cnblogs.com/lcl-cn/p/17736621.html

相关文章

  • 无涯教程-JavaScript - CONCATENATE函数
    描述CONCATENATE函数将两个或多个文本字符串连接为一个字符串。在Excel2016中,CONCATENATE函数已被CONCAT函数替换。CONCATENATE函数仍可用于向后兼容。语法CONCATENATE(text1,[text2]...)争论Argument描述Required/Optionaltext1Thefirstitemtojoin.Theit......
  • 无涯教程-JavaScript - CONCAT函数
    描述Combinesthetextfrommultiplerangesand/orstrings,butitdoesn'tprovidethedelimiterorIgnoreEmptyarguments.Toincludedelimiters(suchasspacingorampersands(&)betweenthetextsyouwanttocombineandtoremoveemptyarguments......
  • 无涯教程-JavaScript - CODE函数
    描述CODE函数返回文本字符串中第一个字符的数字代码。返回的代码对应于Windows系统的ANSI字符集。语法CODE(text)争论Argument描述Required/OptionalTextThetextforwhichyouwantthecodeofthefirstcharacter.Required适用性Excel2007,Excel2010,Excel......
  • 无涯教程-JavaScript - CLEAN函数
    描述CLEAN函数从文本中删除所有不可打印的字符。在从其他应用程序导入的包含可能无法在您的操作系统上打印的字符的文本上使用CLEAN。语法CLEAN(text)争论Argument描述Required/OptionalTextAnyworksheetinformationfromwhichyouwanttoremovenonprintablec......
  • JavaScript 中的类型、值和变量
     JavaScript类型可以分为两类:原始类型和对象类型。JavaScript的基本类型包括数字、文本字符串(称为字符串)和布尔真值(称为布尔值)。特殊的JavaScript值null和undefined是原始值,但它们不是数字、字符串或布尔值。每个值通常被认为是其自身特殊类型的唯一成员。ES6添加了一种新......
  • JavaScript——小数精度丢失问题
    JavaScript小数进行数值运算时出现精度丢失问题1.原因:JavaScript的number类型在进行运算时都先将十进制转二进制,此时,小数点后面的数字转二进制时会出现无限循环的问题。为了避免这一个情况,要舍0进1,此时就会导致精度丢失问题。2.如何解决:(1)保留小数位数toFixed()constnumObj=......
  • HTML Tidy 将HTML转换为XHTML的开源工具
    基本信息软件名称:HTMLTidy开发者主页:tidy.sourceforge.net软件大小:112K安装环境:有多平台版本,本站提供MicrosoftWindows95/98/Me/2000/xp平台版本版本:2005年8月由W3C香港分部提供此版本增加了对gb2312编码的支持软件说明我们现在的网站大部分都是HTML的,如果希望将它们标......
  • pageofficeV6.0另存文件为HTML格式
    转载:另存文件为HTML格式另存文件为HTML格式注意本文中展示的代码均为关键代码,复制粘贴到您的项目中,按照实际的情况,例如文档路径,用户名等做适当修改即可使用。在实际项目开发中,有时需要满足一些没有安装Office软件的客户端电脑或者手机端浏览文档的需求。为了实现这个功能,我们......
  • destoon上做纯js实现html指定页面导出word
    因为最近做了范文网站需要,所以要下载为word文档,如果php进行处理,很吃后台服务器,所以想用前端进行实现。查询github发现,确实有这方面的插件。js导出word文档所需要的两个插件:12FileSaver.jsjquery.wordexport.js首先引入:1234<!--生成wo......
  • 用html写用户注册与登录
    <!DOCTYPEhtml><html><head><title>RegistrationSystem</title><style>body{font-family:Arial,sans-serif;margin:0;padding:20px;}h1{text......