js显示剩下的时间
显示当前时间距离17点30剩余多长时间<script>functionshow(){vardate=newDate();varnow="";now=date.getFul...
显示当前时间距离17点30剩余多长时间
<script>
function show(){
var date = new Date();
var now = "";
now = date.getFullYear()+"年";
now = now + (date.getMonth() + 1)+"月";
now = now + date.getDate()+"日";
now = now + date.getHours()+"时";
now = now + date.getMinutes()+"分";
now = now + date.getSeconds()+"秒";
document.getElementById("NowTime").innerHTML = now;
setTimeout("show()",1000);
}
</script>
这是我写的当前时间的js代码，求大神告知该怎么写距离17点30剩余时间的代码，也是像当前时间一样一秒一秒走，只不过是一秒秒减少 展开
<script>
function show(){
var date = new Date();
var now = "";
now = date.getFullYear()+"年";
now = now + (date.getMonth() + 1)+"月";
now = now + date.getDate()+"日";
now = now + date.getHours()+"时";
now = now + date.getMinutes()+"分";
now = now + date.getSeconds()+"秒";
document.getElementById("NowTime").innerHTML = now;
setTimeout("show()",1000);
}
</script>
这是我写的当前时间的js代码，求大神告知该怎么写距离17点30剩余时间的代码，也是像当前时间一样一秒一秒走，只不过是一秒秒减少 展开
4个回答
展开全部
<html>
<head>
<title></title>
<script type="text/javascript" language="javascript">
function getTime() {//js函数，定期执行的函数主体
var dateTime = new Date();//新建系统时间的对象
var hour = formatTime(dateTime.getHours());//获取小时并格式化，格式化函数formatTime()，下同
var minute = formatTime(dateTime.getMinutes());//获取分
var second = formatTime(dateTime.getSeconds());//获取秒
// var millisecond = dateTime.getMilliseconds();//获取毫秒
var code = "当前时间是：" + hour + ":" + minute + ":" + second;//+ " " + millisecond;//第一个div的内容(数字时钟)
var codeChinese = "当前时间是：" + formatChinese(hour) + "时" + formatChinese(minute) + "分" + formatChinese(second) + "秒";//第二个div的内容(中文时钟)
document.getElementById("divTime").innerHTML = code;//第一个div内容填充
document.getElementById("divTimeChinese").innerHTML = codeChinese;//第二个div内容填充
document.getElementById("monDigitalClock").innerHTML = makeMonCode(hour.toString() + ":" + minute.toString() + ":" + second.toString()) + blockEmpty();//+ makeMonCode(millisecond.toString());
updateLatestTime();//更新剩余时间
}
function formatTime(num) {//格式化数字，小于10时在数字前添加0
if (num < 10) {
return "0" + num;
}
else {
return num;
}
}
function formatChinese(num) {//中文格式处理
var str = String(num);
if (str.length == 1) {//一位数的情况，直接返回中文
return formatSingleNumber(str);
}
else {//两位数的情况
var mid = "十";
var top = str.substr(0, 1);//第一位
var btn = str.substr(1, 2);//第二位
return (formatSingleNumber(top) + mid + formatSingleNumber(btn)).replace("零十", "零").replace("十零", "十").replace("零零", "零").replace("一十", "十");//使用formatSingleNumber函数转换成中文并将不符合中文数字表示方法的替换一下
}
}
function formatSingleNumber(num) {//单个数字转化成中文
return num.replace("1", "一").replace("2", "二").replace("3", "三").replace("4", "四").replace("5", "五").replace("6", "六").replace("7", "七").replace("8", "八").replace("9", "九").replace("0", "零");
}
setInterval("getTime();", 1000);//定时刷新，每毫秒刷新一次
//模拟时钟代码
function buidlPointArea(num) {//将数字对应的点阵拼接成图案
var code = "<div class='singleNumber'>";
for (var i = 1; i < 6; i++) {
for (var j = 1; j < 5; j++) {
code += createSinglePoint(i + "_" + j, num);
}
}
code += "</div>";
return code;
}
function createSinglePoint(id, num) {//数字对应的黑点
var array0 = new Array("1_1", "1_2", "1_3", "2_1", "2_3", "3_1", "3_3", "4_1", "4_3", "5_1", "5_2", "5_3");//数字0的点阵，下同
var array1 = new Array("1_3", "2_3", "3_3", "4_3", "5_3");
var array2 = new Array("1_1", "1_2", "1_3", "2_3", "3_1", "3_2", "3_3", "4_1", "5_1", "5_2", "5_3");
var array3 = new Array("1_1", "1_2", "1_3", "2_3", "3_1", "3_2", "3_3", "4_3", "5_1", "5_2", "5_3");
var array4 = new Array("1_1", "1_3", "2_1", "2_3", "3_1", "3_2", "3_3", "4_3", "5_3");
var array5 = new Array("1_1", "1_2", "1_3", "2_1", "3_1", "3_2", "3_3", "4_3", "5_1", "5_2", "5_3");
var array6 = new Array("1_1", "1_2", "1_3", "2_1", "3_1", "3_2", "3_3", "4_1", "4_3", "5_1", "5_2", "5_3");
var array7 = new Array("1_1", "1_2", "1_3", "2_3", "3_3", "4_3", "5_3");
var array8 = new Array("1_1", "1_2", "1_3", "2_1", "2_3", "3_1", "3_2", "3_3", "4_1", "4_3", "5_1", "5_2", "5_3");
var array9 = new Array("1_1", "1_2", "1_3", "2_1", "2_3", "3_1", "3_2", "3_3", "4_3", "5_1", "5_2", "5_3");
var numArr = new Array();
numArr[0] = array0;
numArr[1] = array1;
numArr[2] = array2;
numArr[3] = array3;
numArr[4] = array4;
numArr[5] = array5;
numArr[6] = array6;
numArr[7] = array7;
numArr[8] = array8;
numArr[9] = array9;
var cls = "whitePoint";
for (var i = 0; i < numArr[num].length; i++) {
if (id == numArr[num][i]) {
cls = "blackPoint";
}
}
return "<div id='" + id + "' class='" + cls + "'></div>";
}
function blockEmpty() {//空格代码
return "<div class='singleNumber'></div>";
}
function blockM() {//冒号的代码
var code = "";
code += "<div class='singleNumber'><div class='whitePoint'></div>";
code += "<div class='whitePoint'></div>";
code += "<div class='whitePoint'></div>";
code += "<div class='whitePoint'></div>";
code += "<div class='whitePoint'></div>";
code += "<div class='blackPoint'></div>";
code += "<div class='whitePoint'></div>";
code += "<div class='whitePoint'></div>";
code += "<div class='whitePoint'></div>";
code += "<div class='whitePoint'></div>";
code += "<div class='whitePoint'></div>";
code += "<div class='whitePoint'></div>";
code += "<div class='whitePoint'></div>";
code += "<div class='blackPoint'></div>";
code += "<div class='whitePoint'></div>";
code += "<div class='whitePoint'></div>";
code += "<div class='whitePoint'></div>";
code += "<div class='whitePoint'></div>";
code += "<div class='whitePoint'></div>";
code += "<div class='whitePoint'></div></div>";
return code;
}
function makeMonCode(totalCode) {//生成模拟的数字时钟代码
var finalCode = "";
for (var i = 0; i < totalCode.length; i++) {//每个字符分别转换
if (isNaN(totalCode[i])) {//非数字字符，例子中只有冒号
if (totalCode[i] == ":") {
finalCode += blockM();//冒号的代码，用blockM()函数生成
}
}
else {
finalCode += buidlPointArea(totalCode[i]);//数字的代码，用buildPointArea()函数生成
}
}
return finalCode;
}
function updateLatestTime() {//更新剩余时间
var setHour = document.getElementById("sltHour").value;//获取选择的小时值
var setMin = document.getElementById("sltMin").value;//获取选择的分值
var setSecond = document.getElementById("sltSecond").value;//获取选择的秒值
var time = new Date();//获取系统时间
var nowHour = time.getHours();//当前时间小时值
var nowMin = time.getMinutes();//当前时间分值
var nowSecond = time.getSeconds();//当前时间秒值
var viewHour = setHour - nowHour;//剩余小时
var viewMin = setMin - nowMin;//剩余分钟
var viewSecond = setSecond - nowSecond;//剩余秒
if (viewSecond < 0) {//剩余秒小于0时，借位
viewSecond += 60;
viewMin -= 1;
}
if (viewMin < 0) {//剩余分小于0时，借位
viewMin += 60;
viewHour -= 1;
}
if (viewHour < 0) {//剩余小时小于0时，借位
viewHour += 24;
}
document.getElementById("divLatestTime").innerHTML = "剩余时间为：" + viewHour + "时" + viewMin + "分" + viewSecond + "秒";//填充
if (viewHour == 0 && viewMin == 0 && viewSecond == 0) {//到点提示
alert("到点了！");
}
}
function createSelect() {//生成选择框代码
var code = "";
code += "请选择闹钟时间：<select id='sltHour' onchange='updateLatestTime()'>";
for (var i = 1; i < 25; i++) {
code += "<option value='" + i + "'>" + i + "</option>";
}
code += "</select>时";
code += "<select id='sltMin' onchange='updateLatestTime()'>";
for (var k = 1; k < 61; k++) {
code += "<option value='" + k + "'>" + k + "</option>";
}
code += "</select>分";
code += "<select id='sltSecond' onchange='updateLatestTime()'>";
for (var j = 1; j < 61; j++) {
code += "<option value='" + j + "'>" + j + "</option>";
}
code += "</select>秒";
document.getElementById("divAlert").innerHTML = code;
}
</script>
<style type="text/css">
body {
background-color: #FFFFFF;
}
.clsTime {
width: 600px;
height: 50px;
font-size: 30px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
}
.whitePoint {
width: 10px;
height: 10px;
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
float: left;
}
.blackPoint {
width: 10px;
height: 10px;
background-color: #000000;
margin: 0px;
padding: 0px;
float: left;
}
.clsMonDigitalClock {
margin-left: auto;
margin-right: auto;
width: 480px;
height: 50px;
background-color: #FFFFFF;
}
.singleNumber {
width: 40px;
height: 50px;
float: left;
font-size: 8px;
}
.clsAlert {
width: 400px;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
}
.clsLatestTime {
width: 400px;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body onload="createSelect();">
<div id="divTime" class="clsTime">loading....</div>
<div id="divTimeChinese" class="clsTime">loading....</div>
<div id="monDigitalClock" class="clsMonDigitalClock"></div>
<div id="divAlert" class="clsAlert"></div>
<div id="divLatestTime" class="clsLatestTime"></div>
</body>
</html>
之前做着玩的，有你说到的功能，有兴趣看看。代码存为html即可。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
//参考代码如下:
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function getTime() {
now = new Date();
y2k = new Date("Jan 1 2020 14:00:00");
days = (y2k - now) / 1000 / 60 / 60 / 24;
daysRound = Math.floor(days);
hours = (y2k - now) / 1000 / 60 / 60 - (24 * daysRound);
hoursRound = Math.floor(hours);
minutes = (y2k - now) / 1000 /60 - (24 * 60 * daysRound) - (60 * hoursRound);
minutesRound = Math.floor(minutes);
seconds = (y2k - now) / 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound);
secondsRound = Math.round(seconds);
sec = (secondsRound == 1) ? " second." : " seconds.";
min = (minutesRound == 1) ? " minute" : " minutes, ";
hr = (hoursRound == 1) ? " hour" : " hours, ";
dy = (daysRound == 1) ? " day" : " days, "
document.timeForm.input1.value = "剩余时间: " + daysRound + dy + hoursRound + hr + minutesRound + min + secondsRound + sec;
newtime = window.setTimeout("getTime();", 1000);
}
// End -->
</script>
<body bgcolor="#fef4d9" onLoad="getTime()">
距离: Jan 1, 2020 2:00:00 p.m.
<form name=timeForm>
<input type=text name=input1 size=70 border-style="none" style="border-bottom: 0px solid; border-left: 0px solid;border-right: 0px solid;border-top: 0px solid;font:12px arial, helvetica,sans-serif">
</form>
</body>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
function show(){
var date = new Date();
var d=Date.parse([date.getFullYear(),(date.getMonth() + 1),date.getDate()].join('-')+' 9:30')-date.getTime();
date.setTime(d);
var now = "";
now = (date.getFullYear()-1970)+"年";
now = now + (date.getMonth())+"月";
now = now + (date.getDate()-1)+"日";
now = now + date.getHours()+"时";
now = now + date.getMinutes()+"分";
now = now + date.getSeconds()+"秒";
document.getElementById("NowTime").innerHTML = now;
setTimeout("show()",1000);
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>MODEL PAGE</title>
<script type="text/javascript">
function countdown ()
{
var end = new Date ();
end.setHours(17);
end.setMinutes(30);
end.setSeconds(0);
var now = new Date ();
var m = Math.round ((end - now) / 1000);
var day = parseInt (m / 24 / 3600);
var hours = parseInt ((m % (3600 * 24)) / 3600);
var minutes = parseInt ((m % 3600) / 60);
var seconds = m % 60;
if (m < 0)
{
document.getElementById ("clock").innerHTML = '0';
return;
}
document.getElementById ("clock").innerHTML = "离开始还剩" + day + "天" + hours + "小时" + minutes + "分钟" + seconds
+ "秒";
setTimeout ('countdown()', 1000);
}
window.onload = function ()
{
countdown ();
}
</script>
</head>
<body>
<span id="clock"></span>
</body>
</html>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
