网页版四则运算
把程序变成一个网页程序，用户通过设定参数，就可以得到各种题目，并可实现在线答题并评判。
代码：
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<title>Insert title here</title> |
|
|
<title>index.html</title> |
|
|
<style type="text/css"> |
|
|
/*设置超链接样式*/ |
|
|
table |
|
|
{ |
|
|
border-collapse: collapse; |
|
|
border-spacing: 0; |
|
|
} |
|
|
a |
|
|
{ |
|
|
color: #5086a5; |
|
|
text-decoration: none; |
|
|
font-size: 12px; |
|
|
} |
|
|
a:hover |
|
|
{ |
|
|
color: #5086a5; |
|
|
text-decoration: underline; |
|
|
font-size: 12px; |
|
|
} |
|
|
a:visited |
|
|
{ |
|
|
color: #5086a5; |
|
|
font-size: 12px; |
|
|
} |
|
|
/*整个tab层居中，宽度为600px*/ |
|
|
#tabDiv |
|
|
{ |
|
|
600px; |
|
|
margin:1em auto; |
|
|
padding-bottom: 10px; |
|
|
border-right: #b2c9d3 1px solid; |
|
|
border-top: #b2c9d3 1px solid; |
|
|
border-left: #b2c9d3 1px solid; |
|
|
border-bottom: #b2c9d3 1px solid; |
|
|
background: #ffffff; |
|
|
} |
|
|
/*tab头的样式*/ |
|
|
#tabsHead |
|
|
{ |
|
|
padding-left: 0px; |
|
|
height: 26px; |
|
|
background-color: #e8f7fc; |
|
|
font-size: 1em; |
|
|
margin: 1px 0px 0px; |
|
|
color: #5086a5; |
|
|
line-height: 26px; |
|
|
} |
|
|
/*已选tab头（超链接）的样式*/ |
|
|
.curtab |
|
|
{ |
|
|
padding-top: 0px; |
|
|
padding-right: 10px; |
|
|
padding-bottom: 0px; |
|
|
padding-left: 10px; |
|
|
border-right: #b2c9d3 1px solid; |
|
|
font-weight: bold; |
|
|
float: left; |
|
|
cursor: pointer; |
|
|
background: #ffffff; |
|
|
} |
|
|
/*未选tab头（超链接）的样式*/ |
|
|
.tabs |
|
|
{ |
|
|
border-right: #c1d8e0 1px solid; |
|
|
padding-top: 0px; |
|
|
padding-right: 10px; |
|
|
padding-bottom: 0px; |
|
|
padding-left: 10px; |
|
|
font-weight: normal; |
|
|
float: left; |
|
|
cursor: pointer; |
|
|
} |
|
|
p |
|
|
{ |
|
|
font-size:9pt; |
|
|
margin-left:20pt; |
|
|
} |
|
|
</style> |
|
|
<script type="text/jscript"> |
|
|
//显示tab（tabHeadId：tab头中当前的超链接；tabContentId要显示的层ID） |
|
|
function showTab(tabHeadId,tabContentId) |
|
|
{ |
|
|
//tab层 |
|
|
var tabDiv = document.getElementById("tabDiv"); |
|
|
//将tab层中所有的内容层设为不可见 |
|
|
//遍历tab层下的所有子节点 |
|
|
var taContents = tabDiv.childNodes; |
|
|
for(i=0; i<taContents.length; i++) |
|
|
{ |
|
|
//将所有内容层都设为不可见 |
|
|
if(taContents[i].id!=null && taContents[i].id != 'tabsHead') |
|
|
{ |
|
|
taContents[i].style.display = 'none'; |
|
|
} |
|
|
} |
|
|
//将要显示的层设为可见 |
|
|
document.getElementById(tabContentId).style.display = 'block'; |
|
|
//遍历tab头中所有的超链接 |
|
|
var tabHeads = document.getElementById('tabsHead').getElementsByTagName('a'); |
|
|
for(i=0; i<tabHeads.length; i++) |
|
|
{ |
|
|
//将超链接的样式设为未选的tab头样式 |
|
|
tabHeads[i].className='tabs'; |
|
|
} |
|
|
//将当前超链接的样式设为已选tab头样式 |
|
|
document.getElementById(tabHeadId).className='curtab'; |
|
|
document.getElementById(tabHeadId).blur(); |
|
|
} |
|
|
</script> |
|
|
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> |
|
|
<meta http-equiv="description" content="this is my page"> |
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
|
|
<meta charset="UTF-8"> |
|
|
</head> |
|
|
<body> |
|
|
<div style=" 100%; font-family: 微软雅黑; text-align: center"> |
|
|
小学生四则运算</div> |
|
|
<div id="tabDiv" style=" 1000px"> |
|
|
<div id="tabsHead"> |
|
|
<a id="tabs1" class="curtab" href="javascript:showTab('tabs1','tabContent1')">个人资料</a> |
|
|
<a id="tabs2" class="tabs" href="javascript:showTab('tabs2','tabContent2')">意见</a> |
|
|
</div> |
|
|
<div id="tabContent1" style="display: block"> |
|
|
<table style="border- 0; 100%"> |
|
|
<tr> |
|
|
<td rowspan="3" style=" 300px;text-align:center"> |
|
|
<img alt="陈晨" src="image/ima1.jpg" style="280px"/></td> |
|
|
<td colspan="3" rowspan="3"> |
|
|
<table border="1" style="border-left-color: aqua; |
|
|
border-bottom-color: aqua; 701px; border-top-style: solid; border-top-color: aqua; |
|
|
border-right-style: solid; border-left-style: solid; height: 380px; border-right-color: aqua; |
|
|
border-bottom-style: solid"> |
|
|
<tr> |
|
|
<td style=" 100%"> |
|
|
<div class="line">姓名 |
|
|
<input name="username" type="text" placeholder="真实姓名"/> |
|
|
</div> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td style=" 100%"> |
|
|
<div class="line">学校名 |
|
|
<input name="schoolname" type="text" placeholder="学校地址和学校名"/> |
|
|
</div> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td style=" 100%; height: 29px"> |
|
|
<div class="line">班级 |
|
|
<input name="schoolnum" type="text" placeholder="年级/班级"/> |
|
|
</div> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td style=" 100%"> |
|
|
<div class="line">学号 |
|
|
<input name="snum" type="text" placeholder="8位数字"/> |
|
|
</div> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td colspan="2"> |
|
|
<div><a href="tijiaosuccess.html">提交</a></div> |
|
|
<div><a href="chakan.html">查看</a></div> |
|
|
<input id="log_submit" type="button" href="tijiaosuccess.html" value="提交" style="30%"> |
|
|
<input id ="log_submit" type="button" value="查看" style="30%"> |
|
|
</td> |
|
|
</tr> |
|
|
</table> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
</tr> |
|
|
<tr> |
|
|
</tr> |
|
|
</table> |
|
|
</div> |
|
|
<!--以下为答题部分内容--> |
|
|
<div id="tabContent2" style="display: none"> |
|
|
<ul> |
|
|
<li>点击开始，即可开始答题，并开始计时，答完后点击提交，当显示提交成功，可点击结果，查看答题情况</li> |
|
|
<li>1.显示题目</li> |
|
|
<li>2.</li> |
|
|
<li>3.</li> |
|
|
<li>提交</li> |
|
|
<li>结果</li> |
|
|
<li></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</body> |
|
|
</html> |
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<title>提交成功</title> |
|
|
</head> |
|
|
<body> |
|
|
<a>个人资料提交成功</a> |
|
|
<a>接下来请认真答题！</a> |
|
|
<br/> |
|
|
<a href="zuoye.html">点击跳转到答题界面</a> |
|
|
</body> |
|
|
</html> |
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<title>答题界面</title> |
|
|
<script type="texe/javascript"> |
|
|
var b=0 |
|
|
var c=0 |
|
|
var t |
|
|
function jishi() |
|
|
{ |
|
|
document.getElementByld('tt').value=c |
|
|
c=c+1 |
|
|
t=setTimeout("jishi()",1000) |
|
|
if(c==60) |
|
|
{ |
|
|
c=0; |
|
|
b=b+1; |
|
|
xs.value=b |
|
|
} |
|
|
} |
|
|
function stopjishi() |
|
|
{ |
|
|
clearTimeout(t) |
|
|
} |
|
|
</script> |
|
|
</head> |
|
|
<body onLoad="jishi()"> |
|
|
<div style=" 100%; font-family: 微软雅黑; text-align: center">答题界面</div> |
|
|
<form> |
|
|
<input type="button" value="停止计时！" onClick="stopjishi()"> |
|
|
<br><br> |
|
|
您已经答题<input id="xs">分钟 |
|
|
<input id="tt">秒<br><br> |
|
|
</form> |
|
|
<p>进入答题界面时，应经开始计时，请答完题确认无误后点击”停止计时“按钮，，帮助自己查看答题速度。</p> |
|
|
<div><a href="zuoyetijiao.html">提交</a></div> |
|
|
</body> |
|
|
</html> |
