一,前言
有一个需求,因为我们拿到的js是没有下一题和上一题的功能的,所以需要在分析代码后,修改其js文件,让其实现其功能。而且要解决,延迟自动到下一题和误触摸多次跳转bug。
二,建立空的div
我们需要先在循坏的最外层。定义一个 var shangyiti=1; 然后我们利用循环的方法不断递增变量,达到不同的div有着不同的id名以及class的效果。 传入题目标题:
var shangyiti1="shangyiti"
var divp1235 = document.createElement("button");
divp1235.setAttribute("id", shangyiti1+shangyiti);
divp1235.className = "entrance-bottom-frame-line-titlep21345";
// 传入题目标题
//div2.innerHTML = data1[i].choice;
document.querySelectorAll(".entrance-bottom-frame-line")[i].appendChild(divp1235);
shangyiti++;
这样的话我们就会发现,检查的时候,每次追加的时候他的id都是不同的每次递增1。 shangyiti1,shangyiti2,shangyiti3,shangyiti4,shangyiti5.。。。。。
在成功完成建立空的按钮后,我们可以在适合的位置,填入我们想要的东西,如下document.getElementById(shangyiti1+shangyiti).innerHTML = "上一题";
三,css样式设置
我们发现,这个上一题的按钮有一个共同的class。我们在html文件里写下基本的美化样式。与控制字体大小的样式。
我们完成了这些操作以后,看我们的效果图: 基本的样式有了,下一步就是获取点击事件,执行操作。
四,点击事件操作。
我们观察代码发现: 这个答题页面像是一个大的页面,每次选完滚动一个页面,模拟滑动的功能。 现在我们已按钮来控制滑动效果。
document.getElementById('xiayiti1').addEventListener('tap', function() {
因为一个有五个,我们去前四个下一题的按钮id,只需要写4个按钮点击方法即可。 方法里内容为,每次滑动100,删掉旧题目,显示新题目。 如上图所示。 显示新的题目。老的题目删除掉。
五,上一题同理/提交按钮
上一题按钮和下一题按钮同理。 逻辑:我们都知道,最后一题是不需要设置下一题的,我们完全可以把第5的按钮设置为提交按钮。 我们写一个if语句判断一下:
document.querySelectorAll(".entrance-bottom-frame-line")[i].appendChild(divp123);
if(xiayiti<5){
document.getElementById(xiayiti1+xiayiti).innerHTML = "下一题";
}
if(xiayiti==5)
{
document.getElementById(xiayiti1+xiayiti).innerHTML = "提交";
}
这样就成功的吧第五个按钮变成了提交按钮。
将之前的积分计算方法集成到提交按钮点击事件触发。成功计算出本次测试分值与openwindow方法,返回首页面,继续执行其他操作。
五,最后
这次按钮原理和之前隐藏域的用法基本一样。还是要多使用循环体,直接手动遍历代码量及其庞大,不太合适。