利用js实现倒计时
2024-08-27 13:57:22
倒计时 这个名词并不陌生,比如:天猫,京东等一些网上商城都会推出一些限时特价商品,今天我们就一起编写一个属于自己的倒计时;
Ps: 首先做一件事情的时候,不应该盲目的去做,应该首当其冲的去想,脑子里面出现大概的思路。
一、首先我们应该在HTML放一个容器(这里面没有什么可解释的就是为了呈现倒计时);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒计时制作</title>
<style>
.otime span{display:inline-block;padding: 10px 20px;background-color: green;opacity: 0.5;margin-left: 10px;color:red;}
</style>
</head>
<body>
<div class="text">
<p>距离元旦还剩余:<span id="time" class="otime"></span></p>
<p>当前时间:<span id="time1" class="otime"></span></p>
</div>
</body>
</html>
二、编写JS代码
//这个函数是为了适应格式 比如:01分01秒;
function p (n){
return n < 10 ? '0'+ n : n;
} //倒计时函数
function newTime (){
//定义当前时间
var startTime = new Date();
//定义结束时间
var endTime = new Date("2017/1/1 00:00:00"); //算出中间差并且已毫秒数返回; 除以1000将毫秒数转化成秒数方便运算;
var countDown = (endTime.getTime() - startTime.getTime())/1000; //获取天数 1天 = 24小时 1小时= 60分 1分 = 60秒
var oDay = parseInt(countDown/(24*60*60)); //获取小时数
//特别留意 %24 这是因为需要剔除掉整的天数;
var oHours = parseInt(countDown/(60*60)%24); //获取分钟数
//同理剔除掉分钟数
var oMinutes = parseInt(countDown/60%60); //获取秒数
//因为就是秒数 所以取得余数即可
var oSeconds = parseInt(countDown%60); //下面就是插入到页面事先准备容器即可;
var html = "<span>" + p(oDay) + "天</span>"+ "<span>" + p(oHours) + "时</span>" + "<span>" + p(oMinutes) + "分</span>" +"<span>" + p(oSeconds) + "秒</span>";
document.getElementById('time').innerHTML = html; //别忘记当时间为0的,要让其知道结束了;
if(countDown < 0){
document.getElementById('time').innerHTML = '元旦到了';
}
}
这样就实现了一个计时器的效果,如果想要好看一点,只需要加点样式即可;
三、制作当前时间的秒表(也就是第二个容器需要做的)
1、直接编写JS代码
function oldTime (){
var oDate = new Date();
//获取年
var oFullyear = oDate.getFullYear();
//获取月份
var oMonth = oDate.getMonth()+1;
//获取日期
var oDta= oDate.getDate();
//获取星期
var oDay = oDate.getDay();
var week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
//获取小时
var oHours = oDate.getHours();
//获取分钟
var oMinutes = oDate.getMinutes();
//获取秒数
var oSeconds = oDate.getSeconds();
//插入到容器中
var b = "<span>"+ oFullyear +"年</span>" + "<span>"+ oMonth +"月</span>" + "<span>"+ oDta+"日</span>" + "<span>"+ week[oDay] +"</span>" + "<span>"+ p(oHours) +"时</span>" + "<span>"+ p(oMinutes) +"分</span>" + "<span>"+ p(oSeconds) +"秒</span>";
document.getElementById('time1').innerHTML = b; }
---》如果学会了,不妨自己试一下,看看能不能做出更高级的计时哦;
最新文章
- Lesson 24 It could be worse
- 正确解读free -m
- TortoiseGit 相关操作
- C语言的选择和循环上机题目(部分)
- OpenSesame:一个能够攻击fixed-pin设备的工具
- LaTeX排版工具使用
- HDU 2514 Another Eight Puzzle(DFS)
- SignalR的坑爹细节
- RecyclerView嵌套RecyclerView
- linux service 简单易懂贴
- node-portfinder
- Unity端游无法下载资源问题
- windows Apache 环境下配置支持HTTPS的SSL证书
- 强力上攻后,在缓解期结束时,MACD将死叉,的后续情形
- galera cluster,mysql配置wsrep_notify_cmd参数,增加邮件告警
- Object-c基本语法
- Phpcms v9专题分类增加模板设置的方法
- html基础之css标签
- SpringBoot入门(1)
- Quest.Central.for.DB2.v5.0.2.4下载地址