欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序?qū)崿F(xiàn)動(dòng)態(tài)驗(yàn)證碼

 更新時(shí)間：2022年05月23日 11:19:13   作者：XJ_18335388352  
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)動(dòng)態(tài)驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)動(dòng)態(tài)驗(yàn)證碼的具體代碼，供大家參考，具體內(nèi)容如下

一、創(chuàng)建自定義組件verification-code

verification-code.js

// pages/test1/verificationQr/verificationQr.js
var ctx;
Component({
? /**
? ?* 組件的屬性列表
? ?*/
? properties: {
? ? width:{
? ? ? type: Number,
? ? ? value: 150
? ? },
? ? height: {
? ? ? type: Number,
? ? ? value: 48
? ? },
? ? count:{
? ? ? type:Number,
? ? ? value:4
? ? },
? ? fontSize: {
? ? ? type: Number,
? ? ? value: 34
? ? },
? ? fontFamily:{
? ? ? type: String,
? ? ? value: "SimHei"
? ? }
? },

? /**
? ?* 組件的初始數(shù)據(jù)
? ?*/
? data: {
? ? text: '',
? ? count: 4,
? ? width:90,
? ? height:28,
? ? fontSize:30,
? ? fontFamily:"SimHei"
? },

? ready() {
? ? this.setData({
? ? ? count:this.properties.count,
? ? ? width:this.properties.width,
? ? ? height:this.properties.height,
? ? ? fontSize:this.properties.fontSize,
? ? ? fontFamily:this.properties.fontFamily
? ? })
? ? this.drawPic(this)
? },
? /**
? ?* 組件的方法列表
? ?*/
? methods: {
? ? crash(){
? ? ? this.drawPic(this)
? ? },
? ? /**繪制驗(yàn)證碼圖片**/
? ? drawPic(that) {
? ? ? ctx = wx.createCanvasContext('canvas',this);
? ? ? /**繪制背景色**/
? ? ? ctx.fillStyle = randomColor(180, 240); //顏色若太深可能導(dǎo)致看不清
? ? ? ctx.fillRect(0, 0, that.data.width, that.data.height)
? ? ? /**繪制文字**/
? ? ? var arr;
? ? ? var text = '';
? ? ? var str = 'ABCEFGHJKLMNPQRSTWXY123456789';
? ? ? for (var i = 0; i < that.data.count; i++) {
? ? ? ? var txt = str[randomNum(0, str.length)];
? ? ? ? ctx.fillStyle = randomColor(50, 160); //隨機(jī)生成字體顏色
? ? ? ? ctx.font = randomNum(20, 26) + 'px SimHei'; //隨機(jī)生成字體大小
? ? ? ? var x = 10 + i * 20;
? ? ? ? var y = randomNum(25, 30);
? ? ? ? var deg = randomNum(-30, 30);
? ? ? ? //修改坐標(biāo)原點(diǎn)和旋轉(zhuǎn)角度
? ? ? ? ctx.translate(x, y);
? ? ? ? ctx.rotate(deg * Math.PI / 180);
? ? ? ? ctx.fillText(txt, 5, 0);
? ? ? ? text = text + txt;
? ? ? ? //恢復(fù)坐標(biāo)原點(diǎn)和旋轉(zhuǎn)角度
? ? ? ? ctx.rotate(-deg * Math.PI / 180);
? ? ? ? ctx.translate(-x, -y);
? ? ? }
? ? ? /**繪制干擾線**/
? ? ? for (var i = 0; i < 4; i++) {
? ? ? ? ctx.strokeStyle = randomColor(40, 180);
? ? ? ? ctx.beginPath();
? ? ? ? ctx.moveTo(randomNum(0, that.data.width), randomNum(0, that.data.height));
? ? ? ? ctx.lineTo(randomNum(0, that.data.width), randomNum(0, that.data.height));
? ? ? ? ctx.stroke();
? ? ? }
? ? ? /**繪制干擾點(diǎn)**/
? ? ? for (var i = 0; i < 20; i++) {
? ? ? ? ctx.fillStyle = randomColor(0, 255);
? ? ? ? ctx.beginPath();
? ? ? ? ctx.arc(randomNum(0, that.data.width), randomNum(0, that.data.height), 1, 0, 2 * Math.PI);
? ? ? ? ctx.fill();
? ? ? }
? ? ? ctx.draw(false, function() {
? ? ? ? console.log(text)
? ? ? ? that.triggerEvent('result', { text });
? ? ? ? that.setData({
? ? ? ? ? text: text,
? ? ? ? })
? ? ? })
? ? }
? }
})
function randomNum(min, max) {
? return Math.floor(Math.random() * (max - min) + min);
}
/**生成一個(gè)隨機(jī)色**/
function randomColor(min, max) {
? var r = randomNum(min, max);
? var g = randomNum(min, max);
? var b = randomNum(min, max);
? return "rgb(" + r + "," + g + "," + b + ")";
}

verification-puzzle.json

{
? "component": true,
? "usingComponents": {}
}

verification-puzzle.wxml

<canvas style="width:{{width}}px;height:{{height}}px" canvas-id="canvas" bindtap='crash'></canvas>

二、在index頁(yè)面使用

index.wxml

<verification-code id="verification"></verification-code>
<view bindtap="crash">刷新</view>

index.js

// pages/test/test/test.js
Page({

? /**
? ?* 頁(yè)面的初始數(shù)據(jù)
? ?*/
? data: {},
? crash() {
? ? this.verification.crash()
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
? ?*/
? onLoad: function (options) {
??
? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁(yè)面初次渲染完成
? ?*/
? onReady: function () {
?? ?this.verification = this.selectComponent('#verification')
? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁(yè)面顯示
? ?*/
? onShow: function () {

? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁(yè)面隱藏
? ?*/
? onHide: function () {

? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁(yè)面卸載
? ?*/
? onUnload: function () {

? },

? /**
? ?* 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
? ?*/
? onPullDownRefresh: function () {

? },

? /**
? ?* 頁(yè)面上拉觸底事件的處理函數(shù)
? ?*/
? onReachBottom: function () {

? },

? /**
? ?* 用戶點(diǎn)擊右上角分享
? ?*/
? onShareAppMessage: function () {

? }
})

index.json

{
? "usingComponents": {
? ?? ?"verification-code": "/components/verification-code/verification-code"
?? ?}
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • 如何實(shí)現(xiàn)小程序與小程序之間的跳轉(zhuǎn)

    如何實(shí)現(xiàn)小程序與小程序之間的跳轉(zhuǎn)

    這篇文章主要給大家介紹了關(guān)于如何實(shí)現(xiàn)小程序與小程序之間的跳轉(zhuǎn)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-11-11
  • 求js數(shù)組的最大值和最小值的四種方法

    求js數(shù)組的最大值和最小值的四種方法

    本篇文章主要介紹了求js數(shù)組的最大值和最小值的四種方法，具有很好的參考價(jià)值。下面跟著小編一起來看下吧
    2017-03-03
  • ckeditor一鍵排版功能實(shí)現(xiàn)方法分析

    ckeditor一鍵排版功能實(shí)現(xiàn)方法分析

    這篇文章主要介紹了ckeditor一鍵排版功能實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了ckeditor一鍵排版相關(guān)擴(kuò)展插件定義、配置與使用方法,需要的朋友可以參考下
    2020-02-02
  • js仿京東放大鏡

    js仿京東放大鏡

    這篇文章主要為大家詳細(xì)介紹了js仿京東放大鏡，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-07-07
  • 微信小程序?qū)崿F(xiàn)音樂播放器

    微信小程序?qū)崿F(xiàn)音樂播放器

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)音樂播放器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2019-11-11
  • js不能獲取隱藏的div的寬度只能先顯示后獲取

    js不能獲取隱藏的div的寬度只能先顯示后獲取

    js不能獲取隱藏div的的寬度，現(xiàn)在的辦法是先將其顯示出來，再獲取其寬度，計(jì)算位置，下面的示例，大家可以參考下
    2014-09-09
  • JS數(shù)組求和的幾種常見方法總結(jié)

    JS數(shù)組求和的幾種常見方法總結(jié)

    js的數(shù)組與我們?nèi)粘Ｉ钪械臄?shù)組一樣,都是會(huì)進(jìn)行求和計(jì)算的,下面這篇文章主要給大家介紹了關(guān)于JS數(shù)組求和的幾種常見方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-01-01
  • 兼容IE/Firefox/Opera/Safari的檢測(cè)頁(yè)面裝載完畢的腳本Ext.onReady的實(shí)現(xiàn)

    兼容IE/Firefox/Opera/Safari的檢測(cè)頁(yè)面裝載完畢的腳本Ext.onReady的實(shí)現(xiàn)

    其中對(duì)于IE的檢測(cè)很有意思。 以上代碼，整理自Extjs的腳本，完全可以代替 Ext.onReady使用。
    2009-07-07
  • JavaScript中添加監(jiān)聽句柄的方式

    JavaScript中添加監(jiān)聽句柄的方式

    這篇文章主要介紹了JavaScript中添加監(jiān)聽句柄的方式，監(jiān)聽就是觸發(fā)某事件之后做出的響應(yīng),監(jiān)聽句柄是觸發(fā)某相應(yīng)的條件，下面關(guān)于添加監(jiān)聽句柄的方式的詳細(xì)內(nèi)容，需要的朋友可以參考一下，希望對(duì)你有所幫助
    2022-02-02
  • JavaScript實(shí)現(xiàn)twitter puddles算法實(shí)例

    JavaScript實(shí)現(xiàn)twitter puddles算法實(shí)例

    這篇文章主要介紹了JavaScript實(shí)現(xiàn)twitter puddles算法實(shí)例,本文源自twitter的一道面試題,本文使用js解開了這首題,需要的朋友可以參考下
    2014-12-12

最新評(píng)論