小程序答题小游戏上篇功能实现

小程序答题小游戏>>下篇功能优化

//INDEX.WXML
<!--logs.wxml-->
<view class="cont"><!-- 第一步 --><view class='header'><block wx:for="{{numList}}" wx:key="key"><label class='radio' wx:if="{{item.id==indexId}}" style='background:slateblue;opcity:0.8;color:#fff;'>{{item.id}}</label><label class='radio' wx:else>{{item.id}}</label></block></view><!-- 第二步 --><view class='content'><view class='question'>{{questionName}}</view><button class='answer' data-text1='{{text1}}'data-text2='{{text2}}' bindtap='btnAnswer' data-questionName='{{questionName}}'>{{text1}}</button><button class='answer' data-text1='{{text1}}'data-text2='{{text2}}'  bindtap='btnAnswer' data-questionName='{{questionName}}'>{{text2}}</button></view><!-- 第三步 --><view class='submit'><label class='btn' bindtap='submit'>下一题</label></view></view>

//INDEDX.WXSS
page {
background: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558346332592&di=fa5b9031fe00629d9acaef47297e3a2c&imgtype=0&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fitem%2F201506%2F22%2F20150622102017_zi2Be.thumb.700_0.jpeg")no-repeat;
background-size: 100% 100%;
width: 100%;
height: 100vh;
}.header {position: relative;width: 100%;height: 70rpx;line-height: 70rpx;padding: 5rpx 0rpx;float: left;top:168rpx;
}.radio {position: relative;width: 60rpx;line-height: 60rpx;text-align: center;height: 60rpx;float: left;left: 10rpx;margin: 5rpx;display: inline-block;background-color: #fff;border-radius: 50%;border: 1rpx solid #333;
}.content {position: relative;margin: auto;width: 90%;height: 448rpx;text-align: center;background-color: salmon;opacity: 0.8;color: #fff;top:330rpx;border-radius: 15rpx;
}.submit {position: relative;width: 100%;display: inline-block;height: 100rpx;line-height: 100rpx;text-align: center;top:382rpx;
}.btn {width: 90%;height: 100rpx;display: inline-block;border-radius: 15rpx;font-size: 30rpx;line-height: 100rpx;background-color:cornflowerblue;color: #fff;opacity: 0.8;
}.question{
position:absolute;
width:400rpx;
height:60rpx;
line-height:60rpx;
left:82rpx;
top:55rpx;
}
.suiji{position: absolute;top:55rpx;width: 100rpx;height: 50rpx;font-size: 25rpx;line-height: 50rpx;text-align: center;padding: 0rpx 5rpx;right: 30rpx;border-radius: 35rpx;background-color: #333;color: #fff;
}
.answer{position:relative;display: inline-block;width: 80%;height: 100rpx;text-align: center;border-radius: 10rpx;background-color: #f5f5f5;line-height: 100rpx;margin-bottom: 20rpx;top: 70rpx;
}
.answer:hover{background-color: #333;color: #fff;
}

//INDEX.JS
//logs.js
const util = require('../../utils/util.js')
var app = new getApp();
Page({data: {indexId: 1,show: false,numList: [{id: 1}, {id: 2}, {id: 3}, {id: 4}, {id: 5}, {id: 6}, {id: 7}, {id: 8}, {id: 9}, {id: 10}, ],question: [{name: "关于星座?"}, {name: "关于另一半?"}, {name: "你的思想污吗?"}, {name: "平时爱哭吗?"}, {name: "旅行之前准备?"}, {name: "说说你暗恋的对象吧!"}, {name: "有懒床的习惯吗?"}, {name: "和对象吵架之后?"}, {name: "爱情勇气?"}, {name: "关于喝酸奶?"}],text1: "我很相信星座是一个星座达人",text2: "我不相信感觉很假"},onLoad: function() {this.setData({list: app.globalData.lable_list,questionName: "关于星座?"})},/*** 选择答案*/btnAnswer(e) {console.info(e.currentTarget.dataset);this.setData({text1: e.currentTarget.dataset.text1,text2: e.currentTarget.dataset.text2,questionName: e.currentTarget.dataset.questionname})},// 下一题submit(e) {var that = this;var obj = [{name: "我很相信星座是一个星座达人"}, {name: "我不相信感觉很假"}, {name: "我更看重另一半的脸跟身材"}, {name: "我更看重另一半的性格人品"}, {name: "我生活中是一个很污的人"}, {name: "我是小纯洁不污"}, {name: "我不喜欢哭因为没有用"}, {name: "忍不住就是想哭"}, {name: "我喜欢自己安排做攻略"}, {name: "我喜欢说走就走"}, {name: "我也暗恋过喜欢的人..."}, {name: "我从不搞暗恋喜欢就去追"}, {name: "闹钟一响准时起床"}, {name: "关掉闹钟再睡会"}, {name: "主动承认错误和好"}, {name: "等着啥也不干"}, {name: "大胆表白喜欢就追"}, {name: "很怂憋着喜欢"}, {name: "每次喝酸奶都会舔盖子"}, {name: "我是土豪从来不舔盖"}, ];if (this.data.text1 != null && this.data.text1 != "") {this.data.indexId++;if (this.data.indexId == 10) {this.setData({indexId: 1,text1: obj[0].name,text2: obj[1].name,questionName: this.data.question[0].name})} else {for (var i in obj) {//判断是否达到了最后一个，此时数组中的数据没有与输入框中相同的，设置成数组的第一个值if (i == (obj.length - 1)) {that.setData({text1: obj[0].name,text2: obj[1].name});break;}//如果有相同的数据则换数组的下一个数据if (obj[i].name == that.data.text1) {console.info(1);var num = parseInt(i) + 2;var nums = parseInt(i) + 3;that.setData({indexId: that.data.indexId,text1: obj[num].name,text2: obj[nums].name,})break;}}// 随机问题for (var i in that.data.question) {//判断是否达到了最后一个，此时数组中的数据没有与输入框中相同的，设置成数组的第一个值if (i == (that.data.question.length - 1)) {that.setData({questionName: that.data.question[0].name});break;}//如果有相同的数据则换数组的下一个数据if (that.data.question[i].name == that.data.questionName) {var num = parseInt(i) + 1;that.setData({indexId: that.data.indexId,list: that.data.list,questionName: that.data.question[num].name,})break;}}}} else {}}
})

小程序答题小游戏上篇功能实现相关推荐

创建 Input Search 对象自己设计答题小程序微信小程序设置自己的答题操作讲解我要出题app|我要出题小程序自定义微信答题小程序的制作方法微信答题小程序答题小程序
您可以通过使用 document.createElement() 方法来创建 <search> 元素: var x = document.createElement("INPUT ...
nba2kol小程序 nba2kol2小程序 nba2k小程序
搜索小程序:nba2k游戏助手功能介绍 nba2kol.nba2kol2.nba2k19游戏助手,支持球员对比.ol三包.ol2徽章.ol2历史数据查询.ol2热区等各属性单项及多项筛选(徽章等级( ...
游戏开发需要具备哪些技术_小程序商城开发具备哪些功能？
小程序商城开发具备哪些功能?河南互金网络科技有限公司业务范围包括:软件开发.app开发.微信开发.网站建设.微信小程序开发等.在网站开发.APP开发.ERP以及大型软件开发方面积累了丰富的项目经验和技 ...
【趣玩猜谜语小程序5.1.0】功能模块+前端+内含1000多题目+自带引流+文字图片自定义
趣玩猜谜语小程序5.1.0]功能模块+前端+内含1000多题目+自带引流+文字图片自定义源码简介与安装说明: 趣玩猜谜语小程序5.1.0+前端猜谜语本身和猜成语一样是有趣的小游戏,不仅仅在元宵节, ...
Rust盒子小程序更新拍照查外挂功能，还能查Steam账户信息
一出门就被爆锤?是技术太菜还是遇到了外挂?对于Rust玩家来说,碰到外挂司空见惯.那怎么快速判断对方是枪法好,还是开了挂? 一般情况下,被击杀多次后,老司机会抄下对方的SteamId号,切出游戏.去S ...
微信小程序答题页——swiper渲染优化及swiper分页实现
前言 swiper的加载太多问题,网上资料好像没有一个特别明确的,就拿这个答题页,来讲讲我的解决方案这里实现了如下功能和细节: 保证swiper-item的数量固定,加载大量数据时,大大优化渲染效率 ...
一个Web人眼中的小程序和小游戏
当年张小龙说:"小程序是一个不需要下载安装就可以使用的应用".我的第一反应是,不需要下载的应用,那不就是Web么? 后来,小程序在"雷声大,雨点小"的环境中度过 ...
微信小程序、小游戏，组件化开发框架wepy开发资源汇总分享
移动互联网时代,小程序已经渗透到各行各业,为互联网从业者提供很多的工作机会,分享一个小程序.小游戏开发的资源合集,涉及相关官方文档.资源,开源项目,功能和UI相关组件资源,经典文章资源等. 资源整理自 ...
小程序变现必备，支付功能快速接入
从产品框架搭建到页面设计,从数据库建立到核心功能实现,知晓云(cloud.minapp.com)为小程序开发者提供了不少的便捷,例如常用的电商数据表模版和简单好用的 API,省去了后端数据接口的设计和 ...

小程序答题小游戏上篇功能实现

小程序答题小游戏上篇功能实现相关推荐

最新文章

热门文章