JavaScript 显示一个倒计时广告牌的实现示例
本文主要介绍了JavaScript 显示一个倒计时广告牌的实现示例，分享给大家，具体如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var date_in=prompt("请输入未来的年月日:");
var date_out=new Date(date_in);
var future_year=date_out.getFullYear();
var future_month=date_out.getMonth()+1;
var future_date=date_out.getDate();
var TimerID,TimerRunning;
function array_ping(){ //定义平年的月份天数数组
this.length=12;
this[0]=31;this[1]=28;this[2]=31;this[3]=30;this[4]=31;this[5]=30;
this[6]=31;this[7]=31;this[8]=30;this[9]=31;this[10]=30;this[11]=31;
}
function array_run(){ //定义闰年的月份天数数组
this.length=12;
this[0]=31;this[1]=29;this[2]=31;this[3]=30;this[4]=31;this[5]=30;
this[6]=31;this[7]=31;this[8]=30;this[9]=31;this[10]=30;this[11]=31;
}
var Clock_ping=new array_ping(); //实例化自定义方法
var Clock_run=new array_run();
function SHTime(){
var today=new Date(); //实例化类
var current_month=today.getMonth()+1; //获取本地月份1~12
var current_date=today.getDate(); //获取本地一个月中的日期值
var current_year=today.getFullYear(); //获取本地年份
var Dateleft,Monthleft,Yearleft;
if(future_year%4==0&&future_year%100!=0||future_year%400==0){
if(future_date-current_date<0){ //如果天数为负时,则加上月份对应的天数
Dateleft=Clock_run[current_month-1]-current_date+future_date;
//用当前这个月的总天数减去当前天数,再加上多余的下个月的天数
Monthleft=future_month-current_month-1;//减一是因为天数间隔不够，月份来凑
if(Monthleft<0){
Monthleft=future_month-current_month-1+12;
Yearleft=future_year-current_year-1;
}
else{
Yearleft=future_year-current_year;
}
}
else{
Dateleft=future_date-current_date;
Monthleft=future_month-current_month;
Yearleft=future_year-current_year;
}
}
else{
if(future_date-current_date<0){
Dateleft=Clock_run[current_month-1]-current_date+future_date;
Monthleft=future_month-current_month-1;
if(Monthleft<0){
Monthleft=future_month-current_month-1+12;
Yearleft=future_year-current_year-1;
}
else{
Yearleft=future_year-current_year;
}
}
else{
Dateleft=future_date-current_date;
Monthleft=future_month-current_month;
Yearleft=future_year-current_year;
}
}
document.YMD.a.value=Yearleft;
document.YMD.b.value=Monthleft;
document.YMD.c.value=Dateleft;
TimerID=setTimeout('SHTime()',1000);
TimerRunning=true;
}
function STTime(){
if(TimerRunning)
clearTimeout(TimerID); //取消定时操作
var TimerRunning=false;
}
function DownTime(){
STTime();SHTime();
}
</script>
</head>
<body bgcolor="#FFA9FF" onload="DownTime()">
<br><br>
<center>
<font color="#551CBA"><h2>倒计时</h2></font>
</center>
<hr width=300>
<br><br>
<center>
<form action="" name="YMD" method="get"> <!--get发送只有少数简短字段的小表单-->
<label for="txt" id="txt"></label>
<script>
var txt=document.getElementById("txt");
txt.innerHTML="距离"+future_year+"年"+future_month+"月"+future_date+"日只剩下";
</script>
<input type="text" name="a" size=3 value="">年
<input type="text" name="b" size=3 value="">月
<input type="text" name="c" size=3 value="">日
</form>
</center>
</body>
</html>
个人觉得，难就难在这个条件判断语句，怎么构思是个问题。
首先，我先判断是否闰年，然后判断天数间隔是否大于0，大于0的情况下，月份就不用减1，天数直接等于未来天数减去当前天数；小于0的情况下，天数等于当前月份的总天数减去当前天数再加上未来月份的天数，再判断月份间隔是否小于0，月份间隔小于0时：月份就要减1并加12，因为一个月份轮回是12，并将年份减1；月份间隔大于0时：月份间隔直接等于未来月份减当前月份。（天数指的是，一个月中过了几天）
输入的是2027/4/3，我的当前年月日为2022/4/16
第二种，计算总天数倒计时，相对来说比较简单。我想过用总天数换算成相应的年月日，但思想懒惰爱摸鱼，做出来了一半，就没进行下去。我的思路大致是，循环用总天数减去年份对应的天数，剩下天数要大于等于365或366，间隔年份++，否则循环结束。月份同理。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload=function(){
var adiv=document.getElementById("a");
var bdiv=document.getElementById("b");
var cdiv=document.getElementById("c");
var date_in=prompt("请输入未来的年月日:");
function get_time(){
var date_out=new Date(date_in);//未来日期的实例化
var date_now=new Date(); //当前日期的实例化
var interval=date_out.getTime()-date_now.getTime();//毫秒间隔
var Secondleft=interval/1000;//毫秒除以1000等于总秒数
var day=Secondleft/60/60/24;//总秒除以60等于分钟,总分钟除以60等于小时,总小时除以24等于天数
var hour=Secondleft%86400/60/60;//总天数多出来未过完天数的秒数,即取余;
//多出来那一天的秒数除以60等于分钟,分钟数再除以60即等于小时
var min=Secondleft%86400%3600/60;//除完3600是多余小时的秒数,再除以60等于分钟
var sec=Secondleft%60;
adiv.innerHTML=date_now+" 与";
bdiv.innerHTML=date_out+" 相隔";
cdiv.innerHTML=todo(day)+"天"+todo(hour)+"时"+todo(min)+"分"+todo(sec)+"秒";
}
get_time();//调用函数
setInterval(get_time,1000);
function todo(num){
if(num<10){
return '0'+Math.floor(num);
}
else{
return Math.floor(num);
}
}
}
</script>
</head>
<body style="background-color:lightblue;">
<div id="a"></div><div id="b"></div><div id="c"></div>
</body>
</html>
输入的是2025/4/18，我的当前日期为2022/4/18
到此这篇关于JavaScript 显示一个倒计时广告牌的实现示例的文章就介绍到这了,更多相关JavaScript 倒计时广告牌内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
JS实现倒计时(天数、时、分、秒)
本文实例为大家解析了JS实现倒计时的详细过程,供大家参考,具体内容如下 注释: parseInt() 函数可解析一个字符串,并返回一个整数. 语法: parseInt(string, radix) 例: parseInt("10"); //返回 10 parseInt("19",10); //返回 19 (10+9) parseInt("11",2); //返回 3 (2+1) parseInt("17",8); //返回 1
-
JS 倒计时实现代码(时、分，秒)
JS实现倒计时(时.分,秒) var interval = 1000; function ShowCountDown(year,month,day,divname) { var now = new Date(); var endDate = new Date(year, month-1, day); var leftTime=endDate.getTime()-now.getTime(); var leftsecond = parseInt(leftTime/1000); //var day1=
-
2种简单的js倒计时方式
一般倒计时的时间都是后台传来的然后渲染到页面,这里有2个简单的倒计时方式 //带天数的倒计时 function countDown(times){ var timer=null; timer=setInterval(function(){ var day=0, hour=0, minute=0, second=0;//时间默认值 if(times > 0){ day = Math.floor(times / (60 * 60 * 24)); hour = Math.floor(times / (
-
原生JS实现简单的倒计时功能示例
本文实例讲述了原生JS实现简单的倒计时功能.分享给大家供大家参考,具体如下: 1.第一种 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net JS倒计时</title> </head> <body> <div id="div"></div> <scr
-
最全面的JS倒计时代码
第一种:精确到秒的javascript倒计时代码 HTML代码: <form name="form1"> <div align="center" align="center"> <center>离2010年还有:<br> <input type="textarea" name="left" size="35" style="
-
一个不错的js html页面倒计时可精确到秒
一个不错的js html页面倒计时可精确到秒,很简单,但和实用 <!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <DIV id="CountMsg" class="HotDate"> <span id="t_d">00天</span>
-
javascript倒计时效果代码，可以方便参数调用
我们-www.jb51.net 倒记时效果 "+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒"; } else { document.getElementById(time_id[i]).innerHTML=daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒&
-
js几秒以后倒计时跳转示例
复制代码 代码如下: <html> <head> <title>出错啦~~~</title> <link href="css/login1.css" mce_href="css/login1.css" rel="stylesheet" type="text/css" /> <script language="javascript" type=
-
JS实现十分钟倒计时代码实例
编写JS倒计时代码需要用到很多JavaScript知识,比如:if函数,Math.floor,定时器setInterval等等,如有不清楚的小伙伴可以参考PHP中文网的相关文章,或者访问 JavaScript视频教程. 举例:10分钟考试倒计时,当时间仅剩五分钟时,提醒考试仅剩5分钟,时间结束时,提示考试结束.具体代码如下: HTML部分: <body> <div id="timer"></div> <div id="warring&
-
JavaScript 显示一个倒计时广告牌的实现示例
本文主要介绍了JavaScript 显示一个倒计时广告牌的实现示例,分享给大家,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi
-
使用纯JavaScript封装一个消息提示条功能示例详解
目录 介绍 思路&布局 操作逻辑 完整代码 介绍 一个类似Element UI.Ant-Design UI等 UI 框架的消息提示功能,方便在任何网页环境中直接调用函数使用:区别在不依赖 js 及 css 引用,而是使用纯 js 进行封装实现,代码更精简,同时保持和 UI 框架一样的视觉效果(可自行修改成自己喜欢的样式) 代码仓库 在线预览效果(点击[登录].[点击复制]按钮时触发提示效果) 思路&布局 先来写单个提示条,并实现想要的过渡效果,最后再用逻辑操作输出节点即可:这里不需要父节点
-
用javascript对一个json数组深度赋值示例
<!DOCTYPE HTML> <html> <head> <title>test1</title> </head> <body> <script> var arr={ "name":"zhansan", "age":23, "address":{ "city":"beijing", &quo
-
javascript显示倒计时控制按钮的简单实现
html: <a><span id="sendAgain" onclick="sendEmail()">2.再次发送激活邮件</span></a> (span控制点击事件,disabled无效) js: /*发送邮件*/ function sendEmail(){//发送邮箱认证邮件 var me = $("#sendAgain"); me.time = 60; (function() { if (
-
JavaScript生成一个不重复的ID的方法示例
本文介绍了JavaScript生成一个不重复的ID的方法示例,分享给大家,具体如下: /** * 生成一个用不重复的ID */ function GenNonDuplicateID():String{ } 先看看下面的几个方法 1.生成[0,1)的随机数的Math.random,例如 //我这次运行生成的是:0.5834165740043102 Math.random() 2.获取当前时间戳Date.now //现在时间戳是1482645606622 Date.now() = 152100930
-
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
本文实例讲述了JavaScript求一个数组中重复出现次数最多的元素及其下标位置.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数组重复次数</title> </head> <body> <script language="Jav
-
JavaScript实现时间倒计时跳转(推荐)
1. setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. setTimeout() 只执行 code 一次.如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout(). <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
-
Android 使用jQuery实现item点击显示或隐藏的特效的示例
本文介绍了Android 使用jQuery实现item点击显示或隐藏的特效的示例,分享给大家,具体如下: 效果图 分析 上图中的功能在很多APP上都可能用到过,例如app的帮助界面,告诉用户如何使用APP 一般的实现方式都是通过ListView来实现的,实际上此类需求非常简单,完全可以用WebView加载HTML来实现 抽屉样式的显示隐藏特效可以使用jQuery来实现,一个函数就可以搞定 实现 集成jQuery 网页中需要使用到jQuery,最新版本可以去官网下载 http://jquery.c
-
JavaScript实现页面动态验证码的实现示例
引言: 现在很多在用户登陆或注册的时候为了防止程序攻击,加入了动态验证的技术,一般是让用户输入随即生成的验证码来实现.我自己写了一个没有跟后台交互的,就在前端验证,发出来给大家看看. 效果图: 实现思路: 把数字和字母放到一个数组中,通过随机的方式取得数组下标,总共取4个组成验证码: 把验证码渲染出来(一个一个的渲染): 绘制一定数量的干扰线,随机颜色: 输入验证码,输入4位以后去验证,正确显示钩,错误显示叉并且刷新验证码. 编写构造函数 文本构造函数 //文字的构造函数 function Te
-
Android实现显示和隐藏密码功能的示例代码
在前端中我们知道用javascript就可以可以很容易实现,那么在Android中怎么实现这个功能呢? Java代码 package com.example.test2; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.text.method.HideReturnsTransformationMethod; import android.text.method.Pa