效果图:
代码截图:(关键部分用框框标出)
源码:
<!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>
</head>
<body>
<div>
<span id="date"></span><br>
<span id="week"></span>
</div>
<script>
var showDate = document.getElementById('date') // 获取页面元素
var showWeek = document.getElementById('week') // 获取页面元素
var time = new Date()
var year = time.getFullYear() //获取年份
var month = correctDate(time.getMonth() + 1) //获取月份
var day = correctDate(time.getDate()) //获取日期
var date = "今天是" + year + "年" + month + "月" + day + "日"
var week = time.getDay() // 获取星期几,返回的是0/1/2/3/4/5/6 0代表周日
var weeks = [ "星期日","星期一","星期二","星期三","星期四","星期五","星期六"]
var toWeek = weeks[week] // 获取今日星期
showDate.innerHTML = date // 将日期显示在页面
showWeek.innerHTML = toWeek // 将星期显示在页面
/* 这是一个规范数字的函数:
当时间小于10时,在数字前面加上0,统一都是用两个数字表示,
比如3月5日就显示03月05日
*/
function correctDate(date){
if(date<10){
return '0'+date
}
return date
}
</script>
</body>
</html>
网页台历代码如下:<html><head>
<title>网页上的日期台历</title>
<STYLE>
A.menuitem {
COLOR: menutextTEXT-DECORATION: none
}
A.menuitem:hover {
COLOR: highlighttextBACKGROUND-COLOR: highlight
}
DIV.contextmenu {
BORDER-RIGHT: 2px outsetBORDER-TOP: 2px outsetZ-INDEX: 999VISIBILITY: hiddenBORDER-LEFT: 2px outsetBORDER-BOTTOM: 2px outsetPOSITION: absoluteBACKGROUND-COLOR: buttonface
}
</STYLE>
</head>
<body>
<SCRIPT language=JavaScript>
function Year_Month(){
var now = new Date()
var yy = now.getYear()
var mm = now.getMonth()+1
var cl = '<font color="#0000df">'
if (now.getDay() == 0) cl = '<font color="#c00000">'
if (now.getDay() == 6) cl = '<font color="#00c000">'
return(cl + yy + '年' + mm + '月</font>')}
function Date_of_Today(){
var now = new Date()
var cl = '<font color="#ff0000">'
if (now.getDay() == 0) cl = '<font color="#c00000">'
if (now.getDay() == 6) cl = '<font color="#00c000">'
return(cl + now.getDate() + '</font>')}
function Day_of_Today(){
var day = new Array()
day[0] = "星期日"
day[1] = "星期一"
day[2] = "星期二"
day[3] = "星期三"
day[4] = "星期四"
day[5] = "星期五"
day[6] = "星期六"
var now = new Date()
///
var cl = '<font color="#0000df">'
if (now.getDay() == 0) cl = '<font color="#c00000">'
if (now.getDay() == 6) cl = '<font color="#00c000">'
return(cl + day[now.getDay()] + '</font>')}
function CurentTime(){
var now = new Date()
var hh = now.getHours()
var mm = now.getMinutes()
var ss = now.getTime() % 60000
ss = (ss - (ss % 1000)) / 1000
var clock = hh+':'
if (mm <10) clock += '0'
clock += mm+':'
if (ss <10) clock += '0'
clock += ss
return(clock)}
function refreshCalendarClock(){
document.all.calendarClock1.innerHTML = Year_Month()
document.all.calendarClock2.innerHTML = Date_of_Today()
document.all.calendarClock3.innerHTML = Day_of_Today()
document.all.calendarClock4.innerHTML = CurentTime()}
var webUrl = webUrl
document.write('<table border="0" cellpadding="0" cellspacing="0"><tr><td>')
document.write('<table id="CalendarClockFreeCode" border="0" cellpadding="0" cellspacing="0" width="60" height="70" ')
document.write('style="position:absolutevisibility:hidden" bgcolor="#eeeeee">')
document.write('<tr><td align="center"><font ')
document.write('style="cursor:handcolor:#ff0000font-size:14ptline-height:120%" ')
if (webUrl != 'netflower'){
document.write('</td></tr><tr><td align="center"><font ')
document.write('style="cursor:handcolor:#2000fffont-size:9ptline-height:110%" ')
}
document.write('</td></tr></table>')
document.write('<table border="0" cellpadding="0" cellspacing="0" width="61" bgcolor="#C0C0C0" height="70">')
document.write('<tr><td valign="top" width="100%" height="100%">')
document.write('<table border="1" cellpadding="0" cellspacing="0" width="58" bgcolor="#FEFEEF" height="67">')
document.write('<tr><td align="center" width="100%" height="100%" >')
document.write('<font id="calendarClock1" style="font-size:7ptline-height:120%"></font><br>')
document.write('<font id="calendarClock2" style="color:#ff0000font-family:Arialfont-size:14ptline-height:120%"></font><br>')
document.write('<font id="calendarClock3" style="font-size:9ptline-height:120%"></font><br>')
document.write('<font id="calendarClock4" style="color:#100080font-size:8ptline-height:120%"><b></b></font>')
document.write('</td></tr></table>')
document.write('</td></tr></table>')
document.write('</td></tr></table>')
setInterval('refreshCalendarClock()',1000)
</SCRIPT>
</body>
</html>
HTML里面都是调用javascript才能显示可变化的内容,当前日期的代码可以这样写:
<script language=JavaScript>today=new Date()
document.write( today.getYear(),"年", today.getMonth()+1,"月", today.getDate(),"日 " )
</script>
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)