1、题目要求
要求：
1、设计一份调查问卷，问卷分为单选题和多选题；
2、问卷答完后点击提交按钮，由JavaScript给出得分；
3、应用正则表达式；
4、应用本地存储，可以存储用户信息和答题结果；
5、应用定时器，在用户答题时进行计时。
2、项目流程介绍
i. 用户进入网页即开始计时
ii. 用户填写相关信息（若学生手机号填写格式错误，则系统提示重新输入
iii. 网站设计若第一题用户回答错误，则直接给出0分，后续作答皆不打分
iv. 用户正常答题
v. 点击保存按钮，系统会将学生各信息保存到本地存储中但不给出分数
vi. 点击交卷按钮，系统也将学生信息保存到本地存储中并给出该用户作答的分数，同时从本地存储中读出学生姓名，系统计时器在此时也停止计时，若在系统计时器计时完毕后若为完成作答，学生将无法交卷
vii. 点击超链接可以查看历史成绩
3、项目源码
3.1、html源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web应用技术上课检测</title>
<link rel="stylesheet" href="./CSS/index.css">
</head>
<body onload="startclock()">
<div class="outer">
<div class="inner">
<div class="title">
<h2>Web应用技术上课检测</h2>
</div>
<div class="detail">
<p>本次测试共十题,8道单选题,2道多选题,每题10分,共100分</p>
<a href="#" onclick="queryLastScores()">点击可查看你的历史成绩!</a>
</div>
<hr>
<div class="info">
<label for="">学生姓名:</label>
<input type="text" class="info_inp" name="name">
<label for="">学生学号:</label>
<input type="text" class="info_inp" name="id">
<br>
<label for="">学生专业:</label>
<input type="text" class="info_inp" name="major">
<label for="">学生手机:</label>
<input type="text" class="info_inp" name="mobile">
</div>
<div class="text">
<!-- C -->
<fieldset class="question">
<p>第1题,本学期教授WEB应用技术是哪一个老师?(本题答错直接0分)</p>
<input type="radio" name="1" value="0">A. 海绵宝宝
<input type="radio" name="1" value="0">B. 章鱼哥
<input type="radio" name="1" value="10">C. 李瑞
<input type="radio" name="1" value="0">D. 派大星
</fieldset>
<!-- D -->
<fieldset class="question">
<p>第2题,在 css 选择器当中,优先级排序正确的是（）</p>
<input type="radio" name="2" value="0">A. id选择器>标签选择器>类选择器
<input type="radio" name="2" value="0">B. 标签选择器>类选择器>id选择器
<br>
<input type="radio" name="2" value="0">C. 类选择器>标签选择器>id选择器
<input type="radio" name="2" value="10">D. id选择器>类选择器>标签选择器
</fieldset>
<!-- D -->
<fieldset class="question">
<p>第3题,关于HTML语义化,以下哪个说法是正确的?()</p>
<input type="radio" name="3" value="0">A. 语义化的HTML有利于机器的阅读,如PDA手持设备、搜索引擎爬虫;但不利于人的阅读
<br>
<input type="radio" name="3" value="0">B. Table 属于过时的标签,遇到数据列表时,需尽量使用 div 来模拟表格
<br>
<input type="radio" name="3" value="0">C. 语义化是HTML5带来的新概念,此前版本的HTML无法做到语义化
<br>
<input type="radio" name="3" value="10">D. header、article、address都属于语义化明确的标签
</fieldset>
<!-- D-->
<fieldset class="question">
<p>第4题,放在HTML里的哪一部分JavaScripts会在页面加载的时候被执行?()</p>
<input type="radio" name="4" value="0">A. 文件头部位置
<br>
<input type="radio" name="4" value="0">B. 文件尾
<br>
<input type="radio" name="4" value="0">C. head标签部分
<br>
<input type="radio" name="4" value="10">D. body标签部分
</fieldset>
<!-- B-->
<fieldset class="question">
<p>第5题,新窗口打开网页,用到以下哪个值?()</p>
<input type="radio" name="5" value="0">A. _self
<br>
<input type="radio" name="5" value="10">B. _blank
<br>
<input type="radio" name="5" value="0">C. _top
<br>
<input type="radio" name="5" value="0">D. _parent
</fieldset>
<!-- B-->
<fieldset class="question">
<p>第6题,元素的alt和title有什么异同,选出正确的说法?()</p>
<input type="radio" name="6" value="0">A. 不同的浏览器,表现一样
<br>
<input type="radio" name="6" value="10">B. alt和title同时设置的时候,alt作为图片的替代文字出现,title是图片的解释文字
<br>
<input type="radio" name="6" value="0">C. alt和title同时设置的时候,title作为图片的替代文字出现,alt是图片的解释文字
<br>
<input type="radio" name="6" value="0">D. 以上说法都不正确
</fieldset>
<!-- A-->
<fieldset class="question">
<p>第7题,下列说法错误的是()</p>
<input type="radio" name="7" value="10">A. 设置display:none后的元素只会导致浏览器的重排而不会重绘
<br>
<input type="radio" name="7" value="0">B. 设置visibility:hidde后的元素只会导致浏览器重绘而不会重排
<br>
<input type="radio" name="7" value="0">C. 设置元素opacity:0之后,也可以触发点击事件
<br>
<input type="radio" name="7" value="0">D. visibility:hidden的元素无法触发其点击事件
</fieldset>
<!-- B-->
<fieldset class="question">
<p>第8题,关于position定位,下列说法错误的是()</p>
<input type="radio" name="8" value="0">A. fixed元素,可定位于相对于浏览器窗口的指定坐标,它始终是以 body 为依据
<br>
<input type="radio" name="8" value="10">B. relative元素以它原来的位置为基准偏移,在其移动后,原来的位置不再占据空间
<br>
<input type="radio" name="8" value="0">C. absolute 的元素,如果它的父容器设置了 position 属性,并且 position 的属性值为
absolute
或
<br>
者
relative,那么就会依据父容器进行偏移
<br>
<input type="radio" name="8" value="0">D. fixed 属性的元素在标准流中不占位置
</fieldset>
<!-- A B C -->
<fieldset class="question">
<p>第9题,css中哪些属性可以继承()(多选题,选错本题直接0分)</p>
<input type="checkbox" name="9" value="3">A. font-size
<br>
<input type="checkbox" name="9" value="3">B. color
<br>
<input type="checkbox" name="9" value="4">C. font-family
<br>
<input type="checkbox" name="9" value="-1">D. border
</fieldset>
<!-- A C -->
<fieldset class="question">
<p>第10题,关于CSS选择器,以下说法正确的是()(多选题,选错本题直接0分)</p>
<input type="checkbox" name="10" value="5">A. 每条选择器最多只能出现一个伪元素
<br>
<input type="checkbox" name="10" value="-1">B. 每条选择器最多只能出现一个伪类
<br>
<input type="checkbox" name="10" value="5">C. :nth-child(an+b)中n的取值从0开始
<br>
<input type="checkbox" name="10" value="-1">D. A+B匹配A之后所有符合B规则的元素
</fieldset>
<br>
<div class="btn-outer">
<button id="btn1" onclick="save()">保存</button>
<button id="btn2" onclick="coreCount()">交卷</button>
</div>
</div>
</div>
</div>
<!-- 计数器 -->
<div class="timer">
<div class="timer-inner">
<p>测试时间剩余</p>
<hr>
<input type="text" id="showtime">
</div>
</div>
</body>
<script src="./JS/index.js"></script>
</html>
3.2、css代码
* {
margin: 0;
padding: 0;
}
body {
background: url('../IMG/background1.jpg');
font-family: '华文楷体';
background-attachment: fixed
}
hr {
color: #9aa2a5;
margin: 10px 0;
}
fieldset {
border: none;
}
.outer {
margin: 40px auto;
background-color: #fff;
width: 800px;
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
border-radius: 10px;
}
.inner {
margin: 0 auto;
background-color: #fff;
width: 700px;
}
.title h2 {
text-align: center;
padding: 10px;
color: #129fcf;
padding-top: 40px;
}
.detail {
margin-top: 10px;
font-size: 16px;
}
.detail a {
text-decoration: none;
color: #129fcf;
}
.info{
margin: 0 auto;
width: 614px;
}
.info h3 {
margin: 20px 0;
margin-bottom: 40px;
text-align: center;
}
.info label{
font-weight: bolder;
font-size: 18px;
}
.info_inp {
border: 0;
line-height: 30px;
width: 200px;
background-color: transparent;
border-bottom:#666 1px solid;
}
.text input {
margin-top: 10px;
margin-left: 50px;
}
.text p {
margin-top: 20px;
}
.btn-outer {
padding: 40px 0;
width: 400px;
margin: 0 auto;
}
#btn1,#btn2 {
background: #129fcf;
color: #000;
outline: none;
margin-left: 60px;
border: none;
cursor: pointer;
padding: 13px 38px;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
border-radius: 100px;
transition: 0.3s all;
-webkit-transition: 0.3s all;
-moz-transition: 0.3s all;
-o-transition: 0.3s all;
-ms-transition: 0.3s all;
}
#btn2:hover,#btn1:hover {
background: #40E0D0;
color: #ffffff;
transition: 0.3s all;
-webkit-transition: 0.3s all;
-moz-transition: 0.3s all;
-o-transition: 0.3s all;
-ms-transition: 0.3s all;
}
.timer {
position: fixed;
top: 40px;
left: 9%;
width: 124px;
height: 100px;
box-shadow: 0 0 10px rgba(0, 0, 0, .4);
background-color: #fff;
}
.timer-inner {
width: 100px;
margin: 20px auto;
text-align: center;
color: #a2a2a2;
}
#showtime{
width: 100%;
border: none;
color: red;
text-align: center;
font-size: 18px;
}
3.3、部分js代码
// 将填写的学生信息保存到本地存储中
var names = document.getElementsByName("name")
var id = document.getElementsByName('id')
var major = document.getElementsByName('major')
var mobile = document.getElementsByName('mobile')
console.log(names)
function coreCount()
{
checkMobile()
stopclock()
window.sessionStorage.setItem('studentName',names[0].value)
window.sessionStorage.setItem('studentId',id[0].value)
window.sessionStorage.setItem('studentMajor',major[0].value)
window.sessionStorage.setItem('studentMobile',mobile[0].value)
var cores=0;
var qestions=document.getElementsByClassName("question")
danger=document.getElementsByName("1");
for(var d=0;d<danger.length;d++){
if(danger[d].checked){
if(danger[d].value*1==0){
return alert('连任课老师都不知道是谁,不用考试直接0分!')
}
}
}
for(var i=0;i<qestions.length;i++)
{
var count=0;
var flag=1;
var answer=document.getElementsByName(""+(i+1));
for(var j=0;j<answer.length;j++)
{
if(answer[j].checked)
{
if(answer[j].value*1<0)
{
flag=0;
break;
}
else
count+=answer[j].value*1;
}
}
if(flag==1)
cores+=count;
}
// 应用本地存储，存储答题结果
window.sessionStorage.setItem('lastScore',cores)
alert(window.sessionStorage.getItem('studentName')+",你的成绩是"+cores);
}
function queryLastScores(){
alert('您的上次考试成绩为:'+window.sessionStorage.getItem('lastScore'))
}
function save(){
checkMobile()
// 将填写的学生信息保存到本地存储中
window.sessionStorage.setItem('studentName',names[0].value)
window.sessionStorage.setItem('studentId',id[0].value)
window.sessionStorage.setItem('studentMajor',major[0].value)
window.sessionStorage.setItem('studentMobile',mobile[0].value)
}
// 正则表达式验证
function checkMobile(){
var phones =""
phones = document.getElementsByName('mobile')[0].value
// 验证规则
var reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
var result = reg.test(phones.trim())
if(!result){
alert('手机号输入错误，请重新输入正确的手机号')
document.getElementsByName('mobile')[0].value = ''
}
}