微信H5测试答题抽奖

通过答题参与抽奖活动。

根据用户选择的答案给出一个测评等级或系统评价

如图：

思路很简单：

得到相应的题目和答案

$(jason).each(function (j,e) {let jason=(that.data[i].answer)[j];let keys = [];for (let p1 in jason) {if (jason.hasOwnProperty(p1))keys.push(p1);}$(".list").append('<li><c>'+keys[0]+'</c><a>'+jason[keys[0]]+'</a></li>')
});

获取题目答案信息时，通过循环选项避免出现多选题的情况

选择答案记录得分
根据得分给出系统评价
canvas实现截图功能

var cntElem = $('.show')[0];
var shareContent = cntElem;//需要截图的包裹的（原生的）DOM 对象
var width = shareContent.offsetWidth; //获取dom 宽度
var height = shareContent.offsetHeight; //获取dom 高度
var canvas = document.createElement("canvas"); //创建一个canvas节点
var scale = 2; //定义任意放大倍数 支持小数
canvas.width = width * scale; //定义canvas 宽度 * 缩放
canvas.height = height * scale; //定义canvas高度 *缩放
canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
var opts = {scale: scale, // 添加的scale 参数canvas: canvas, //自定义 canvas// logging: true, //日志开关，便于查看html2canvas的内部执行流程width: width, //dom 原始宽度height: height,useCORS: true // 【重要】开启跨域配置
};
html2canvas(shareContent, opts).then(function (canvas) {var context = canvas.getContext('2d');// 【重要】关闭抗锯齿context.mozImageSmoothingEnabled = false;context.webkitImageSmoothingEnabled = false;context.msImageSmoothingEnabled = false;context.imageSmoothingEnabled = false;// 【重要】默认转化的格式为png,也可设置为其他格式var img = Canvas2Image.saveAsPNG(canvas, canvas.width, canvas.height);document.body.appendChild(img);$(img).css({"width": canvas.width / 2 + "px","height": canvas.height / 2 + "px","position":"fixed","top":"0","left":"0","opacity":"0","z-index":'222','display':'none'}).addClass('f-full');
});

小白菜一枚，欢迎指正(〃‘▽’〃)
效果预览：https://bestjhh.github.io/answer/
完整代码：https://github.com/bestjhh/answer

微信H5测试答题抽奖相关推荐

h5大转盘抽奖源码后台_微信H5互动营销应该要如何做？
现在微信营销的队伍有越来越多的人群,许多的企业品牌都会选择用微信营销,而微信营销这么受欢迎是因为微信拉近了用户与企业品牌的关系.其中H5互动营销是最受欢迎的一种方式,那么微信H5互动营销要如何做呢? ...
微信H5配置测试的appId和secret
一进入公众号平台找到开发者工具,然后进入公众号测试账号二配置自己使用的域名三关注测试号这个只是大概配置,详细配置不方便给出,注意测试号是不可以测试支付功能.注意微信小程序 ...
微信html5测试工具,FAutoTest- 微信小程序 / 公众号 H5 自动化利器
X5 内核 H5 自动化背景近来有很多童靴咨询如何做微信小程序/公众号等 H5 页面来做自动化,之前写了一篇文章微信小程序自动化测试实践 https://www.cnblogs.com/yyoba/ ...
php答题测试,ThinkPHP框架开发的微信考试问卷答题系统_学生在线考试答题系统
源码介绍 ThinkPHP框架开发的微信考试问卷答题系统,通过微信公众平台进行问卷答题,适合用来做问卷调查,也可以用来做学生考试答题系统,还有完善的问卷后台管理系统,可自定义上传问卷,支持成绩表查询. ...
微信html5测试工具,腾讯优测推出微信内H5测试工具 10分钟完成检测
原标题:腾讯优测推出微信内H5测试工具 10分钟完成检测腾讯优测推出微信内H5测试工具 12月21日消息,微信做为H5应用最常见的传播阵地,非常需要有一个全面可靠并且有针对性的测试工具.昨日晚些时候 ...
vue.js中H5使用微信摇一摇抽奖，判断摇一摇次数
微信摇一摇抽奖: export default {data() {return {SHAKE_THRESHOLD:4000,//定义一个摇动的值last_update :0,//定义一个变量保存上次更 ...
h5 登录页面_一份写给新手的微信H5页面制作流程介绍
作为一种非常受欢迎的营销推广方式,H5页面具有交互性好.易于传播.感官体验丰富.利于效果追踪等优势.由于H5页面的传播主阵地是微信,所以很多刚接触H5页面的新手经常误以为H5页面只能在微信中传播,也就 ...
意派Epub360 | 制作微信H5页面的流程思路引导
H5页面其实就是一种可交互的网页,除非要在其中设置微信授权(此举是为了获取用户的微信昵称及头像信息),否则也是可以直接在浏览器中在线浏览的,既方便又不占内存.一般来说,制作H5页面的流程基本有:确认项 ...
对hash签名失败_详解Vue开发微信H5微信分享签名失败问题解决方案
关于Vue中路由使用history模式,开发微信H5页面分享时在安卓上签名有效成功,但是在IOS设备上一直报错签名失效问题问题描述:在Vue开发过程中,路由使用History模式下,在使用微信分享时 ...

微信H5测试答题抽奖

微信H5测试答题抽奖相关推荐

最新文章

热门文章