做了个app,里边嵌入一个知识答题游戏app,怎么用js实现每天只有一次答题机会

第一步:先创建一个HTML文件导入js,css攵件和设置设备width,和不允许用户操作


第二步:往body加入三个div标签分别用于初始界面,答题界面和结束界面

第三步:在css文件修改样式:
先设置共有的样式和body的样式:

注意:我把答题div和结算的div一开始都默认藏在375px的位置当点击开始答题,进行切换答题div

1.第一个页面的样式:


2.设置一個切换的样式:当点击开始答题按钮时候向第二个页面添加一个样式change,这样答题div就会向左偏移375px

第三步:接下来要边修改js代码,边修改對应的css样式了;
首先:完成第一个页面的开始答题按钮的事件的js代码

点击了按钮给答题div添加change样式,就会向左偏移同时删除第一个页面嘚div的change样式,时第二个页面显示第一个页面隐藏;

**来到了,答题div页面就需要将题库中的题目和选项提取出来,放置对应的元素上;**

这样僦成功将答题div页面填充好了上效果图,图一是第一个初始界面图二是答题的界面;


那么对应的css样式也得加上:

这里就到了点击选项事件了,点击正确背景绿色,点击错误显示正确***,同时错误***背景变红;

接下来编写js代码:定义好的全局对象

首先看看点击事件嘚js代码:

设置了一个定时器:计算答题事件

由于中间填充结算界面的方法太长我封装成了一个方法另外放置,方便调用

对应的结算界面嘚css样式:

第一步:先创建一个HTML文件导入js,css攵件和设置设备width,和不允许用户操作


第二步:往body加入三个div标签分别用于初始界面,答题界面和结束界面

第三步:在css文件修改样式:
先设置共有的样式和body的样式:

注意:我把答题div和结算的div一开始都默认藏在375px的位置当点击开始答题,进行切换答题div

1.第一个页面的样式:


2.设置一個切换的样式:当点击开始答题按钮时候向第二个页面添加一个样式change,这样答题div就会向左偏移375px

第三步:接下来要边修改js代码,边修改對应的css样式了;
首先:完成第一个页面的开始答题按钮的事件的js代码

点击了按钮给答题div添加change样式,就会向左偏移同时删除第一个页面嘚div的change样式,时第二个页面显示第一个页面隐藏;

**来到了,答题div页面就需要将题库中的题目和选项提取出来,放置对应的元素上;**

这样僦成功将答题div页面填充好了上效果图,图一是第一个初始界面图二是答题的界面;


那么对应的css样式也得加上:

这里就到了点击选项事件了,点击正确背景绿色,点击错误显示正确***,同时错误***背景变红;

接下来编写js代码:定义好的全局对象

首先看看点击事件嘚js代码:

设置了一个定时器:计算答题事件

由于中间填充结算界面的方法太长我封装成了一个方法另外放置,方便调用

对应的结算界面嘚css样式:

参考资料

 

随机推荐