利用Javascript提取系统时间显示倒计时
利用Javascript提取系统时间显示倒计时
提问于 2013-12-05 13:51:02
我试图使用html中的javascript从浏览器中提取系统时间，并显示对未来日期的倒计时，但它只是不起作用。我有代码要展示，如果有人能帮我解决我在这里做错了什么。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Chapter 9-1 Midwest Bridal Expo</title>
<script type="text/javascript">
<!--Hide from old browsers
function countDown() {
var today = new Date()
var dayofweek = today.toLocaleString()
dayLocate = dayofweek.indexOf(" ")
weekDay = dayofweek.substring(0, dayLocate)
newDay = dayofweek.substring(dayLocate)
dateLocate = newDay.indexOf(",")
monthDate = newDay.substring(0, dateLocate + 1)
yearLocate = dayofweek.indexOf("2014")
year = dayofweek.substr(yearLocate, 4)
var bridalExpo = new Date("February 12, 2014")
var daysToGo = bridalExpo.getTime() - today.getTime()
var daysToBridalExpo = Math.ceil(daysToGo / (1000 * 60 * 60 * 24))
displayCountDown.innerHTML = "<p style='font-size:12pt; font-family:Helvetica;'>Today is " + weekDay + " " + monthDate + " " + year + ". We have " + daysToBridalExpo + " days until the Midwest Bridal Expo.</p>"
}
function scrollColor() {
styleObject = document.getElementsByTagName('html')[0].style
styleObject.scrollbarFaceColor = "#ffde5b"
styleObject.scrollbarTrackColor = "ffba00"
}
function loadInfo(myForm) {
var menuSelect = myForm.Menu.selectedIndex
var menuUrl = myForm.Menu.options[menuSelect].value + ".html"
window.location = menuUrl
}
function copyRight() {
var lastModDate = document.lastModified
var lastModDate = lastModDate.substring(0, 10)
displayCopyright.innerHTML = "<p style='font-size:12pt; font-family:Helvetica;'>Today is " + weekDay + " " + monthDate + " " + year + ". We have " + daysToBridalExpo + " days until the Midwest Bridal Expo.</p>"
}
//-->
</script>
<style type="text/css">
.center {
text-align:center;
}
img {
border:0px;
}
.left-align {
width: 50%;
left: 0;
}
.right-align {
width: 50%;
right: 0;
text-align: right;
}
table {
width: 80%;
margin-right: 10%;
margin-left: 10%;
}
td {
padding: 5px;
}
</style>
</head>
<body onLoad="scrollColor(); countDown(); copyRight()">
<div class="center">
<p>
<img src="chapter9-1banner.jpg" width="747" height="160" alt="Bridal Expo Banner">
</p>
<p style="font-family:Arial, Helvetica, sans-serif; font-size:18px; font-weight:bold;">Midwest Bridal Expo</p>
<img src="hrimg-wedding-burgundy.jpg" width="750" height="5" alt="hr">
<div id="displayCountDown"></div>
<img src="hrimg-wedding-burgundy.jpg" width="750" height="5" alt="horizonal rule">
</div>
<table class="centerTable">
<tr>
<td colspan="2">
<p style="font-weight:bold; font-family:Arial, sans-serif; font-size:14pt">Planning your summer or fall wedding</p>
<p style="font-family: 'Times New Roman', Times, serif; font-size:12pt">The Midwest Bridal Expo opens in Michigan on February 12, 2014 at the Ford Convention Center. This Expo is for all couples planning to get married in the next year, with an emphasis on those planning a summer or fall wedding. We have assembled a group of experts from all areas of wedding planning to help you plan your perfect day.</p>
</td>
</tr>
<tr>
<td colspan="2">
<p style="font-weight:bold; font-family:Arial, sans-serif; font-size:14pt">What awaits you</p>
<p style="font-family: 'Times New Roman', Times, serif; font-size:12pt">Our full day of events include seminars with keynote speakers, one-on-one sessions with professional wedding planners, and various vendors from bakers to photographers with experience at all levels of wedding planning. You will be able to sample wedding cakes, see photo galleries by acclaimed photographers, and meet with hall rental representatives. And do not forget to discuss whether you want a live band or a DJ to provide music at that all-important reception.</p>
<p style="font-family: 'Times New Roman', Times, serif; font-size:12pt">When you arrive, be sure to register for the grand prize drawing. Many of the individual vendors will also have raffles at their booths for special prizes, like free wedding cakes, free limo service, or free bouquets for the bride.</p>
</td>
</tr>
<tr>
<td class="right-align">
<img src="393px-Wedding_cake_with_pillar_supports,_2009.jpg" width="197" height="300" alt="" style="background-color: #7f1100">
</td>
<td class="left-align">
<img src="Western_wedding_dress_in_Taiwan.jpg" width="226" height="300" alt="" style="background-color: #7f1100">
</td>
</tr>
<tr>
<td colspan="2">
<form id="announceMenu">
<p style="font-weight:bolder">For more information about the Expo:
<select name="Menu" onChange="loadInfo(this.form)">
<option>Select a topic</option>
<option value="chapter09vendor">Vendor List</option>
<option value="chapter09schedule">Schedule</option>
<option value="chapter09tips">Wedding Tips</option>
</select>
</p>
</form>
</td>
<tr>
<td colspan="2">
<p style="font-weight:bold; font-family:Arial, sans-serif; font-size:14pt">Ticket Information: <span style="font-family: 'Times New Roman', Times, serif; font-size: 10pt">For ticket reservations </span><span style="font-family: 'Times New Roman', Times, serif; font-size:8pt">call 555-555-5555 x2205. Early bird ticket holders get a 10% discount..</span>
</p>
</td>
</tr>
</table>
<p></p>
<div id="displayCopyright"></div>
</body>
</html>回答 2
Stack Overflow用户
回答已采纳
发布于 2013-12-05 17:10:13
变量daysToBridalExpo是在countDown范围内声明的，因此您不能使用它的copyRight()函数，可以在countDown之前声明它，并在赋值时删除var。
var daysToBridalExpo;
function countDown() {
...
daysToBridalExpo = Math.ceil(daysToGo / (1000 * 60 * 60 * 24));
}Stack Overflow用户
发布于 2013-12-05 13:58:10
有许多jQuery插件可以做到这一点。谷歌的第一个结果是：http://keith-wood.name/countdown.html，但也有其他的结果。你应该能找到一个来做任何类型的倒计时，如果你需要一些自定义的逻辑，你也应该可以把它加进去。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20401761
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号