技术标签: # JavaScript 前端 定时器 新星计划 javascript
最近事情有点多,参加新星计划也接近尾声,顾不上更新文章是个问题,最后决定水一篇,但是又不能太水,所以就有了学习时候的这个案例(论如何光明正大的水)。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>一个按钮控制定时器的开始与暂停</title>
<script type="text/javascript">
var intervalId;
var i = 0;
var count = 0;
function startTime() {
var hour = document.getElementById("hour");
var minute = document.getElementById("minute");
var second = document.getElementById("second");
var ms = document.getElementById("ms");
var buttonEle = document.getElementById("start");
if (i % 2 == 0) {
buttonEle.innerHTML = "暂停计时";
intervalId = setInterval(function() {
count += 1;
var thehour = parseInt(count / 360000);
var theminute = parseInt(count / 6000 % 60);
var thesecond = parseInt(count / 100 % 60);
var thems = parseInt(count % 100);
if (thehour >= 10) {
hour.innerHTML = thehour + " ";
} else {
hour.innerHTML = "0" + thehour + " ";
}
if (theminute >= 10) {
minute.innerHTML = theminute + " ";
} else {
minute.innerHTML = "0" + theminute + " ";
}
if (thesecond >= 10) {
second.innerHTML = thesecond + " ";
} else {
second.innerHTML = "0" + thesecond + " ";
}
if (thems >= 10) {
ms.innerHTML = thems + " ";
} else {
ms.innerHTML = "0" + thems + " ";
}
}, 10)
} else {
buttonEle.innerHTML = "开始计时";
clearInterval(intervalId);
}
i++;
}
</script>
<style type="text/css">
body,
html {
background: violet;
/*position: relative;*/
}
#firstDiv {
height: 50%;
width: 50%;
position: absolute;
margin-left: 350px;
margin-top: 150px;
background: #ffcccc;
}
#twoDiv {
height: 200px;
width: 100%;
position: absolute;
margin-top: 130px;
margin-left: 130px;
;
}
span {
font-size: 30px;
}
button {
font-size: 20px;
}
</style>
</head>
<body>
<div id="firstDiv">
<div id="twoDiv">
<span><span id="hour">00 </span>时</span>
<span><span id="minute">00 </span>分</span>
<span><span id="second">00 </span>秒</span>
<span><span id="ms">00 </span>毫秒</span>
<button id="start" onclick="startTime()">开始计时</button>
</div>
</div>
</body>
</html>
案例不分大小,有想法的小伙伴可以优化结构布局,重新封装函数,或者增加更多有趣的功能,如重置按钮、分段计时等。
标签:JavaScript,定时器
更多演示案例,查看 案例演示
欢迎评论留言!
文章浏览阅读715次。在一图胜千言的时代,没有什么比一张图片更有冲击力的了,那如果一千张图片拼接起来是什么效果呢?别问,问就是两字 —— 炫酷!你有没有想过上面的图片是怎么实现的,难道这是用 ps 一张张拼起来的?当然,靠人工把近千张图片按照色域一一排列,应该是不可能的。今天我们就用 Python 做一个马赛克图片生成器~ 只需要 200 行 Python 代码,就可以将任意图片转化为马赛克拼图效果,一劳永逸!拿来记录校园生活、游戏生涯、送女朋友都最合适不过了!ONE项目思路项目大概_图片转换马赛克拼图
文章浏览阅读285次。文章目录1. 调试处理2.为参数选择合适的范围2.12.2 从粗略到精确的选择2.3 如何使用合理的范围1. 调试处理首先,我们先列举部分我们常见的超参数:学习率α动量梯度下降因子βAdam算法的三个超参数β1,β2,εβ_1,β_2,εβ1,β2,ε2.为参数选择合适的范围2.12.2 从粗略到精确的选择2.3 如何使用合理的范围..._超参数间存在耦合
文章浏览阅读725次,点赞3次,收藏2次。相对orbslam2的改进点有: IMU的官方支持 引入相机通用类,方便替换不同模型的相机。并且官方实现了通用相机模型,就是pinhole-equi或者fisheye模型。 假如地图管理功能,支持多个子地图的存在,以及可能的时候合并子地图 recall更高的回环检测,因为要合并地图。如果recall太低,会照成大量的重复地图。 之前的做法是要求DBOW能够找到连续的3 frame。现在改为只要找到1 frame,然后就做集合一致性检查。 使用通用相机模型带来的改变 因为非小孔_orb_slam3替换相机模型
文章浏览阅读5k次,点赞4次,收藏7次。思路是,获取指数的行情信息,然后利用如下代码进行判断:data['first'] = data['trade_date'].where(data['month'] != data.shift(1)['month'], np.nan)data['last'] = data['trade_date'].where(data['month'] != data.shift(-1)['month'], np.nan)完整代码如下:数据源我用的是wind,大家可以用tushare来替代,获取更简单一些._获取每个月第一个交易日sql语句
文章浏览阅读2.4w次,点赞3次,收藏7次。问题描述右击 ISO 文件选择“装载”,便会弹出一个消息框报错,这该怎么办呢? 解决方法网上有很多的解决办法,例如:更改驱动器号和路径或者是更改注册表 但是我感觉应该没有那么多问题,继续在网上找解决的方法,终于找到一个简单的方法,具体方法如下: 1.右键点属性 2.详细信息 一般不能装载的都是属性都是RAP,可以装载的是RA 3.选择删除属性和个人信息 4.接下来会生成一个副本_抱歉,装载文件时出现问题
文章浏览阅读1.2w次,点赞13次,收藏103次。此篇博文分享幼儿园老小(本人)创建虚拟机安装ubuntu系统的详细操作过程,希望对新手有所帮助咯!(大佬请自行略过哈哈)我的下载地址详情如下:下载请戳–>Ubuntu18.04/64位下载地址提取码:fv6h操作详细过程:1、选中下载完成的ubuntu.rar压缩包,右键选择解压,路径自己选择,我这里是直接【解压到ubuntu】,等待解压完成。2、点击解压完的【ubuntu文件..._vmware15可以装ubuntu14.04
文章浏览阅读2.9k次。一、 新增节点1、 新增的基本功能样式可以在tree里面的案例找到,我这里用的添加节点是子节点,父节点其实是不用插件里面那个添加的。只要配置合适,给子节点添加子节点,该节点就会自动变成父节点的,前提是取消节点锁定。2、下面三个a标签分别是添加、修改和删除,把id等值写对了就能对树进行编辑操作了。3、 只要上面的HTML样式写对了,点击了a标签它插件就会自己调用下面的add方法,新增节点后..._kd tree 树 动态 增删 增加 删除 节点 调整
文章浏览阅读745次。你不知道的功力非凡的20个windows XP小秘密 1. systeminfo:让XP列出更多有用信息 Windows XP 总是在炫耀它可以给稳定工作多么长的时间!要想详细地了解这一信息,你可以接入 Windows的“开始菜单”,再开启“附件菜单”中的“命令提示符”,然后在其中输入“systeminfo”这个命令。电脑就会给你显示出许多有用信息,其中包括了这个系统的初次安装时间,以及本次持_你所不知道的xp
文章浏览阅读613次。实验环境:centos7.6,2G内存,50G硬盘大小,虚拟机ip:172.16.1.7,172.16.1.8,172.16.1.9nginx模块nginx访问模块:ngx_http_access_module目的:禁止外网访问,允许内网访问,我这里10.0.0.0是外网,172.16.1.0是内网1.举例配置: location / { deny 192.168.1.1; allow 192.168.1.0/24; allow 10.1.1.0/16; _htpasswd -cb
文章浏览阅读5.2k次,点赞2次,收藏3次。图的基本应用——图的遍历,从具体的题目着手,学习图的遍历方式及代码形式。_洛谷 图的深度优先算法
文章浏览阅读977次。MongoDB概念解析 SQL术语/概念 MongoDB术语/概念 解释/说明 database database 数据库 table collection 数据库表/集合 row documen..._mongo语句
文章浏览阅读522次。原文地址:http://gashero.iteye.com/blog/2075324目录1 简介2 Swift入门3 简单值4 控制流5 函数与闭包6 对象与类7 枚举与结构1 简介今天凌晨Apple刚刚发布了Swift编程语言,本文从其发布的书籍《The Swift Programming Language》中摘录和_swift 入门教程 书籍