码迷,mamicode.com
首页 > Web开发 > 详细

jsp时钟

时间:2017-03-13 22:44:32      阅读:261      评论:0      收藏:0      [点我收藏+]

标签:jsp 时钟

网页中显示一个时钟,实时刷新

//web网页显示一个时钟,实时刷新

<%@ page language="java" contentType="text/html; utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<link href="${pageContext.request.contextPath}/css/clock.css" rel="stylesheet">
</head>
<body>
<div style="width: 100%; azimuth: center; text-align: center;">
<input type="text" id="time">
</div>
<div style="width: 100%; text-align: center; margin-top: 20px;">
<input type="button" onclick="" value="定时">
</div>
<script>
function timeCount() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth();
var day = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
if (hour < 10) {
hour = "0" + hour;
}
if (minute < 10) {
minute = "0" + minute;
}
if (second < 10) {
second = "0" + second;
}
var time = hour + ":" + minute + ":" + second;
document.getElementById("time").value = time;
}
window.setInterval(timeCount, 1000);
</script>
</body>
</html>


window.setInterval(timeCount, 1000);//计时器


//引用CSS样式 clock.css


//在代码中添加引用

<link href="${pageContext.request.contextPath}/css/clock.css" rel="stylesheet">
@CHARSET "UTF-8";
input
{
background: #EEE8CD;
size: 24px;
color: red;
text-align:center;
border-style: none;
}


效果图

技术分享















本文出自 “爬过山见过海” 博客,请务必保留此出处http://670176656.blog.51cto.com/4500575/1905901

jsp时钟

标签:jsp 时钟

原文地址:http://670176656.blog.51cto.com/4500575/1905901

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!