展示當前時間， 記錄簽到時長
阿新 • • 發佈：2022-05-20
<%@page import="com.util.SessionUtil"%>
<%@page import="com.util.Pagination"%>
<%@page import="java.util.Map"%>
<%@page import="java.util.List"%>
<%@page import="com.util.DbUtil"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<script type="text/javascript" src="../js/js.js"></script>
<style type="text/css">
<!--
body {
margin-left: 3px;
margin-top: 0px;
margin-right: 3px;
margin-bottom: 0px;
}
.STYLE1 {
color: #e1e2e3;
font-size: 12px;
}
.STYLE6 {color: #000000; font-size: 12; }
.STYLE10 {color: #000000; font-size: 12px; }
.STYLE19 {
color: #344b50;
font-size: 12px;
}
.STYLE21 {
font-size: 12px;
color: #3b6375;
}
.STYLE22 {
font-size: 12px;
color: #295568;
}
-->
</style>
<script type="text/javascript">
function add() {
window.location.href = "course_add.jsp";
}
</script>
</head>
<%
String sid = SessionUtil.getUserInfo(request, response).getId();
String role = SessionUtil.getUserInfo(request, response).getRole();
%>
<body>
<button onclick="start()">簽到</button>
<button onclick="end()">簽退</button>
<select id="courseselect">
<option value="">請選擇課程。。。</option>
<option value="數學">數學</option>
<option value="英語">英語</option>
<option value="語文">語文</option>
<option value="政治">政治</option>
</select>
<form action="StuKaoQinServlet?method=add" method="post" name="form" id="form">
<input type="hidden" id="account" name="account" value="${userInfo.account }"/>
<input type="hidden" id="course" name="course"/>
<input type="hidden" id="startTime" name="startTime"/>
<input type="hidden" id="endTime" name="endTime"/>
<input type="hidden" id="longTime" name="longTime"/>
</form>
<div>
<span>當前時間：</span><span id="timer"></span>
<span style="margin-left: 50px;">上課時間：</span><span id="timer2"></span>
</div>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="30"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="24" bgcolor="#353c44"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="6%" height="19" valign="bottom"><div align="center"><img src="../images/tb.gif" width="14" height="14" /></div></td>
<td width="94%" valign="bottom"><span class="STYLE1"> 基本資訊列表</span></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td>
<form name="form" id="form">
<table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#a8c7ce">
<tr>
<td height="20" bgcolor="d3eaef" class="STYLE6"><div align="center"><span class="STYLE10">編號</span></div></td>
<td height="20" bgcolor="d3eaef" class="STYLE6"><div align="center"><span class="STYLE10">學生</span></div></td>
<td height="20" bgcolor="d3eaef" class="STYLE6"><div align="center"><span class="STYLE10">課程名稱</span></div></td>
<td height="20" bgcolor="d3eaef" class="STYLE6"><div align="center"><span class="STYLE10">簽到時間</span></div></td>
<td height="20" bgcolor="d3eaef" class="STYLE6"><div align="center"><span class="STYLE10">簽退時間</span></div></td>
<td height="20" bgcolor="d3eaef" class="STYLE6"><div align="center"><span class="STYLE10">時長</span></div></td>
</tr>
<%
String sql = "select * from t_stu_kaoqin";
List<Map<String, Object>> list = DbUtil.find(sql);
Map<String, Object> map = null;
for (int i = 0; i < list.size(); i++) {
map = (Map<String, Object>)list.get(i);
%>
<tr>
<td height="20" bgcolor="#FFFFFF" class="STYLE6"><div align="center"><span class="STYLE19"><%=map.get("id") %></span></div></td>
<td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center"><%=map.get("account") %></div></td>
<td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center"><%=map.get("course") %></div></td>
<td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center"><%=map.get("startTime") %></div></td>
<td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center"><%=map.get("endTime") %></div></td>
<td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center"><%=map.get("longTime") %></div></td>
</tr>
<%
}
%>
</table>
</form>
</td>
</tr>
</table>
<script type="text/javascript">
var time = 0;
var sh;
var flag = false;
function start() {
var obj=document.getElementById('courseselect');
var index=obj.selectedIndex; //序號，取當前選中選項的序號
var courseval = obj.options[index].value;
if(!courseval) {
alert('請選擇課程');
return;
}
document.getElementById('startTime').value = getnow();
document.getElementById('course').value = courseval;
setInterval(function(){
flag = true;
var now = new Date();
var year = now.getFullYear(); //得到年份
var month = now.getMonth() + 1;//得到月份
var date = now.getDate();//得到日期
// var day = now.getDay();//得到周幾
var hour = now.getHours();//得到小時數
var minute = now.getMinutes();//得到分鐘數
var second = now.getSeconds();//得到秒數
var html = year + "年" + month + "月" + date + "日 " + hour + "時"
+ minute + "分" + second + "秒";
document.getElementById('timer').innerHTML=html;
/*vm.datetime = html;
vm.username = localStorage.getItem("username");
if(lem) {
$("#username").html("").append(lem)
} else {
$("#username").html("");
} */
},1000)
sh=setInterval(function(){
time=time+1;
document.getElementById('timer2').innerHTML= formatSecond(time);
},1000)
}
function end() {
flag = false;
document.getElementById('endTime').value = getnow();
document.getElementById('longTime').value = formatSecond(time);;
clearInterval(sh);
document.getElementById("form").submit();
}
function getnow() {
var now = new Date();
var year = now.getFullYear(); //得到年份
var month = now.getMonth() + 1;//得到月份
var date = now.getDate();//得到日期
// var day = now.getDay();//得到周幾
var hour = now.getHours();//得到小時數
var minute = now.getMinutes();//得到分鐘數
var second = now.getSeconds();//得到秒數
var html = year + "年" + month + "月" + date + "日 " + hour + "時"
+ minute + "分" + second + "秒";
return html;
}
function formatSecond(second) {
const days = Math.floor(second / 86400);
const hours = Math.floor((second % 86400) / 3600);
const minutes = Math.floor(((second % 86400) % 3600) / 60);
const seconds = Math.floor(((second % 86400) % 3600) % 60);
const forMatDate = {
days: days,
hours: hours,
minutes: minutes,
seconds: seconds
};
return forMatDate.hours + " 時 " + forMatDate.minutes + " 分 " + forMatDate.seconds + " 秒" ;
}
</script>
</body>
</html>