优雅转身

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
展示当前时间， 记录签到时长 
<%@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>

　　

posted on 2022-05-20 09:35  优雅转身  阅读(54)  评论(0)    收藏  举报