下班模拟器（附 HTML 源码

已于 2023-03-30 22:10:44 修改
阅读量566 收藏
点赞数 2
分类专栏： HTML 文章标签： html css css3
于 2022-05-15 11:28:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/long_songs/article/details/124779888
版权

在线demo :

http://www.longsong.games/time/xiaban

使用规则：

左上角的是自己取得标题，我这边显示的是更新

右边的选择版本，第一个的时间是下午六点，点击之后

再点download开始进度 

 源代码

复制就能直接用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    body, div, p, ul ,li {
        padding: 0;
        margin: 0;
    }
    body {

        line-height: 1.8rem;

    }
    #drop-down {
        width: 350px;
    }
    #drop-down>p {
        width: 100%;
        background-color: #868383;
        color: white;
        text-align: center;
    }
    #drop-down>ul {
        display: none;
        background-color: #d3e2e5;
        color: white;
        list-style-type: none;
        text-align: center;
        box-shadow: 5px 5px 5px #6e6e6e;
    }
    #drop-down:hover ul {
        display: block;
    }
    .shen:hover {
         background-color: rgba(76, 201, 240, 1);
         -webkit-box-shadow: 10px 10px 99px 6px rgba(76, 201, 240, 1);
         -moz-box-shadow: 10px 10px 99px 6px rgba(76, 201, 240, 1);
         box-shadow: 10px 10px 99px 6px rgba(76, 201, 240, 1);
         transition: all 0.5s ease-out 0s;
     }

</style>

    <style type="text/css">
        .systemUpdates {

            background:#eeeeee;
            padding-top:55px;
            padding-left:50px;
            padding-right:55px;
            padding-bottom:50px;
        }
        .newSystem {
        color:#5e5454;
            font-size:28px;
            font-weight:bold;
        }
        .tips {
        font-size:8px;
        }
        .progressBar {
        margin-top:30px;
            width:720px;
            height:8px;
            background:#ffffff;
            border-radius:5px;
        }
        .barContent {
        height: 8px;
            background: #a3d0ef;
            border-radius: 5px;
        }
        .bottomDisplay {
        width: 720px;
            height: 100px;
            margin-top: 18px;
        }
        .cancelButton {
        width: 110px;
            height: 40px;
            background: #ffffff;
            border: none;
            border-radius: 50px;
            font-weight: bold;
            outline: none;
        }
        .cancelButton:hover {
        color: white;
            background: #343238;
        }
        .progress {
        margin-left:500px;
            font-size:10px;
        }
    </style>

</head>
<body>
<div class="systemUpdates">
    <label class="newSystem">An up-to-date system is a healthy system</label><br>
    <label class="tips">please wait while system update searches for new updates for your system</label>
    <div id="drop-down" style="position: absolute ;right:40px">
        <p id = "haha">Download version</p>
        <ul>
<!--            //剩下的一些自己添加吧-->
            <div id="div" class = "shen">pygame‑2.1.2‑pypy38_pp73‑win_amd64.whl</div>
            <div id="div1" class = "shen">pygame‑2.1.2‑cp310‑win_amd64.whl</div>
            <div id="div2" class = "shen">pygame‑2.1.2‑cp310‑win32.whl</div>
            <div id="div3" class = "shen">pygame‑2.1.2‑cp39‑win_amd64.whl</div>
            <div id="div4">pygame‑2.1.2‑cp39‑win32.whl</div>
            <div id="div5">pygame‑2.1.2‑cp38‑win_amd64.whl</div>
            <div id="div6">pygame‑2.1.2‑cp38‑win32.whl</div>
            <div id="div7">pygame‑2.1.2‑cp37m‑win_amd64.whl</div>
            <div id="div8">pygame‑2.1.2‑cp37m‑win32.whl</div>
            <div id="div9">pygame‑2.0.3‑pypy38_pp73‑win_amd64.whl</div>
            <div id="div0">pygame‑2.0.3‑pypy37_pp73‑win_amd64.whl</div>

        </ul>
    </div>
    <div class="progressBar" id="progressBar">
        <div class="barContent" id="barContent"></div>
    </div>

    <div class="bottomDisplay">
        <input type="button" class="cancelButton" value="CANCEL" />
        <input type="button" onclick="startsss()"  class="cancelButton" value="DOWNLOAD" />
        <span class="progress">
                <label id="progressShow">0%complete</label>

            </span>
    </div>
    <textarea id="progressShows" style="width: 780px;height: 400px">
        C:\Program Files (x86)\Microsoft\EdgeUpdate\Download\{56EB18F8-B008-4CBD-B6D2-8C97FE7E9062}\99.0.1150.39
        C:\Windows\assembly\NativeImages_v2.0.50727_64\Microsoft.VisualBas#\eff0669314921f3ebfd4b8fb9ccf7f8e
    </textarea>
</div>
<script type="text/javascript">
    //窗体加载
    var flag = 0;
    var z = 17;
    var oDiv = document.getElementById("div");
    var haha = document.getElementById("haha");
    oDiv.onclick = function(){
        if(flag != 1){
            haha.innerText = "pygame‑2.1.2‑pypy38_pp73‑win_amd64.whl";
            flag = 1;
            z = z-0;
        }
    }
    function startsss() {
        var time = new Date();
        window.onload = function () {undefined
            testBegin(0);
        }
        var a = 59 - parseInt(time.getSeconds()); //获取当前时间(从1970.1.1开始的毫秒数)
        var b = 3600 * (z - parseInt(time.getHours())); //获取当前小时数(0-23)
        var c = 60 * (59 - parseInt(time.getMinutes()));
        var d = a + b + c;
        var x = 0;
        //测试开始
        setInterval(function(){undefined
            x++;
            var time = new Date();
            var progressBar = document.getElementById("progressBar");
            var barContent = document.getElementById("barContent");
            var label = document.getElementById("progressShow");
            var label1 = document.getElementById("progressShows");
            var e = 59 - parseInt(time.getSeconds()); //获取当前时间(从1970.1.1开始的毫秒数)
            var f = 3600 * (z - parseInt(time.getHours())); //获取当前小时数(0-23)
            var g = 60 * (59 - parseInt(time.getMinutes()));
            var t = e + f + g;


            barContent.style.width = progressBar.offsetWidth * ((d-t)/d) + "px";
            label.innerText = (Math.floor(((d-t)*100000/d))/1000 + "% complete");
            if(x%2==0)    //这里就是加载出来的假装下载的东西
                label1.innerText = ("C:\\Program Files (x86)\\Microsoft\\EdgeUpdate\\Download\\{56EB18F8-B008-4CBD-B6D2-8C97FE7E9062}\\99.0.1150.3+"+String(e)+"\n" +
                    "        C:\\Windows\\assembly\\NativeImages_v2.0.50727_64\\Microsoft.VisualBas#\\eff0669314921f3ebfd4b8fb9ccf7f8e\n+" +
                    "C:\\Program Files (x86)\\Microsoft\\EdgeUpdate\\Download\\{56EB18F8-B008-4CBD-B6D2-8C97FE7E9062}\\99.0.1150.39\n" +
                    "        C:\\Windows\\assembly\\NativeImages_v2.0.50727_64\\Microsoft.VisualBas#\\eff0669314921f3ebfd4b8fb9ccf7f8e\n+" +
                    "C:\\Program Files (x86)\\Microsoft\\EdgeUpdate\\Download\\{56EB18F8-B008-4CBD-B6D2-8C97FE7E9062}\\99.0.1150.39\n" +
                    "        C:\\Windows\\assembly\\NativeImages_v2.0.50727_64\\Microsoft.VisualBas#\\eff0669314921f3ebfd4b8fb9ccf7f8e\n+" +
                    "C:\\Program Files (x86)\\Microsoft\\EdgeUpdate\\Download\\{56EB18F8-B008-4CBD-B6D2-8C97FE7E9062}\\99.0.1150.39\n" +
                    "        C:\\Windows\\assembly\\NativeImages_v2.0.50727_64\\Microsoft.VisualBas#\\eff0669314921f3ebfd4b8fb9ccf7f8e\n+" +
                    "C:\\Program Files (x86)\\Microsoft\\EdgeUpdate\\Download\\{56EB18F8-B008-4CBD-B6D2-8C97FE7E9062}\\99.0.1150.39\n" +
                    "        C:\\Windows\\assembly\\NativeImages_v2.0.50727_64\\Microsoft.VisualBas#\\eff0669314921f3ebfd4b8fb9ccf7f8e\n+"+
                    "C:\\Program Files (x86)\\Microsoft\\EdgeUpdate\\Download\\{56EB18F8-B008-4CBD-B6D2-8C97FE7E9062}\\99.0.1150.39\n" +
                    "        C:\\Windows\\assembly\\NativeImages_v2.0.50727_64\\Microsoft.VisualBas#\\eff0669314921f3ebfd4b8fb9ccf7f8e\n+" +
                    "C:\\Program Files (x86)\\Microsoft\\EdgeUpdate\\Download\\{56EB18F8-B008-4CBD-B6D2-8C97FE7E9062}\\99.0.1150.39\n" +
                    "        C:\\Windows\\assembly\\NativeImages_v2.0.50727_64\\Microsoft.VisualBas#\\eff0669314921f3ebfd4b8fb9ccf7f8e\n+" +
                    "C:\\Program Files (x86)\\Microsoft\\EdgeUpdate\\Download\\{56EB18F8-B008-4CBD-B6D2-8C97FE7E9062}\\99.0.1150.39\n" +
                    "        C:\\Windows\\assembly\\NativeImages_v2.0.50727_64\\Microsoft.VisualBas#\\eff0669314921f3ebfd4b8fb9ccf7f8e\n+" +
                    "C:\\Program Files (x86)\\Microsoft\\EdgeUpdate\\Download\\{56EB18F8-B008-4CBD-B6D2-8C97FE7E9062}\\99.0.1150.39\n" +
                    "        C:\\Windows\\assembly\\NativeImages_v2.0.50727_64\\Microsoft.VisualBas#\\eff0669314921f3ebfd4b8fb9ccf7f8e\n+" +
                    "C:\\Program Files (x86)\\Microsoft\\EdgeUpdate\\Download\\{56EB18F8-B008-4CBD-B6D2-8C97FE7E9062}\\99.0.1150.39\n" +
                    "        C:\\Windows\\assembly\\NativeImages_v2.0.50727_64\\Microsoft.VisualBas#\\eff0669314921f3ebfd4b8fb9ccf7f8e\n+");
            else
                label1.innerText = (    "C:\\Windows\\assembly\\NativeImages_v2.0.50727_64\\Microsoft.VisualBas#\\eff0669314921f3ebfd4b8fb9ccf7f8e\n+" +
                    "C:\\Program Files (x86)\\Microsoft\\EdgeUpdate\\Download\\{56EB18F8-B008-4CBD-B6D2-8C97FE7E9062}\\99.0.1150.39\n" +
                    "        C:\\Windows\\assembly\\NativeImages_v2.0.50727_64\\Microsoft.VisualBas#\\eff0669314921f3ebfd4b8fb9ccf7f8e\n+" +
                    "C:\\Program Files (x86)\\Microsoft\\EdgeUpdate\\Download\\{56EB18F8-B008-4CBD-B6D2-8C97FE7E9062}\\99.0.1150.39\n" +
                    "        C:\\Windows\\assembly\\NativeImages_v2.0.50727_64\\Microsoft.VisualBas#\\eff0669314921f3ebfd4b8fb9ccf7f8e\n+" +
                    "C:\\Program Files (x86)\\Microsoft\\EdgeUpdate\\Download\\{56EB18F8-B008-4CBD-B6D2-8C97FE7E9062}\\99.0.1150.39\n" +
                    "        C:\\Windows\\assembly\\NativeImages_v2.0.50727_64\\Microsoft.VisualBas#\\eff0669314921f3ebfd4b8fb9ccf7f8e\n+" +
                    "C:\\Program Files (x86)\\Microsoft\\EdgeUpdate\\Download\\{56EB18F8-B008-4CBD-B6D2-8C97FE7E9062}\\99.0.1150.39\n" +
                    "        C:\\Windows\\assembly\\NativeImages_v2.0.50727_64\\Microsoft.VisualBas#\\eff0669314921f3ebfd4b8fb9ccf7f8e\n+"+
                    "C:\\Program Files (x86)\\Microsoft\\EdgeUpdate\\Download\\{56EB18F8-B008-4CBD-B6D2-8C97FE7E9062}\\99.0.1150.39\n" +
                    "        C:\\Windows\\assembly\\NativeImages_v2.0.50727_64\\Microsoft.VisualBas#\\eff0669314921f3ebfd4b8fb9ccf7f8e\n+" +
                    "C:\\Program Files (x86)\\Microsoft\\EdgeUpdate\\Download\\{56EB18F8-B008-4CBD-B6D2-8C97FE7E9062}\\99.0.1150.39\n" +
                    "        C:\\Windows\\assembly\\NativeImages_v2.0.50727_64\\Microsoft.VisualBas#\\eff0669314921f3ebfd4b8fb9ccf7f8e\n+" +
                    "C:\\Program Files (x86)\\Microsoft\\EdgeUpdate\\Download\\{56EB18F8-B008-4CBD-B6D2-8C97FE7E9062}\\99.0.1150.39\n" +
                    "        C:\\Windows\\assembly\\NativeImages_v2.0.50727_64\\Microsoft.VisualBas#\\eff0669314921f3ebfd4b8fb9ccf7f8e\n+" +
                    "C:\\Program Files (x86)\\Microsoft\\EdgeUpdate\\Download\\{56EB18F8-B008-4CBD-B6D2-8C97FE7E9062}\\99.0.1150.39\n" +
                    "        C:\\Windows\\assembly\\NativeImages_v2.0.50727_64\\Microsoft.VisualBas#\\eff0669314921f3ebfd4b8fb9ccf7f8e\n+" +
                    "C:\\Program Files (x86)\\Microsoft\\EdgeUpdate\\Download\\{56EB18F8-B008-4CBD-B6D2-8C97FE7E9062}\\99.0.1150.39\n" +
                    "        C:\\Windows\\assembly\\NativeImages_v2.0.50727_64\\Microsoft.VisualBas#\\eff0669314921f3ebfd4b8fb9ccf7f8e\n+");

        },100)
    }

</script>

</body>
</html>

long_songs
关注
专栏目录
Time.html 下班计时器
01-05
下班计时器
人生重开模拟器网页版html源码
03-23
源码引见 挺好玩的游戏，玩了很多遍。 一款文字游戏网页源码，主要是抽卡元素，配合玩家加的属性点， 产生不同的人生结局。理想生活中有很多人进错行想要重启的， 不过人最珍贵的是时间，只要在游戏中感受一下了...
html模拟终端,分享|shellinabox：一款使用 AJAX 的基于 Web 的终端模拟器
weixin_39650784的博客
06-08 380
shellinabox简介通常情况下，我们在访问任何远程服务器时，会使用常见的通信工具如OpenSSH和Putty等。但是，有可能我们在防火墙后面不能使用这些工具访问远程系统，或者防火墙只允许HTTPS流量才能通过。不用担心！即使你在这样的防火墙后面，我们依然有办法来访问你的远程系统。而且，你不需要安装任何类似于OpenSSH或Putty的通讯工具。你只需要有一个支持JavaScript和CSS的...
HTML制作一个有意思的进度条 – 死神来了
最新发布
chwmq的博客
09-22 554
【代码】HTML制作一个有意思的进度条 – 死神来了。
html倒计时
m0_47483157的博客
04-14 237
【代码】html倒计时。
html用什么模拟器打开,怎么开启react native和模拟器
weixin_39872044的博客
06-10 1030
怎么开启react native和模拟器1、安装模拟器下载并安装夜神模拟器，安装成功后，命令行连接模拟器(前提是配置了 adb 环境变量，或者到 sdk adb 目录下运行)：adb connect 127.0.0.1:62001当看到 connected to 127.0.0.1:62001 时表示连接成功。2、初始化项目并运行通过命令行初始化项目react-native init MyProj...
推荐开源项目：HTML5设备模拟器 v3
gitblog_00042的博客
05-10 477
推荐开源项目：HTML5设备模拟器 v3 html5-device-mockupsHTML5 mockups of popular devices, to showcase your portfolio and spice up your website.项目地址:https://gitcode.com/gh_mirrors/ht/html5-device-mockups :iphone::co...
人生重开模拟器小程序源码
05-30
"人生重开模拟器"是一款基于微信小程序的趣味游戏，其源码的公开为开发者提供了研究和学习小程序开发的机会。这个源码包包含了构建小程序所需的各种文件，让我们逐一解析其中的关键知识点。 1. **源码软件与小程序*...
雷电模拟器多开中控源码
04-09
《雷电模拟器多开中控源码解析与应用》 在现代的移动应用测试、游戏多开或者自动化脚本编写场景中，模拟器多开技术扮演着至关重要的角色。雷电模拟器作为一款广受欢迎的安卓模拟器，其多开功能更是受到众多用户的...
易语言雷电模拟器多开中控源码
06-03
1.启动即可检测所有雷电模拟器。2.可自由选择启动模拟器。3.可自由启动线程，点击全部启动，启动已选模拟器对应的线程。放心不会重复启动不会乱，只启动选择的，如果选择已经启动，会自动识别。4.可实现单停，全停，...
雷电模拟器中控源码
08-12
《雷电模拟器中控源码详解》 在数字化时代，模拟器已经成为许多开发者和游戏玩家的重要工具，其中雷电模拟器以其优秀的性能和兼容性深受用户喜爱。本文将深入探讨一款名为“雷电模拟器中控源码”的软件，它是用...
公司工作任务管理系统asp源码+access数据库
01-23
【工控老马出品，必属精品，亲测校正，质量保证】 资源名：公司工作任务管理系统asp源码+access数据库 资源类型：程序源代码 源码说明： 1、添加管理企业员工； 2、针对某个员工下达工作任务，支持上传各种常见文件。 3、任务下达后，发送提醒至员工邮箱。 4、员工登陆确认任务状态后开始工作。 5、员工提交工作成果，管理员查看工作结果并确认。 6、不符合要求的工作重新处理后提交并可由管理员再次确认。 适合人群：新手及有一定经验的开发人员
项目进度跟踪管理系统代码
12-27
项目进度跟踪管理系统，项目管理是一项复杂的工程，尤其是对于一些中小企业，没有科学的管理手段很难实现对项目有效的管理。而项目跟踪管理系统（PTS），将可以提高企业管理的科学化水平和信息化水平，从而可以达到对项目的科学有效的管理。
progress:跟踪您的工作进度
07-07
进步 跟踪您的工作进度。 安装 npm install bower install 跑步 grunt serve 提交消息
HTML5 CSS3 ： 进度条的实现实例源码
07-12
代码为博客实例代码：http://blog.csdn.net/lmj623565791/article/details/34825865 有问题，博客中留言
开发进度跟踪（有源代码文件）
weixin_43255518的博客
09-03 314
html页面（倒计时）
11-28 692
Document     国庆倒计时:                        function shijian(){                var d;                                       d = new Date();                var year = d.getFullYear();      
倒计时案例，HTML标签分类
2301_77033340的博客
03-31 242
代码实现：//得到当前时间//得到目标时间（结束时间）//得到倒计时时间差（毫秒） 除1000得到秒var d=parseInt(times/60/60/24) //得到倒计时天数d=d
html video 设置进度条不可拖动_17 进度条Progress教程（plotly Dash Bootstrap版）
weixin_39788960的博客
11-29 481
今天第17课，本节课程主要学习Dash Bootstrap Components中的进度条Progress。继续欣赏音乐《A Time For Us》。祝大家周末愉快~~~(一)功能使用“Progress”组件将Bootstrap样式的进度条添加到web应用中，该功能具有对堆积bar，动画背景和文本标签的支持。(二)调用方式 dash-bootstrap-compo...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值