使用JavaScript写一个简单的万年历(动态的电子时钟)

最近一直在自学JavaScript,前些日子写了一个动态的电子钟,过程还是比较简单的,主要使用了JavaScript的内置对象——Date对象,它的常用方法包括以下几个:

  • getDate():返回一个月中的一天,取值范围为1~31
  • getDay():返回星期中的一天,取值为0~6
  • getHours():返回小时数,取值0~23
  • getMinutes():返回分钟数,取值0~59
  • getSeconds():返回秒钟数,取值0~59
  • getMonth():返回月份,取值0~11,一月对应0,十二月对应11,类似于数组的索引
  • getFullYear():返回4位数年份
  • getTime():返回自某一时刻以来的毫秒数

除此之外,还用到了setTimeout()定时函数和DOM对象方法document.getElementByID()以及它的innerHTML属性。

下面是代码部分,CSS采用内部样式的方法,JavaScript放置在单独的function1.js文件中

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>万年历</title>
	<script src="js/function1.js" type="text/javascript"></script>
	<style>
		*{
			padding: 0;
			margin: 0;
		}
		#_Clock{
			width: 600px;
			height: 100px;
			margin: 100px auto;
			border: 2px solid cadetblue;
		}
		#Date{
			height: 40px;
			line-height: 40px;
			font-size: 18px;
			text-align: center;
		}
		#Time{
			height: 60px;
			line-height: 60px;
			font-size: 36px;
			text-align: center;
		}
	</style>
</head>
<body onload="showDate()">
	<div id="_Clock">
		<div id="Date"></div>
		<div id="Time"></div>
	</div>
</body>
</html>

下面是JavaScript部分(function1.js)

//这个函数用户刷新页面,每1000毫秒(1秒)刷新一次
function showDate(){
	var myShow=setInterval("getDate()",1000);
}
function getDate() {

	/*此处实例化Date对象必须要在这个函数中进行*/
	var myDate=new Date();

	var _year=myDate.getFullYear();

	/*0表示1月,11表示12月*/
	var _month=myDate.getMonth()+1;

	var _date=myDate.getDate();
	var _weekDay=transToTrueDay(myDate.getDay());
	var _hour=myDate.getHours();
	var _minute=myDate.getMinutes();
	var _second=myDate.getSeconds();

	if(_minute<10){
		//如果分钟数为个位数,则在其前面加个0
		_minute="0"+_minute;
	}

	if(_second<10){
		//如果秒钟数为个位数,则在其前面加个0
		_second="0"+_second;
	}

	document.getElementById("Date").innerHTML="<p>"+_year+"年&nbsp;"+_month+"月&nbsp;"+_date+"号&nbsp;&nbsp;&nbsp;"+_weekDay+"</p>";
	document.getElementById("Time").innerHTML="<p>"+_hour+":"+_minute+":"+_second+"</p>";
}

//将星期几的索引值转为文字表述,0对应星期一,6对应星期日
function transToTrueDay(weekNum) {
	switch (weekNum) {
		case 0:
			return "星期日";
		case 1:
			return "星期一";
		case 2:
			return "星期二";
		case 3:
			return "星期三";
		case 4:
			return "星期四";
		case 5:
			return "星期五";
		case 6:
			return "星期六";
	}
}

最后得到的效果图大致如下,欢迎各位大佬批评指正~

相关推荐
<%@page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage=""%> <%@page language="java" import="java.util.*"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <jsp:useBean id="connection" scope="request" class="com.JDBConnection"/> <title>带有备忘录的万年历</title> <link href="css/style.css" type="text/css" rel="stylesheet"> <meta http-equiv="refresh" content="60"> </head> <%!String days[];%> <body> <% days = new String[42]; for (int i = 0; i < 42; i++) { days[i] = ""; } %> <% GregorianCalendar currentDay = new GregorianCalendar(); int today = currentDay.get(Calendar.DAY_OF_MONTH); int month = currentDay.get(Calendar.MONTH); int year = currentDay.get(Calendar.YEAR); if (request.getParameter("month") != null && request.getParameter("year") != null) { int requestMonth = Integer.parseInt(request.getParameter("month")); int requestYear = Integer.parseInt(request.getParameter("year")); if (requestYear == currentDay.get(Calendar.YEAR) && requestMonth == month) {} else if (requestMonth == -1) { month = 11; year = requestYear - 1; } else if (requestMonth == 12) { month = 0; year = requestYear + 1; } else { month = requestMonth; year = requestYear; } } Calendar thisMonth = Calendar.getInstance(); thisMonth.set(Calendar.MONTH, month); thisMonth.set(Calendar.YEAR, year); thisMonth.setFirstDayOfWeek(Calendar.SUNDAY); thisMonth.set(Calendar.DAY_OF_MONTH, 1); int firstIndex = thisMonth.get(Calendar.DAY_OF_WEEK) - 1; int maxIndex = thisMonth.getActualMaximum(Calendar.DAY_OF_MONTH); for (int i = 0; i < maxIndex; i++) { days[firstIndex + i] = String.valueOf(i + 1); } %> <body> <% String allShowTime = year + "." + month + "." + today + "." + currentDay.get(Calendar.HOUR_OF_DAY) + "." + currentDay.get(Calendar.MINUTE); String sql = "select * from tb_calendar where showtime='" + allShowTime + "'"; ResultSet rs=connection.executeQuery(sql); try{ while(rs.next()){ %> <script language="javascript" type="">alert("<%=rs.getString("content")%>");</script> <% } }catch(Exception e){} %> <table width="294" height="32" border="0" align="center" cellpadding="0" cellspacing="0"> <tr align="center"> <td background="Image/board_left.gif"> <b> <font color="#FFFFFF"><%=year%> 年 <%=month+1%> 月 </font> </b> </td> </tr> </table> <table width="294" height="81" border="0" align="center"> <div align=center> <tr> <td height="16">周日</td> <td>周一</td> <td>周二</td> <td>周三</td> <td>周四</td> <td>周五</td> <td>周六</td> </tr> <%for (int j = 0; j < 6; j++) { %> <tr> <%for (int i = j * 7; i < (j + 1) * 7; i++) { String showtime = String.valueOf(year) + "." + String.valueOf(month) + "." + days[i]; %> <%if ((i - firstIndex + 1) == today) { %> <td width="27" height="16" align="center" bgcolor="#9CA6C6"> <font color="#FFFFFF"> <b> <a href="#" onClick="window.open('insertInformation.jsp?showtime=<%=showtime%>','','width=500,height=250');"><%=days[i]%> </a> </b> </font> </td> <% } else { %> <td width="27" height="16" align="center"> <a href="#" onClick="window.open('insertInformation.jsp?showtime=<%=showtime%>','','width=500,height=250');"><%=days[i]%> </a> </td> <% } %> <%} %> </tr> <%} %> </div> </table> <table width="294" height="0" border="0" align="center" cellpadding="0" cellspacing="0"> <tr align="center"> <td width="98" height="22"> <input type="button" name="Submit1" value="上月" onClick="javascript:window.location.href='index.jsp?month=<%=month-1%>&year=<%=year%>'"> </td> <td width="98"> <%if (year != currentDay.get(Calendar.YEAR) || month != currentDay.get(Calendar.MONTH)) { %> <input type="button" name="Submit2" value="返回当前月" onClick="javascript:window.location.href='index.jsp'"> <%} %> </td> <td width="98"> <input type="button" name="Submit3" value="下月" onClick="javascript:window.location.href='index.jsp?month=<%=month+1%>&year=<%=year%>'"> </td> </tr> </table> </body> </html>
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页