[JS] 自己弄得个倒计时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>时间倒计时</title>
<style>
span{
display: inline-block; }
</style>
</head>
<body>
<center>
<span id="time">getbootstrap.com</span><br/>
<span id="time"></span><br/>
<span id="time1"></span><br/>
<span id="time2"></span><br/>
<span id="time3"></span><br/>
<span id="time4"></span><br/>
<span id="time5"></span><br/>
</center> </body>
<script>
function show_time(){
var now_time=new Date();//创建当前时间
// console.log(now_time.toLocaleString());//转化成本地时间
var new_time=new Date('2017,7,23');//设置活动时间
// console.log(new_time.toLocaleString());
var cu_time=new_time.getTime()-now_time.getTime();//看时间差
// console.log(cu_time);
// console.log(new_time.getTime());
// console.log(now_time.getTime());
var cu_seconds=parseInt(cu_time/1000%60);
var cu_seconds1=parseInt(cu_time/1000);
//把所获得的时间差转化成秒,原值是毫秒转化单位是1000,%60是为了余数且取整,为了更好展示
//console.log(cu_seconds);
var cu_minutes=parseInt(cu_time/1000/60%60);//原来同上,转化为分钟,取余值且取整
var cu_minutes1=parseInt(cu_time/1000/60);
//console.log(cu_minutes);
var cu_hours=parseInt(cu_time/1000/60/60%24);//原来同上,转化为小时,取余值且取整
var cu_hours1=parseInt(cu_time/1000/60/60);
//console.log(cu_hours);
var cu_day=parseInt(cu_time/1000/60/60/24);//原来同上,转化为天,且取整
var cu_day1=parseInt(cu_time/1000/60/60/24/30);
// console.log(cu_day);
time.innerHTML="<h2>"+"距离活动还有<font color='red' size='20px'>"+cu_day+"</font>天<font color='red' size='20px'>"+cu_hours+"</font>小时<font color='red' size='20px'>"+cu_minutes+"</font>分<font color='red' size='20px'>"+cu_seconds+'</font>秒'+"</h2>";
time1.innerHTML="<h2>"+"距离活动还有<font color='red' size='20px'>"+cu_day1+"</font>个月</h2>";
time2.innerHTML="<h2>"+"距离活动还有<font color='red' size='20px'>"+cu_day+"</font>天</h2>";
time3.innerHTML="<h2>"+"距离活动还有<font color='red' size='20px'>"+cu_hours1+"</font>小时</h2>";
time4.innerHTML="<h2>"+"距离活动还有<font color='red' size='20px'>"+cu_minutes1+"</font>分</h2>";
time5.innerHTML="<h2>"+"距离活动还有<font color='red' size='20px'>"+cu_seconds1+"</font>秒</h2>";
}
setInterval(show_time,500);//设置定时器500毫秒刷新一次 </script>
</html>
[JS] 自己弄得个倒计时的更多相关文章
- js写的5秒钟倒计时跳转
使用js实现几秒以后倒计时跳转,这个在某些特殊情况下还是比较实用的,下面为大家介绍下具体的实现步骤,感兴趣的朋友不要错过 代码如下: <html> <head> < ...
- 原生js实现一个简单的倒计时功能
大家好,我是云中君!欢迎大家来观看我的博客 之前那,在群里看到很多人问,关于电商网站中的倒计时功能怎么实现,很多人说在网上找了很多插件,但是不是很会用,所以今天就在这里分享一下我封装的一个小的倒计时功 ...
- js 和 java 将时间倒计时显示
需求:用户购买产品,创建了一个订单,但是还么有支付,此时给用户三十分钟剩余支付时间,前台页面做倒计时功能,时间到达时,更改订单状态 ,输出的格式是:29:23 java 实现 package com. ...
- js 发送短信验证码倒计时
html <input type="button" id="btn" value="免费获取验证码" onclick="se ...
- js学习笔记之日期倒计时(天,时,分,秒)
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- js手机短信按钮倒计时
/* 120秒手机短信按钮倒计时 */ exports.sendmessage = function (name) { var second = 120; $(name). ...
- js大图轮播和倒计时
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js模拟24小时的倒计时效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JS与React分别实现倒计时(天时分秒)
JS方法 html部分 <div class="clock"> <i></i> 天 <i></i> : <i> ...
随机推荐
- IP协议的助手 —— ICMP 协议
IP协议的助手 —— ICMP 协议 IP协议的助手 —— ICMP 协议 ping 是基于 ICMP 协议工作的,所以要明白 ping 的工作,首先我们先来熟悉 ICMP 协议. ICMP 是什么? ...
- python绘图设置标题、标签,无法显示中文
先说解决办法:在程序开始之前,引入使用的模块之后,添加如下代码: plt.rcParams['font.sans-serif']=['SimHei'] plt.rcParams['axes.unico ...
- 高数解题神器:拍照上传就出答案,这个中国学霸做的AI厉害了 | Demo
一位叫Roger的中国学霸小哥的拍照做题程序mathAI一下子火了,这个AI,堪称数学解题神器. 输入一张包含手写数学题的图片,AI就能识别出输入的数学公式,然后给出计算结果. 不仅加减乘除基本运算, ...
- 面试刷题29:mysql事务隔离实现原理?
mysql的事务是innodb存储引擎独有的,myisam存储引擎不支持事务. 事务最经典的例子就是转账了,事务要保证的是一组数据库的操作要么全部成功,要么全部失败.是为了保证高并发场景下数据的正确性 ...
- windows server 2016 远程桌面mstsc DPI(更改文本、应用和其他项目大小) 设置
windows server 2016 远程桌面mstsc DPI 设置 在高分辨率机器2K,4K,8K,登入使用window远程桌面mstsc时,登入后虽然分辨率变成了和cilent一样分辨率 但是 ...
- el-table分页展示数据
<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" :show- ...
- Bitmap之位图采样和内存计算详解
原文首发于微信公众号:躬行之(jzman-blog) Android 开发中经常考虑的一个问题就是 OOM(Out Of Memory),也就是内存溢出,一方面大量加载图片时有可能出现 OOM, 通过 ...
- Q - 迷宫问题 POJ - 3984(BFS / DFS + 记录路径)
Q - 迷宫问题 POJ - 3984 定义一个二维数组: int maze[5][5] = { 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, ...
- 记一次JAVA进程导致Kubernetes节点CPU飙高的排查与解决
一.发现问题 在一次系统上线后,我们发现某几个节点在长时间运行后会出现CPU持续飙升的问题,导致的结果就是Kubernetes集群的这个节点会把所在的Pod进行驱逐(调度):如果调度到同样问题的节点上 ...
- C# 快速开发框架搭建—环境搭建
一.新建MVC项目 打开vs2013新建空的解决方案,在解决方案中增加一个MVC项目,如图: 删除不需要的文件,剩下如图所示的文件夹: 首先创建一个MVC5控制器(Login,登入使用),该控制器无需 ...