微信小程序答题功能（一）- -

效果图如下所示

时间到了也会直接返回到上级页面因为只能上传5M所以就没录了

跳转页面

.wxml

<button bindtap="questions" style="margin-top: 50rpx;">去答题</button>

.js

Page({data: {},onShow:function(e){let answer = wx.getStorageSync('answer')if (JSON.stringify(answer) != '""'){wx.showToast({title: '答对了:' + answer +'题',icon: 'none',duration: 3000})wx.removeStorageSync('answer')}},questions:function(e){wx.navigateTo({url: '答题页面路径',//请修改成答题页面路径})},
})

答题页面

.wxml

<view class="time"><view class="time-curin">{{time}}</view>
</view>
<view class="centent" wx:for="{{detail}}" wx:key="index" wx:if="{{index == number}}"><view class="centent-title">{{index+1}}. {{item.title}}</view><view class="centent-curren" wx:for="{{item.array}}" wx:for-item="cell" wx:key="index"data-uid="{{item.id}}" data-index="{{index}}" bindtap="answer" style="{{showback?'color:#fff;':''}}{{showback && cell.usname?'background-color:#e03997;':''}}{{showback && !cell.usname?'background-color:#9000ff;':''}}">{{cell.name}}</view>
</view>

.wxss

view{box-sizing: border-box;
}
.time{width: 100%;float: left;text-align: center;
}
.time-curin{width: 280rpx;height: 280rpx;line-height: 280rpx;background-color: #d7f0db;color: #39b54a;border-radius: 50%;margin: 0 auto;font-weight: 700;font-size: 36rpx;position: relative;
}
.time-curin::before {content: "";display: block;background-color: #ccc;filter: blur(10rpx);position: absolute;width: 100%;height: 100%;top: 10rpx;left: 10rpx;z-index: -1;opacity: 0.4;transform-origin: 0 0;border-radius: inherit;transform: scale(1, 1);
}
.centent{width: 100%;float: left;padding: 5% 3% 3% 3%;overflow: hidden;
}
.centent-title{width: 100%;float: left;overflow: hidden;line-height: 46rpx;font-size: 32rpx;
}
.centent-curren{width: 100%;float: left;overflow: hidden;padding: 2% 0;margin-top: 30rpx;text-align: center;border:1px solid #ddd;font-size: 26rpx;border-radius: 10rpx;color: #666;
}

.js

Page({data: {detail: [{id: '1', title: 'CSDN：https://blog.csdn.net/qq_43764578 QQ:1010753897', array: [{ name: '错误答案', usname: false }, { name: '正确答案', usname: true },{ name: '错误答案', usname: false }, { name: '错误答案', usname: false },]},{id: '2', title: 'CSDN：https://blog.csdn.net/qq_43764578 QQ:1010753897', array: [{ name: '正确答案', usname: true }, { name: '错误答案', usname: false },{ name: '错误答案', usname: false }, { name: '错误答案', usname: false },]},{id: '3', title: 'CSDN：https://blog.csdn.net/qq_43764578 QQ:1010753897', array: [{ name: '错误答案', usname: false }, { name: '错误答案', usname: false },{ name: '错误答案', usname: false }, { name: '正确答案', usname: true },]},{id: '4', title: 'CSDN：https://blog.csdn.net/qq_43764578 QQ:1010753897', array: [{ name: '错误答案', usname: false }, { name: '错误答案', usname: false },{ name: '正确答案', usname: true }, { name: '错误答案', usname: false },]},],number: 0,bingo: 0,showback: false,time: '60',},onUnload:function(e){wx.setStorageSync('answer', this.data.bingo)},onLoad: function (options) {let that = thislet timer = setInterval(function () {that.setData({time: that.data.time - 1,})if (that.data.time <= 0) {clearInterval(timer);wx.setStorageSync('answer', that.data.bingo)wx.navigateBack({delta: 1})}}, 1000)},answer: function (e) {let that = thislet uid = e.currentTarget.dataset.uidlet index = e.currentTarget.dataset.indexlet detail = that.data.detailfor (let i = 0; i < detail.length; i++) {if (detail[i].id == uid) {if (detail[i].array[index].usname) {that.data.bingo++that.setData({bingo: that.data.bingo})}}}that.data.number++that.setData({showback: true,})setTimeout(function () {if (that.data.number == detail.length) {wx.setStorageSync('answer', that.data.bingo)wx.navigateBack({delta: 1})} else {that.setData({number: that.data.number,showback: false,})}}, 1000)},
})

对你有帮助的话记得收藏点赞，有什么问题欢迎评论留言。

微信小程序答题功能（一）- - - 倒计时答题相关推荐

微信小程序在线成语接龙答题有奖1.5.1版源码
简介: 微信小程序在线成语接龙答题有奖源码是一款搭建在微擎上使用的成语接龙答题有奖红包,可配合流量主推广,广告变现,后台含有区间余额区间奖励配置,自定义金额提现配置: 题库后台自己输入就可以. 开通 ...
微信小程序在线成语接龙答题有奖猜灯谜红包有奖小程序源码
微信小程序在线成语接龙答题有奖源码是一款搭建在微擎上使用的成语接龙答题有奖红包,可配合流量主推广,广告变现,后台含有区间余额区间奖励配置,自定义金额提现配置: 题库后台自己输入就可以. 开通流量主后 ...
微信 php收藏功能实现,关于微信小程序收藏功能的实现
这篇文章主要介绍了微信小程序收藏功能的实现代码,基本功能是点击收藏后显示已收藏,在另一个页面出现目前点击收藏的项目.需要的朋友可以参考下需求点击收藏后显示已收藏,在另一个页面出现目前点击收藏的项目 ...
微信小程序插件功能页开发详细流程
有问题可以扫码加我微信,有偿解决问题.承接小程序开发. 微信小程序开发交流qq群 173683895 . 526474645 : 正文: 关于新出的微信小程序插件功能页做一下记录,希望能帮到大 ...
微信小程序php后台支付,微信小程序支付功能实现PHP实例详解
微信小程序支付功能实现PHP实例详解前端代码: wx.request({ url: 'https://www.yourhost.com/weixin/WeiActivity/payJoinfee' ...
python个人微信支付接口_Python实现微信小程序支付功能
正文由于最近自己在做小程序的支付,就在这里简单介绍一下讲一下用python做小程序支付这个流程.当然在进行开发之前还是建议读一下具体的流程,清楚支付的过程. 1.支付交互流程 2.获取openid( ...
vc++6.0获取磁盘基本信息_微信小程序——常用功能2：微信小程序用户登录，申请用户授权并获取用户基本信息...
微信小程序--常用功能2:申请用户授权并获取用户基本信息为了更好的用户体验,很多时候我们想要获取用户的基本信息,从而实现将信息呈现到用户界面.给用户划分地域.给用户分类等功能. 但是要想获取用户信息 ...
python微信小程序抢购_Python实现微信小程序支付功能！Python确实强的一批！
正文由于最近自己在做小程序的支付,就在这里简单介绍一下讲一下用python做小程序支付这个流程.当然在进行开发之前还是建议读一下具体的流程,清楚支付的过程. 1.支付交互流程 2.获取openid( ...
微信小程序支付功能用服务器吗,微信小程序支付功能服务器端（TP5.1）实现...
首先下载微信支付SDK ,将整个目录的文件放在 /application/extend/WxPay 目录下在使用SDK之前我们需要对 WxPay.Config.php 进行配置 namespace ...
智慧物业小程序_物业小程序物业微信小程序目前功能最全的物业小程序
原标题:物业小程序物业微信小程序目前功能最全的物业小程序以物业管理为核心,打造智慧社区云微信小程序管理平台,已入驻腾讯海纳社区,物业微信小程序,解决传统物业管理难,乱差的问题,利用微信小程序提供一整 ...

微信小程序答题功能（一）- - - 倒计时答题

跳转页面

答题页面

微信小程序答题功能（一）- - - 倒计时答题相关推荐

最新文章

热门文章