使用H5+Jquery+C#制作了一个在线答题系统
一、功能结构
1.学生端-登录
2.学生端-答题
3.学生端-错题查看
4.教师版-系统登录（PC端、手机端）
5.教师端-试卷管理
6.教师端-试卷下载
7.教师端-评卷
二、效果演示
三、代码演示
1. html代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="webm_Login" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" />
<title>小航助学-教师端</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="../css/bootstrap.min.css" />
<link rel="stylesheet" href="../css/comcss.css" />
<script src="../js/jquery-2.1.1.js"></script>
<script src="../js/bootstrap.min.js"></script>
<style>
input:focus {
border-color: #66AFE9 !important;
outline: 0;
}
</style>
</head>
<body style="margin: 0; font-size: 17px;">
<div class="rowflex_left" style="height: 80px; background-color: white;">
<img src="images/logoblack.png" style="height: 70px;margin-left:20px;" />
</div>
<div class="rowflex_left" style="background-color: #3399FF; height: 500px; position: relative;">
<img src="images/bg1021.png" style="width: 500px; margin-left: 130px;" />
<div class="columnflex_center" style="width: 400px; height: 300px; background-color: white; border-radius: 5px; box-shadow: 2px 2px 4px lightgray; position: absolute; top: 100px; right: 15%;">
<div style="width: 80%; text-align: center;">
<span id="span_tel" style="font-size: 18px; margin-left: 10px;cursor: pointer;font-weight: 600;color:red;" onclick="login_tel()">手机登录</span>
<span style="font-size: 18px; margin-left: 10px;">|</span>
<span id="span_user" style="font-size: 18px; margin-left: 10px; cursor: pointer;" onclick="login_user()">密码登录</span>
</div>
<div id="login_tel" class="columnflex_center" style="display: ;">
<div class="inputout" style="margin-top: 30px;">
<input type="text" id="ipt_tel" style="border: none; width: 95%;" placeholder="手机号" maxlength="50" />
</div>
<div class="inputout" style="margin-top: 15px;">
<input type="text" id="ipt_yzm" style="border: none; width: 60%;" placeholder="验证码" maxlength="6" />
<div class="rowflex_center" style="width: 35%; border-left: 1px solid lightgray; cursor: pointer;" onclick="sendsms()">
<span id="smsbt" style="cursor:pointer;color:black;">获取验证码</span>
</div>
</div>
<div class="rowflex_center" style="width: 80%; height: 40px; background-color: #3399FF; border-radius: 5px; color: white; margin-top: 30px; cursor: pointer;" onclick="toMain('tel')">
<span>登录</span>
</div>
</div>
<div id="login_user" class="columnflex_center" style="width:100%;display:none;">
<div class="inputout" style="margin-top: 30px;">
<input type="text" id="ipt_userid" style="border: none; width: 95%;" placeholder="手机号/用户号" maxlength="50" />
</div>
<div class="inputout" style="margin-top: 15px;">
<input type="password" id="ipt_pass" style="border: none; width: 95%;" placeholder="密码" maxlength="20" />
</div>
<div class="rowflex_center" style="width: 80%; height: 40px; background-color: #3399FF; border-radius: 5px; color: white; margin-top: 30px; cursor: pointer;" onclick="toMain('userid')">
<span>登录</span>
</div>
<div style="width:80%;text-align:right;margin-top:10px;margin-right:10px;">
<span style="color:blue;cursor:pointer;" onclick="location.href='passreset.aspx'">密码忘记了？</span>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal_msg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog" style="width:34%; margin-left: 33%; margin-top: 10%;">
<div class="modal-content">
<div class="modal-header" style="background-color: #3399FF; color: white;">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">
×
</button>
<h4 id="span_opstyle" class="modal-title">操作提示
</h4>
</div>
<div class="modal-body">
<div class="columnflex_center">
<div class="rowflex_center" style="width:100%;margin-top:25px;text-align:center;height:60px;">
<img src="images/warning.png" style="width:50px;" />
<span id="span_msg" style="margin-left:8px;"></span>
</div>
<div class="rowflex_center" style="margin-top: 15px; margin-bottom: 20px;">
<div class="rowflex_center" style="width: 120px; border-radius: 5px; background-color: #3399FF; height: 40px; color: white; cursor: pointer;" onclick="$('#modal_msg').modal('hide');">
<span id="btname" style="font-size: 16px; font-weight: 700;">确定</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>2.js代码
//读取Cookie
function getCookie(name) {
var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if (arr = document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}
function GetRequest() {
var url = location.search; //获取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
}
}
return theRequest;
}
var wxd;
var aurl = "";
var share;
$(document).ready(function (){
console.log(document.URL);
var Request = new Object();
Request = GetRequest();
share = Request['share'];
if (typeof (share) == "undefined") {
share = "0";
}
if (share == "1") {//分享进来的，已带share参数
aurl = document.URL;
document.getElementById("div2").style.cssText = "width:20%; margin: 5px;cursor:pointer;display:;";
} else { //系统登陆进来的 没有share参数
aurl = document.URL + "&share=1";
document.getElementById("div1").style.cssText = "width:20%; margin: 5px;cursor:pointer;display:;";
}
console.log(aurl);
$.ajax({
url: "aspapi.aspx/getWxConfig",
type: "post",
data: "{'url':'" + document.URL + "'}",
dataType: "json",
contentType: "application/json; charset=utf-8",
async: true,
success: function (data) {
var htmlstr = '';
console.log(data.d);
if (data.d!=null){
wxd=data.d;
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: wxd.AppId, // 必填，公众号的唯一标识
timestamp: wxd.timestamp, // 必填，生成签名的时间戳
nonceStr: wxd.nonceStr, // 必填，生成签名的随机串
signature: wxd.signature,// 必填，签名
jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareQZone'] // 必填，需要使用的JS接口列表
});
wx.hideMenuItems({
menuList: ["menuItem:share:appMessage", "menuItem:share:timeline", "menuItem:copyUrl"] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
});
wx.ready(function () {
wx_share('采花秘籍', document.URL, 'http://www.xiaohang.tech/images/flower.png', '复习课程、学习重难点知识、参与答题、每日登陆都会获取小红花哦，快来点击进入看看吧！');
});
wx.error(function (res) {
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
console.log(res.data);
});
}
}, error: function (err) {
console.log(err);
alert('数据加载出现错误...');
}, complete: function () {
console.log('complete')
}
});
})
function wx_share(title, link, imgurl, desc) {
//朋友圈
wx.onMenuShareTimeline({
title: title, // 分享标题
link: link, // 分享链接
imgUrl: imgurl, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
//微信好友
wx.onMenuShareAppMessage({
title: title, // 分享标题
desc: desc, // 分享描述
link: link, // 分享链接
imgUrl: imgurl, // 分享图标
title: title, // 分享标题
type: 'link', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
//qq
wx.onMenuShareQQ({
title: title, // 分享标题
desc: desc, // 分享描述
link: link, // 分享链接
imgUrl: imgurl, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
// qq空间
wx.onMenuShareQZone({
title: title, // 分享标题
desc: desc, // 分享描述
link: link, // 分享链接
imgUrl: imgurl, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
}3、系统体验
了解更多关注我哟！！！
2164
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
