请教一下老师

请教一下老师

HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" type="text/css" href="css/base.css" />
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/css.css" />
</head>
<body>
<!-- 头部开始 -->
<header class="mui-bar" id="nav_bar">
<div class="center-wrap">
<h1 class="mui-title">text</h1>
<div class="user">
<a href="javascript:;" class="userName iconfont">&#xe63c;&nbsp;&nbsp;<em
style="color: black;">旺旺</em></a>
<button type="button" class="userExit iconfont">&#xe655;&nbsp;&nbsp;退出</button>
</div>
</div>
</header>
 
<script src="js/top.js" type="text/javascript" charset="utf-8"></script>
<!-- 头部结束 -->
<!-- 试卷部分开始 -->
<section class="exPaper">
<!-- 答题卡 -->
<div class="userAnser dFix">
<div class="center-ans">
<h2>答题卡</h2>
<p>单选题(共<em>12</em>题,合计<em>12.00</em>分)</p>
<ul class="userXz" id="userXz">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</div>
<div class="ack">
<em class="db">未答</em>
<em class="db">正确</em>
<em class="db">错误</em>
</div>
</div>
<!-- 时间 -->
<div class="userTimeFsChange dFix">
<div class="center-all">
<div class="timer">
<em>剩余时间</em>
<span class="db" id="">
<em class="db" id="timee">00:00:00</em>
</span>
</div>
<div class="nowAns">
<em class="db">当前进度</em>
<span class="db" id="">
<em id="nowAns_jd">0</em>/<em id="nowAns_all">0</em>
</span>
</div>
<div class="fontSizeChange" id="fontSizeChange">
<button type="button">+</button>
<em>字号</em>
<button type="button">-</button>
</div>
</div>
</div>
<!-- 提交 -->
<input type="submit" id="" name="" class="userSub dFix" />
<div class="center-wrap">
<!-- 试卷本体 -->
<div class="paper">
<div class="tit">
<h2>题目(共<em>3</em>,合计<em>30.0</em>分)</h2>
</div>
<ul class="userSubject" id="userSubject">
<li id="n_1">
<em class="dp" >1.下列说法错误的是()</em><br><br>
<input type="radio" name="bloodtype" value="A">&nbsp;A:ahhahha<br>
<input type="radio" name="bloodtype" value="B">&nbsp;B:ahjsha<br>
<input type="radio" name="bloodtype" value="C">&nbsp;C:asvhdvhas<br>
<input type="radio" name="bloodtype" value="D">&nbsp;D:sahdsdas
</li>
<li id="n_2">
<em class="dp" >2.下列说法对的是()</em><br><br>
<input type="checkbox" name="hobby" value="足球"> 足球
<br />
<input type="checkbox" name="hobby" value="蓝球">&nbsp;蓝球
<br />
<input type="checkbox" name="hobby" value="羽毛球">&nbsp;羽毛球
<br />
<input type="checkbox" name="hobby" value="游泳">&nbsp;游泳
</li>
<li id="n_3">
<em class="dp" >2.下列说法对的是()</em><br><br>
<input type="radio" name="panduan" id="Y"> &nbsp;正确<br>
<input type="radio" name="panduan" id="N"> &nbsp;错误
</li>
</ul>
</div>
</div>
</section>
<script src="js/tim.js" type="text/javascript" charset="utf-8"></script>
<!-- 试卷部分结束 -->
 
<!-- 测试 -->
 
 
</body>
</html>

base.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
@font-face {
    font-family"PIngFangSCRegular";
    srcurl(../fonts/PingFangSCRegular.ttf) format('truetype');
}
@font-face {
  font-family'iconfont';
  srcurl('../fonts/iconfont.ttf?t=1638413278827'format('truetype');
}
 
.iconfont {
  font-family"iconfont" !important;
  font-size16px;
  font-stylenormal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
 
body {
    font-family"PIngFangSCRegular";
    background-color#eff3f7;
    height100%;
    user-select:none
}
 
 
/* 包容器 */
 
.center-wrap {
    width1152px;
    margin0 auto;
    /* background-color: yellowgreen; */
}
 
.clearfix {
    overflowhidden;
}
 
.clearfix::after {
    content'';
    displayblock;
    clearboth;
    overflowhidden;
}
 
.tac {
    text-aligncenter;
}
 
.db {
    displayblock;
}
 
.dib {
    display: inline-block;
}
.dFix{
    positionfixed;
}
.fs12 {
    font-size12px;
}
 
.exPaper .userAnser .center-ans .userXz .cur{
    colorwhite;
    background-color: greenyellow;
}
.exPaper .userAnser .center-ans .userXz .dele{
    colorgray;
    background-color: gainsboro;
}
/* 定义字体 */

css.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
/* 头部开始 */
.mui-bar {
    height40px;
    min-width1154px;
    background-colorwhite;
    positionrelative;
    top0px;
    left0px;
    transition: all .4s ease 0s; 
}
 
.mui-bar .center-wrap {
    height100%;
    line-height40px;
}
 
.mui-bar .center-wrap .mui-title {
    floatleft;
    margin-left100px;
    font-weightbold;
}
 
.mui-bar .center-wrap .user {
    floatright;
}
 
.mui-bar .center-wrap .user .userName {
    color: royalblue;
    font-size16px;
    margin-right30px;
}
 
.mui-bar .center-wrap .user .userExit {
    box-shadow: inset 0px 1px 0px 0px #ffffff;
    background: linear-gradient(to bottom#ffffff 5%#f6f6f6 100%);
    background-color#ffffff;
    border-radius: 6px;
    border1px solid royalblue;
    display: inline-block;
    cursorpointer;
    color: royalblue;
    font-familyArial;
    font-size15px;
    /* font-weight: bold; */
    padding6px 24px;
    text-decorationnone;
    text-shadow0px 1px 0px #ffffff;
}
 
.mui-bar .center-wrap .user .userExit:hover {
    background: linear-gradient(to bottom#f6f6f6 5%#ffffff 100%);
    background-color#f6f6f6;
}
 
.mui-bar .center-wrap .user .userExit:active {
    positionrelative;
    top1px;
}
 
/* 头部结束 */
/* 试卷部分开始 */
.exPaper{
    width100%;
    /* height: 800px; */
    min-height1000px;
    min-width1154px;
}
.exPaper .userAnser{
    /* height: 600px; */
    width300px;
    top16%;
    left4%;
    background-colorwhite;
    padding:35px 0 0 0 ;
    box-sizing: border-box;
    border-radius: 8px;
    overflowhidden;
    box-shadow: rgba(0000.240px 3px 8px;
}
.exPaper .userAnser .center-ans{
    width230px;
    box-sizing: border-box;
    margin0 auto;
}
.exPaper .userAnser .center-ans h2{
    font-weightbold;
    padding-left20px;
    font-size18px;
    height20px;
    line-height20px;
    positionrelative;
    margin-bottom20px;
}
.exPaper .userAnser .center-ans h2::before{
    content"";
    positionabsolute;
    background-color#0000FF;
    height20px;
    width10px;
    border-radius: 2px;
    top0;
    left0;
}
.exPaper .userAnser .center-ans p{
    font-size12px;
    font-weightbold;
    margin-bottom20px;
}
.exPaper .userAnser .center-ans .userXz{
    overflow:hidden;
    box-shadow:0px -1px 0px 0px darkgrey inset;
    margin-bottom32px;
     
}
.exPaper .userAnser .center-ans .userXz li{
    floatleft;
    width30px;
    height25px;
    text-aligncenter;
    line-height25px;
    font-weightbold;
    colorgray;
    background-color: gainsboro;
    margin:0 10px 10px 0;
    cursorpointer;
    /* overflow: hidden; */
}
.exPaper .userAnser .center-ans .userXz li:hover{
    colorwhite;
    background-color: greenyellow;
}
.exPaper .userAnser .center-ans .userXz li:nth-of-type(6n){
    margin-right0px;
}
.exPaper .userAnser .ack{
    height36px;
    width100%;
    line-height36px;
    padding-left50px;
    border-radius:0 0 8px 8px;
    /* background-color: green; */
    box-sizing: border-box;
    box-shadow: rgba(0000.240px 0px 16px;
}
.exPaper .userAnser .ack em{
    floatleft;
    /* left: 40px; */
    font-size16px;
    font-weightbold;
    margin-left40px;
    positionrelative;
}
 
.exPaper .userAnser .ack em::before{
    content"";
    positionabsolute;
    left-28px;
    top50%;
    margin-top-8px;
    height16px;
    width16px;
    border-radius: 5px;
}
.exPaper .userAnser .ack em:nth-of-type(1)::before{
    background-colorgray;
}
.exPaper .userAnser .ack em:nth-of-type(2)::before{
    background-color: royalblue;
}
.exPaper .userAnser .ack em:nth-of-type(3)::before{
    background-color: firebrick;
}
.exPaper .userTimeFsChange{
    width160px;
    right13%;
    top16%;
    padding12px 0px;
    background-colorwhite;
        box-shadow: rgba(0000.240px 3px 8px;
        border-radius: 8px;
}
.exPaper .userTimeFsChange .center-all{
    width120px;
    margin0 auto;
    text-aligncenter;
}
.exPaper .userTimeFsChange .center-all .timer{
    height60px;
    box-sizing: border-box;
    padding-top4px;
    border-bottom2px solid #dedede;
}
.exPaper .userTimeFsChange .center-all .nowAns{
    height60px;
    box-sizing: border-box;
    padding4px 0;
    border-bottom2px solid #dedede;
}
.exPaper .userTimeFsChange .center-all .fontSizeChange{
    height60px;
    box-sizing: border-box;
    padding-top18px;
}
.exPaper .userTimeFsChange .center-all .fontSizeChange button{
    height23px;
    width23px;
}
.exPaper .userSub{
    cursorpointer;
    right210px;
    bottom40px;
    width160px;
    height50px;
    line-height50px;
    border-radius: 3px;
    background-color#2B81AF;
    colorwhite;
    font-size18px;
    bordernone;
}
.exPaper .userSub:hover{
    background-color#1c5876;
}
.exPaper .userSub:active{
    positionrelative;
    top1px;
}
.exPaper .center-wrap .paper{
    width888px;
    background-colorwhite;
    margin0px auto;
    margin-top50px;
    /* margin-bottom: 50px; */
    border-radius: 4px;
    border1px solid #dedede;
.exPaper .center-wrap .paper .tit{
    width100%;
    height56px;
    line-height56px;
    border-bottom1px solid #dedede;
    box-sizing: border-box;
    background-color#fafafa;
    padding-left16px;
}
.exPaper .center-wrap .paper .tit h2{
    font-size20px;
    font-weightbold;
}
.exPaper .center-wrap .paper .userSubject{
    width820px;
    margin0 auto;
}
.exPaper .center-wrap .paper .userSubject li{
    padding10px 0;
    margin0 0 10px 0;
    border-bottom1px solid #dedede;
    font-size16px;
}
.exPaper .center-wrap .paper .userSubject li:first-child{
    margin-top10px;
}
.exPaper .center-wrap .paper .userSubject li:last-child{
    border-bottomnone;
}
/* 试卷部分结束 */

tim.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
const fontSizeChange = document.getElementById("fontSizeChange");
const btChangeList = fontSizeChange.getElementsByTagName("button");
const userSubject = document.getElementById('userSubject');
const subjList = userSubject.getElementsByTagName('li');
const userXz = document.getElementById('userXz')
const userXzList = userXz.getElementsByTagName('li')
const timee = document.getElementById("timee");
const nowAns_jd = document.getElementById("nowAns_jd");
const nowAns_all = document.getElementById("nowAns_all");
var sizeFon = 16;
// 字体
btChangeList[0].addEventListener('click', () => {
    if (sizeFon == 22) return;
    sizeFon += 2;
    for (let i = 0; i < subjList.length; i++) {
        subjList[i].style.fontSize = `${sizeFon}px`;
        // console.log(sizeFon);
    }
}, false)
btChangeList[1].addEventListener('click', () => {
    if (sizeFon == 16) return;
    sizeFon -= 2;
    for (let i = 0; i < subjList.length; i++) {
        subjList[i].style.fontSize = `${sizeFon}px`;
        // console.log(sizeFon);
    }
}, false)
 
 
// 同步
let index = 0;
let nowIndex = 0;
    let sum = 0;
for (let i = 0; i < subjList.length; i++, index++) {
    let inpuList = subjList[i].getElementsByTagName("input");
    function runAd() {
        if (sum > 0) return;
        for (let j = 0; j < inpuList.length; j++) {
            if (inpuList[j].checked == true) {
                sum++;
            }
        }
      
        if (sum > 0) {
            userXzList[i].className = 'cur';
            nowAns_jd.innerHTML = `${++nowIndex}`;
            sum=0;
        else if (sum == 0) {
            userXzList[i].className = 'dele';
            sum=0;
        }
 
    }
 
    subjList[i].addEventListener('mouseleave', runAd, false);
}
nowAns_all.innerHTML = `${index}`;
//剩余时间
 
var maxtime = 60 * 60; //分钟*60
var hours, minutes, seconds, timer;
 
function CountDown() {
 
    if (maxtime >= 0) {
        hours = Math.floor(maxtime / 3600);
        minutes = Math.floor(maxtime / 60 % 60);
        seconds = Math.floor(maxtime % 60);
        timee.innerHTML =
            `${String(hours).padStart(2,0)} : ${String(minutes).padStart(2,0)} : ${String(seconds).padStart(2,0)}`;
 
        if (maxtime == 5 * 60) alert("还剩5分钟");
        --maxtime;
 
    else {
        clearInterval(timer);
        alert("时间到,结束!");
    }
 
}
timer = setInterval("CountDown()", 1000);

我想请问一下老师,我这里如何实现我绝对定位的东西自适应,不会到别的浏览器去就乱了布局,还有那个我想做的选中答案效果,点击答案左侧图标同步变色,然后右侧的进度会同步加减,我不知道怎么同步,所以使用用的鼠标移出,效果很不好,请老师指点迷津

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕小李 2021-12-04 11:00:34

同学你好,解答如下:

1、 同学用于绝对定位的两个元素,老师用了几个浏览器测了一下没发现有问题,老师猜测同学是想问,页面中两侧的fixed定位,遇到小屏幕时,会出现如下问题?

https://img1.sycdn.imooc.com//climg/61aad84e0947880610200685.jpg

如是老师理解的这样,我们可以使用css3的媒体查询响应式布局,通过计算屏幕宽度,来计算左右两侧定位的元素,宽度,定位left与right值或改变定位的形式,比如fixed改变成absolute来解决问题,同学这里自己尝试一下。

如以上回答并不是同学的困惑,同学可以再把问题描述的清晰一些,老师这里没有理解透同学想要表达的问题点。


2、点击题目中的选项,使答题卡中的序号进行联动。解答如下:

这里老师不建议同学用控制dom的形式做哈,因为最后我们要把用户选择的选项拼凑成数据,就会涉及到格式的需求。所以我们尽量要有操作数据的思想。老师这里简单的给同学做个了小demo,仅供同学参考。详解如下:

首先要明确一点,下图中红框圈中的,在正常项目中大概率都是从后台取得的数据,再循环遍历拼接出来的,所以题目有几道,对应的答题卡就有几个序号。

https://img1.sycdn.imooc.com//climg/61aad58d095b1cb614040629.jpg

JS部分:

1、类似表单提交的这类需求,最终都是要提交到后台的哈~那么一般来说这种需求分为两种情况,静态数据与动态数据。静态数据一般是指由前端同学固定写在本地项目中,最后进行提交后台(需要与后台同学提前沟通),动态数据一般是指通过请求后台,得到的数据格式(也是需要与后台同学提前沟通,谁的数据结构更清晰就用谁的),如下分析:

https://img1.sycdn.imooc.com//climg/61aad64309a1efd711250758.jpg

https://img1.sycdn.imooc.com//climg/61aad7290917893e07160255.jpg

https://img1.sycdn.imooc.com//climg/61aad73809cd909e11040783.jpg

2、整体更改部分如下:

https://img1.sycdn.imooc.com//climg/61aad7a109d5889016224663.jpg

最终效果如下:

https://img1.sycdn.imooc.com//climg/61aae014099beb7511140538.jpg

https://img1.sycdn.imooc.com//climg/61aae0620948a6da10560517.jpg

同学看看是否能理解,因为这里需要理解数据格式,的确是有些超纲。且这种需求并不简单哦~所以同学如不理解可以不要过多的纠结,先本着完成我们的课程为基础哈~祝学习愉快~

好帮手慕小李 2021-12-03 19:49:06

同学你好,因问题比较特殊,老师需要一些时间思考。随后有好的办法老师会给同学答复,祝学习愉快~

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师
插入代码