新鑫工具箱（微信小程序）

╰+攻爆jí腚メ 2022-09-09 06:08 169阅读 0赞

微信小程序：新鑫工具箱

不需要下载安装即可使用手持弹幕、生成二维码、英汉互译、压缩图片、天气预报等实用功能，实现了应用“触手可及”。
watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSc56m65Lit5pyA5Lqu55qE5paw6ZGr_size_17_color_FFFFFF_t_70_g_se_x_16_pic_center

一、工具详解

新鑫工具箱是一个多功能聚合的工具箱，一个小程序帮你实现多个功能。

watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSc56m65Lit5pyA5Lqu55qE5paw6ZGr_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center

1. ICP备案信息

输入域名后，点击查看ICP备案信息即可看到域名主办单位名称、主办单位性质、备案许可证号（备案号）、网站备案名称、网站首页网址、备案审核时间、最新审核检测以及百度收录量。
watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSc56m65Lit5pyA5Lqu55qE5paw6ZGr_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1

2. 身份证信息

输入身份证后，点击查看身份证信息即可看到身份证对应的性别、年龄、公历生日、农历生日、地区、生肖以及星座。（注：该功能只用于查看身份证的基本信息，未涉及收集、存储用户身份敏感信息，可放心使用。）
watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSc56m65Lit5pyA5Lqu55qE5paw6ZGr_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 2

3. 生成二维码

输入二维码内容（扫码后显示内容）、网址（扫码后进入该网站）后，点击生成二维码即可。手机授予小程序相册权限，点击保存至相册可以保存到手机相册。二维码生成作用就是将一些比较大的文件，或者是不方便进行传输的文件转化成为二维码的形式，接受者可以用手机自带的二维码扫描软件进行扫描，就可以直接获取文件，这样也能够避免文件在传输的过程之中出现损坏的情况。同时，二维码也可以用于一些特殊的需求，比如有人会用二维码生成功能来制作一个小程序，从而跟心爱的人表白，或者完成一些其他的工作任务等等。总而言之，二维码生成的作用是非常广泛的。
watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSc56m65Lit5pyA5Lqu55qE5paw6ZGr_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 3

4. 生成短网址

输入网址后，点击生成短网址即可。点击复制短网址即可放入手机剪贴板。如果需要发一些链接，但是这个链接非常的长，所以短网址应运而生了。
watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSc56m65Lit5pyA5Lqu55qE5paw6ZGr_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 4

5. 手机号归属地

输入手机号后，点击查看归属地即可看到手机号所属省份、城市、运营商、区号以及邮编。手机号码设定归属地除了便于号码资源管理，同时客户需了解所办理卡的业务咨询能正常受理，因各区域资费不一样，故必须有归属地。
watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSc56m65Lit5pyA5Lqu55qE5paw6ZGr_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 5

6. 进制转换

选择需要转换的进制，输入对应的进制数后，点击进制转换即可看到转换后的二进制、八进制、十进制以及十六进制。可复制转换后的进制。首先1和0是计算机可以识别的语言，当然人类也可以识别，但是如果给你一串0和1的序列，你能很快知道他代表的是多少吗？进行进制转换，最主要的原因就是：便于人机沟通！
watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSc56m65Lit5pyA5Lqu55qE5paw6ZGr_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 6

7. 英汉互译

输入需要翻译的英文或汉字后，点击翻译即可。可复制译文，点击原文美音、英音，译文美音、英音可播放对应的发音。翻译是一种实现语言沟通的方式，能够通过英语这种世界语言来实现沟通和交流。
watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSc56m65Lit5pyA5Lqu55qE5paw6ZGr_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 7

8. 压缩图片

从手机相册选择或拍摄需要压缩的图片后，点击压缩并保存至相册即可。压缩是一种通过特定的算法来减小计算机文件大小的机制。这种机制是一种很方便的发明，尤其是对网络用户，因为它可以减小文件的字节总数，使文件能够通过较慢的互联网连接实现更快传输，此外还可以减少文件的磁盘占用空间。
watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSc56m65Lit5pyA5Lqu55qE5paw6ZGr_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 8

9. 称呼计算

由于工作生活节奏不同，如今很多关系稍疏远的亲戚之间来往并不多。因此放假回家过年时，往往会搞不清楚哪位亲戚应该喊什么称呼，很是尴尬。然而搞不清亲戚关系和亲戚称呼的不仅是小孩，就连年轻一代的大人也都常常模糊混乱。“称呼计算”为你避免了这种尴尬，只需简单的输入即可算出称谓。快捷输入按键，只需简单的点击即可完成关系输入，算法当前只支持三层关系的称呼哦！
watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSc56m65Lit5pyA5Lqu55qE5paw6ZGr_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 9

10. 垃圾分类

由垃圾分类可以减少垃圾的处置量，减少焚烧和填埋等处理垃圾的行为，能在最大程度上保证垃圾处理的正常运行以及控制环境污染情况，还能够减少可回收垃圾造成的污染现象，循环的利用这些可回收物质，保证资源再生。
watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSc56m65Lit5pyA5Lqu55qE5paw6ZGr_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 10

二、源码展示

1. 手持弹幕

  1. const app = getApp()
  2. let times = null
  3. Page({ 
  4.   /** * 页面的初始数据 */
  5.   data: { 
  6.     marginTop:0,
  7.     screenheight:0,//屏幕高度
  8.     screenwidth:0,//屏幕宽度
  9.     textheight:0,//文本高度
  10.     barrage:"",//弹幕内容
  11.     barragebackground:"",//背景颜色
  12.     barragecolor:"",//弹幕颜色
  13.     return:"display:none",//隐藏返回按钮
  14.     avg:2.5,//倍数
  15.   },
  16.   /** * 启动定时器 */
  17.   startInter : function(){ 
  18.     var that = this;
  19.     that.setData({ 
  20.       barrage:app.globalData.barrage,
  21.       barragecolor:app.globalData.barragecolor,
  22.       barragebackground:app.globalData.barragebackground,
  23.       barragesize:app.globalData.barragesize
  24.     })
  25.     wx.getSystemInfo({ 
  26.       success: function(res){ 
  27.         var size = app.globalData.barragesize
  28.         if(size == 30){ 
  29.           that.setData({ 
  30.             avg:5,
  31.           })
  32.         }else if(size == 40){ 
  33.           that.setData({ 
  34.             avg:4,
  35.           })
  36.         }else if(size == 50){ 
  37.           that.setData({ 
  38.             avg:3,
  39.           })
  40.         }else if(size == 60){ 
  41.           that.setData({ 
  42.             avg:2.5,
  43.           })
  44.         }
  45.         that.setData({ 
  46.           marginTop:res.screenHeight,
  47.           screenheight:res.screenHeight,
  48.           screenwidth:res.screenWidth,
  49.         })
  50.       },
  51.     })
  52.     let query = wx.createSelectorQuery();
  53.     query.select('.barrage').boundingClientRect(function (e) { 
  54.       that.setData({ 
  55.         textheight:e.height
  56.       })
  57.     }).exec();
  58.     setInterval(
  59.       function () { 
  60.         // TODO 你需要无限循环执行的任务
  61.         if(that.data.marginTop > -that.data.textheight){ 
  62.           that.setData({ 
  63.             marginTop:--that.data.marginTop
  64.           })
  65.         }else{ 
  66.           that.setData({ 
  67.             marginTop:that.data.screenheight
  68.           })
  69.         }
  70.       },app.globalData.barragespeed
  71.     );
  72.   },
  73.   return: function() { 
  74.     wx.navigateBack({ 
  75.       delta: 1
  76.     })
  77.   },
  78.   mytouchstart:function(){ 
  79.     var that = this
  80.     if(times != null){ 
  81.       clearInterval(times);
  82.     }
  83.     that.setData({ 
  84.       return:"",//显示返回按钮
  85.     })
  86.     times = setTimeout(function () { 
  87.       that.setData({ 
  88.         return:"display:none",//隐藏返回按钮
  89.       })
  90.     },3000)
  91.   },
  92.   /** * 生命周期函数--监听页面显示 */
  93.   onShow: function () { 
  94.     this.startInter()
  95.   },
  96. })

2. 手写签名

  1. var content = null;
  2. var touchs = [];
  3. var canvasw = 0;
  4. var canvash = 0;
  6. //获取系统信息
  7. wx.getSystemInfo({ 
  8.   success: function (res) { 
  9.   canvasw = res.windowWidth;
  10.   canvash = canvasw;
  11.   },
  12. }),
  13. Page({ 
  14.   canvasIdErrorCallback: function (e) { 
  15.     console.error(e.detail.errMsg)
  16.   },
  17.   //开始
  18.   canvasStart: function (event) { 
  19.     isButtonDown = true;
  20.     arrz.push(0);
  21.     arrx.push(event.changedTouches[0].x);
  22.     arry.push(event.changedTouches[0].y);
  23.   },
  24.   /** * 页面的初始数据 */
  25.   data: { 
  26.     signImage : '',
  27.     is:true,
  28.     picker1Value:7,
  29.     picker2Value:1,
  30.     picker3Value:0,
  31.     pickerRange:['白色','黑色','红色','黄色','蓝色','绿色','紫色','橙色','粉色','棕色'],
  32.     back:'orange',
  33.     backs:'white',
  34.     col:'black',
  35.     size:5,
  36.     allDrawWorksPath:[],
  37.     screenHeight:0,
  38.     screenWidth:0,
  39.   },
  40.   //改变画笔粗细
  41.   bindchanging:function(e){ 
  42.     this.setData({ 
  43.       size:e.detail.value
  44.     })
  45.   },
  46.   //改变颜色
  47.   Picker1Bindchange:function(e){ 
  48.     this.setData({ 
  49.       picker1Value:e.detail.value
  50.     })
  51.     this.Colorchange(e.detail.value,"1")
  52.   },
  53.   //改变颜色
  54.   Picker2Bindchange:function(e){ 
  55.     this.setData({ 
  56.       picker2Value:e.detail.value
  57.     })
  58.     this.Colorchange(e.detail.value,"2")
  59.   },
  60.   //改变颜色
  61.   Picker3Bindchange:function(e){ 
  62.     this.setData({ 
  63.       picker3Value:e.detail.value
  64.     })
  65.     this.Colorchange(e.detail.value,"3")
  66.   },
  67.   //改变颜色
  68.   Colorchange:function(e,i){ 
  69.     var that = this
  70.     var x = "";
  71.     switch(e){ 
  72.       case "0":
  73.         x = "white"
  74.       break
  75.       case "1":
  76.         x = "black"
  77.       break
  78.       case "2":
  79.         x = "red"
  80.       break
  81.       case "3":
  82.         x = "yellow"
  83.       break
  84.       case "4":
  85.         x = "blue"
  86.       break
  87.       case "5":
  88.         x = "green"
  89.       break
  90.       case "6":
  91.         x = "violet"
  92.       break
  93.       case "7":
  94.         x = "orange"
  95.       break
  96.       case "8":
  97.         x = "pink"
  98.       break
  99.       case "9":
  100.         x = "brown"
  101.       break
  102.       default:
  103.         that.setData({ 
  104.           back:'orange',
  105.           col:'black',
  106.         })
  107.         return;
  108.     }
  109.     switch(i){ 
  110.       case "1":
  111.         that.setData({ 
  112.           back:x,
  113.         })
  114.       break
  115.       case "2":
  116.         that.setData({ 
  117.           col:x,
  118.         })
  119.       break
  120.       default:
  121.         that.setData({ 
  122.           backs:x,
  123.         })
  124.     }
  125.   },
  126.   // 画布的触摸移动开始手势响应
  127.   start: function (event) { 
  128.     //设置线的颜色
  129.     content.setStrokeStyle(this.data.col)
  130.     //设置线的宽度
  131.     content.setLineWidth(this.data.size)
  132.     // console.log("触摸开始" + event.changedTouches[0].x)
  133.     // console.log("触摸开始" + event.changedTouches[0].y)
  134.     //获取触摸开始的 x,y
  135.     let point = {  x: event.changedTouches[0].x, y: event.changedTouches[0].y }
  136.     touchs.push(point)
  137.   },
  139.   // 画布的触摸移动手势响应
  140.   move: function(e) { 
  141.     let point = { x: e.touches[0].x, y: e.touches[0].y}
  142.     touchs.push(point)
  143.     if(touchs.length >= 2) { 
  144.     this.draw(touchs)
  145.     }
  146.   },
  148.   // 画布的触摸移动结束手势响应
  149.   end: function(e){ 
  150.     console.log("触摸结束"+e)
  151.     //清空轨迹数组
  152.     for (let i = 0 ;i < touchs.length;i++ ){ 
  153.       touchs.pop()
  154.     }
  155.     this.saveClick();
  156.   },
  158.   // 画布的触摸取消响应
  159.   cancel: function(e) { 
  160.     console.log("触摸取消"+e)
  161.   },
  163.   // 画布的长按手势响应
  164.   tap: function(e) { 
  165.     console.log("长按手势"+e)
  166.   },
  168.   error: function(e){ 
  169.     console.log("画布触摸错误"+e)
  170.   },
  172.   //绘制
  173.   draw: function (touchs) { 
  174.     let point1 = touchs[0]
  175.     let point2 = touchs[1]
  176.     touchs.shift()
  177.     content.moveTo(point1.x, point1.y)
  178.     content.lineTo(point2.x, point2.y)
  179.     content.stroke()
  180.     content.draw(true)
  181.   },
  182.   //清除操作
  183.   clearClick: function() { 
  184.     //清除画布
  185.     content.clearRect(0,0,canvasw,canvash)
  186.     content.draw(true)
  187.     var that = this
  188.     that.setData({ 
  189.       allDrawWorksPath:[],
  190.       signImage:"",
  191.     })
  192.   },
  193.   //保存图片
  194.   saveClick: function() { 
  195.     var that = this
  196.     wx.canvasToTempFilePath({ 
  197.       canvasId: 'firstCanvas',
  198.       success:function(res) { 
  199.         var imgPath = res.tempFilePath;
  200.         //打印图片路径
  201.         var allDrawWorksPath = that.data.allDrawWorksPath;
  202.         allDrawWorksPath.push(imgPath);
  203.         that.setData({ 
  204.           allDrawWorksPath: allDrawWorksPath,
  205.        })
  206.         //设置保存的图片
  207.         that.setData({ 
  208.           signImage : res.tempFilePath
  209.         })
  210.       },
  211.     })
  212.   },
  213.   //撤销
  214.   drawRevoke: function () { 
  215.     var that = this;
  216.     var allDrawWorksPath = that.data.allDrawWorksPath;
  217.     if (allDrawWorksPath == null || allDrawWorksPath.length == 0 || allDrawWorksPath == undefined) { 
  218.        return;
  219.     }
  220.     allDrawWorksPath.pop();
  221.     that.setData({ 
  222.        allDrawWorksPath: allDrawWorksPath,
  223.     })
  224.     var privWorksPath = "";
  225.     if(allDrawWorksPath.length > 0){ 
  226.       privWorksPath = allDrawWorksPath[allDrawWorksPath.length-1]
  227.       content.drawImage(privWorksPath,0,0,that.data.screenWidth*0.98,that.data.screenWidth*0.7);
  228.       content.draw();
  229.       //设置线的颜色
  230.       content.setStrokeStyle("#000")
  231.       //设置线的宽度
  232.       content.setLineWidth(5)
  233.       //设置线两端端点样式更加圆润
  234.       content.setLineCap('round')
  235.       //设置两条线连接处更加圆润
  236.       content.setLineJoin('round')
  237.     }else{ 
  238.       that.clearClick();
  239.     }
  240.     that.setData({ 
  241.       signImage : privWorksPath
  242.     })
  243.   },
  244.   //保存至相册
  245.   save:function(){ 
  246.     var that = this
  247.     if(that.data.is){ 
  248.       that.setData({ 
  249.         is:false,
  250.       })
  251.       setTimeout(function () { 
  252.         that.setData({ 
  253.           is:true,
  254.         })
  255.       },3000)
  256.       wx.compressImage({ 
  257.         src:that.data.signImage,
  258.         quality:0,
  259.         success: function(res) { 
  260.           wx.saveImageToPhotosAlbum({ 
  261.             filePath:res.tempFilePath,
  262.             success:function(res) { 
  263.               that.setData({ 
  264.                 is:true,
  265.               })
  266.               wx.showToast({ 
  267.                 title: '已保存至相册',
  268.                 icon: 'loading',
  269.                 image: "/pages/static/image/icon/xingxing.png",
  270.                 duration: 2000
  271.               })
  272.             }
  273.           })
  274.         },
  275.         fail: function(res) { 
  276.           that.setData({ 
  277.             is:true,
  278.           })
  279.           wx.showToast({ 
  280.             title: '压缩失败',
  281.             icon: 'loading',
  282.             image: "/pages/static/image/icon/xingxing.png",
  283.             duration: 2000
  284.           })
  285.         }
  286.       })
  287.     }
  288.   },
  289.   /** * 生命周期函数--监听页面加载 */
  290.   onLoad: function (options) { 
  291.     //获得Canvas的上下文
  292.     content = wx.createCanvasContext('firstCanvas')
  293.     //设置线的颜色
  294.     content.setStrokeStyle("#000")
  295.     //设置线的宽度
  296.     content.setLineWidth(5)
  297.     //设置线两端端点样式更加圆润
  298.     content.setLineCap('round')
  299.     //设置两条线连接处更加圆润
  300.     content.setLineJoin('round')
  301.   },
  302.   /** * 生命周期函数--监听页面显示 */
  303.   onShow: function () { 
  304.     this.startInter()
  305.   },
  306.   startInter : function(){ 
  307.     var that = this;
  308.     wx.getSystemInfo({ 
  309.       success: function(res){ 
  310.         that.setData({ 
  311.           screenHeight:res.screenHeight,
  312.           screenWidth:res.screenWidth,
  313.         })
  314.       }
  315.     })
  316.   },
  317.   //返回上一页
  318.   return: function() { 
  319.     wx.navigateBack({ 
  320.       delta: 1
  321.     })
  322.   },
  323. })

3. 九宫格拼图

  1. let time=0; //保存定时时间
  2. let pause=true; //设置是否暂停标志，true表示暂停
  3. let set_timer; //设置定时函数
  4. let d=new Array(10); //保存大DIV当前装的小DIV的编号
  5. let d_direct=new Array(
  6.   [0],//为了逻辑更简单，第一个元素我们不用，我们从下标1开始使用
  7.   [2,4],//大DIV编号为1的DIV可以去的位置，比如第一块可以去2,4号位置
  8.   [1,3,5],
  9.   [2,6],
  10.   [1,5,7],
  11.   [2,4,6,8],
  12.   [3,5,9],
  13.   [4,8],
  14.   [5,7,9],
  15.   [6,8]
  16.  ); //保存大DIV编号的可移动位置编号
  17.  let d_posXY=new Array(
  18.   [2],//同样，我们不使用第一个元素
  19.   [2,2],//第一个表示left,第二个表示top，比如第一块的位置为let:0vw,top:0vw
  20.   [35,2],
  21.   [68,2],
  22.   [2,35],
  23.   [35,35],
  24.   [68,35],
  25.   [2,68],
  26.   [35,68],
  27.   [68,68]
  28.  ); //大DIV编号的位置
  29.  d[1]=1;d[2]=2;d[3]=3;d[4]=4;d[5]=5;d[6]=6;d[7]=7;d[8]=8;d[9]=0; //默认按照顺序排好，大DIV第九块没有，所以为0，我们用0表示空白块
  30. Page({ 
  31.   /** * 页面的初始数据 */
  32.   data: { 
  33.     is:true,
  34.     d1:"",
  35.     d2:"",
  36.     d3:"",
  37.     d4:"",
  38.     d5:"",
  39.     d6:"",
  40.     d7:"",
  41.     d8:"",
  42.     min:0,
  43.     sec:0,
  44.     timer:"0分0秒",
  45.     start:"开始",
  46.   },
  47.   //奖品名称
  48.   move:function(e){ 
  49.     if(pause){ 
  50.       wx.showModal({ 
  51.         title: '温馨提示',
  52.         content: "已暂停，请点击继续",
  53.         showCancel: false,
  54.         confirmText: "知道了",
  55.         success (res) { 
  56.           if (res.confirm) { 
  57.             //确定
  58.           } else if (res.cancel) { 
  59.             //取消
  60.           }
  61.         }
  62.       })
  63.       return;
  64.     }
  65.     let that=this;
  66.     let id = e.currentTarget.dataset.text;
  67.     //移动函数，前面我们已将讲了
  68.     var i=1;
  69.     for(i=1; i<10; ++i){ 
  70.       if( d[i] == id )
  71.       break;
  72.     }
  73.     //这个for循环是找出小DIV在大DIV中的位置
  74.     var target_d=0;
  75.     //保存小DIV可以去的编号，0表示不能移动
  76.     target_d=that.whereCanTo(i);
  77.     //用来找出小DIV可以去的位置，如果返回0，表示不能移动，如果可以移动，则返回可以去的位置编号
  78.     if(target_d != 0){ 
  79.       d[i]=0;
  80.       //把当前的大DIV编号设置为0，因为当前小DIV已经移走了，所以当前大DIV就没有装小DIV了
  81.       d[target_d]=id;
  82.       //把目标大DIV设置为被点击的小DIV的编号
  83.       let that = this;
  84.       if(id == 1){ 
  85.         that.setData({ 
  86.           d1:"left:"+d_posXY[target_d][0]+"vw;top:"+d_posXY[target_d][1]+"vw",
  87.         })
  88.       }else if(id == 2){ 
  89.         that.setData({ 
  90.           d2:"left:"+d_posXY[target_d][0]+"vw;top:"+d_posXY[target_d][1]+"vw",
  91.         })
  92.       }else if(id == 3){ 
  93.         that.setData({ 
  94.           d3:"left:"+d_posXY[target_d][0]+"vw;top:"+d_posXY[target_d][1]+"vw",
  95.         })
  96.       }else if(id == 4){ 
  97.         that.setData({ 
  98.           d4:"left:"+d_posXY[target_d][0]+"vw;top:"+d_posXY[target_d][1]+"vw",
  99.         })
  100.       }else if(id == 5){ 
  101.         that.setData({ 
  102.           d5:"left:"+d_posXY[target_d][0]+"vw;top:"+d_posXY[target_d][1]+"vw",
  103.         })
  104.       }else if(id == 6){ 
  105.         that.setData({ 
  106.           d6:"left:"+d_posXY[target_d][0]+"vw;top:"+d_posXY[target_d][1]+"vw",
  107.         })
  108.       }else if(id == 7){ 
  109.         that.setData({ 
  110.           d7:"left:"+d_posXY[target_d][0]+"vw;top:"+d_posXY[target_d][1]+"vw",
  111.         })
  112.       }else if(id == 8){ 
  113.         that.setData({ 
  114.           d8:"left:"+d_posXY[target_d][0]+"vw;top:"+d_posXY[target_d][1]+"vw",
  115.         })
  116.       }
  117.       //最后设置被点击的小DIV的位置，把它移到目标大DIV的位置
  118.     }
  119.     //如果target_d不为0，则表示可以移动，且target_d就是小DIV要去的大DIV的位置编号
  120.     var finish_flag=true;
  121.     //设置游戏是否完成标志，true表示完成
  122.     for(var k=1; k<9; ++k){ 
  123.       if( d[k] != k){ 
  124.       finish_flag=false;
  125.       break;
  126.       //如果大DIV保存的编号和它本身的编号不同，则表示还不是全部按照顺序排的，那么设置为false，跳出循环，后面不用再判断了，因为只要一个不符，就没完成游戏
  127.       }
  128.     }
  129.     //从1开始，把每个大DIV保存的编号遍历一下，判断是否完成
  130.     if(finish_flag==true){ 
  131.       if(!pause)
  132.       that.start();
  133.       if(wx.getStorageSync('puzzle') != ''){ 
  134.         let src = wx.getStorageSync('puzzle');
  135.         let min = parseInt(src.substring(3,src.lastIndexOf('分')));
  136.         let sec = parseInt(src.substring(src.lastIndexOf('分')+1,src.lastIndexOf('秒')));
  137.         if(min>that.data.min || (min==that.data.min && sec>that.data.sec)){ 
  138.           wx.setStorageSync('puzzle', "总用时"+that.data.timer)
  139.         }
  140.       }else{ 
  141.         wx.setStorageSync('puzzle', "总用时"+that.data.timer)
  142.       }
  143.       that.setData({ 
  144.         history:"历史记录："+wx.getStorageSync('puzzle'),
  145.       })
  146.       wx.showModal({ 
  147.         title: '成功',
  148.         content: "总用时"+that.data.timer,
  149.         showCancel: false,
  150.         confirmText: "知道了",
  151.         success (res) { 
  152.           if (res.confirm) { 
  153.             //确定
  154.           } else if (res.cancel) { 
  155.             //取消
  156.           }
  157.         }
  158.       })
  159.     }
  160.     //如果为true，则表示游戏完成，如果当前没有暂停，则调用暂停韩式，并且弹出提示框，完成游戏。
  161.     //start()这个函数是开始，暂停一起的函数，如果暂停，调用后会开始，如果开始，则调用后会暂停
  162.   },
  163.   whereCanTo:function(cur_div){ 
  164.     //判断是否可移动函数，参数是大DIV的编号，不是小DIV的编号，因为小DIV编号跟可以去哪没关系，小DIV是会动的
  165.     var j=0;
  166.     var move_flag=false;
  167.     for(j=0; j<d_direct[cur_div].length; ++j){ 
  168.       //把所有可能去的位置循环遍历一下
  169.       if( d[ d_direct[cur_div][j] ] == 0 ){ 
  170.       move_flag=true;
  171.       break;
  172.       }
  173.       //如果目标的值为0，说明目标位置没有装小DIV，则可以移动，跳出循环
  174.     }
  175.     if(move_flag == true){ 
  176.       return d_direct[cur_div][j];
  177.     }else{ 
  178.       return 0;
  179.     }
  180.     //可以移动，则返回目标位置的编号，否则返回0，表示不可移动
  181.   },
  182.   //定时函数，每一秒执行一次
  183.   timer:function(){ 
  184.     var min=parseInt(time/60);//把秒转换为分钟，一分钟60秒，取商就是分钟
  185.     var sec=time%60;//取余就是秒
  186.     var that = this;
  187.     that.setData({ 
  188.       min:min,
  189.       sec:sec,
  190.       timer:min+"分"+sec+"秒"//然后把时间更新显示出来
  191.     })
  192.     time+=1;//一秒钟加一，单位是秒
  193.   },
  194.   //开始暂停函数
  195.   start:function(){ 
  196.     var that= this
  197.     if(pause){ 
  198.       that.setData({ 
  199.         start:"暂停",//把按钮文字设置为暂停
  200.       })
  201.       pause=false;//暂停表示设置为false
  202.       set_timer=setInterval(
  203.         function () { 
  204.           that.timer();
  205.         },
  206.         1000
  207.       );//启动定时
  208.       //如果当前是暂停，则开始
  209.      }else{ 
  210.       that.setData({ 
  211.         start:"继续",//把按钮文字设置为开始
  212.       })
  213.       pause=true;
  214.       clearInterval(set_timer);
  215.      }
  216.   },
  217.   //重置函数
  218.   reset:function(){ 
  219.     time=0;//把时间设置为0
  220.     this.random_d();//把方块随机打乱函数
  221.     if(pause)//如果暂停，则开始计时
  222.     this.start();
  223.   },
  224.   //随机打乱方块函数，我们的思路是从第九块开始，随机生成一个数，然后他们两块对调一下
  225.   random_d:function(){ 
  226.     let that = this;
  227.     for(var i=9; i>1; --i){ 
  228.       var to=parseInt(Math.random()*(i-1)+1);//产生随机数，范围为1到i，不能超出范围，因为没这个id的DIV
  229.       if(d[i]!=0){ 
  230.         if(d[i] == 1){ 
  231.           that.setData({ 
  232.             d1:"left:"+d_posXY[to][0]+"vw;top:"+d_posXY[to][1]+"vw",
  233.           })
  234.         }else if(d[i] == 2){ 
  235.           that.setData({ 
  236.             d2:"left:"+d_posXY[to][0]+"vw;top:"+d_posXY[to][1]+"vw",
  237.           })
  238.         }else if(d[i] == 3){ 
  239.           that.setData({ 
  240.             d3:"left:"+d_posXY[to][0]+"vw;top:"+d_posXY[to][1]+"vw",
  241.           })
  242.         }else if(d[i] == 4){ 
  243.           that.setData({ 
  244.             d4:"left:"+d_posXY[to][0]+"vw;top:"+d_posXY[to][1]+"vw",
  245.           })
  246.         }else if(d[i] == 5){ 
  247.           that.setData({ 
  248.             d5:"left:"+d_posXY[to][0]+"vw;top:"+d_posXY[to][1]+"vw",
  249.           })
  250.         }else if(d[i] == 6){ 
  251.           that.setData({ 
  252.             d6:"left:"+d_posXY[to][0]+"vw;top:"+d_posXY[to][1]+"vw",
  253.           })
  254.         }else if(d[i] == 7){ 
  255.           that.setData({ 
  256.             d7:"left:"+d_posXY[to][0]+"vw;top:"+d_posXY[to][1]+"vw",
  257.           })
  258.         }else if(d[i] == 8){ 
  259.           that.setData({ 
  260.             d8:"left:"+d_posXY[to][0]+"vw;top:"+d_posXY[to][1]+"vw",
  261.           })
  262.         }
  263.       }
  264.       //把当前的DIV位置设置为随机产生的DIV的位置
  265.       if(d[to]!=0){ 
  266.         if(d[to] == 1){ 
  267.           that.setData({ 
  268.             d1:"left:"+d_posXY[i][0]+"vw;top:"+d_posXY[i][1]+"vw",
  269.           })
  270.         }else if(d[to] == 2){ 
  271.           that.setData({ 
  272.             d2:"left:"+d_posXY[i][0]+"vw;top:"+d_posXY[i][1]+"vw",
  273.           })
  274.         }else if(d[to] == 3){ 
  275.           that.setData({ 
  276.             d3:"left:"+d_posXY[i][0]+"vw;top:"+d_posXY[i][1]+"vw",
  277.           })
  278.         }else if(d[to] == 4){ 
  279.           that.setData({ 
  280.             d4:"left:"+d_posXY[i][0]+"vw;top:"+d_posXY[i][1]+"vw",
  281.           })
  282.         }else if(d[to] == 5){ 
  283.           that.setData({ 
  284.             d5:"left:"+d_posXY[i][0]+"vw;top:"+d_posXY[i][1]+"vw",
  285.           })
  286.         }else if(d[to] == 6){ 
  287.           that.setData({ 
  288.             d6:"left:"+d_posXY[i][0]+"vw;top:"+d_posXY[i][1]+"vw",
  289.           })
  290.         }else if(d[to] == 7){ 
  291.           that.setData({ 
  292.             d7:"left:"+d_posXY[i][0]+"vw;top:"+d_posXY[i][1]+"vw",
  293.           })
  294.         }else if(d[to] == 8){ 
  295.           that.setData({ 
  296.             d8:"left:"+d_posXY[i][0]+"vw;top:"+d_posXY[i][1]+"vw",
  297.           })
  298.         }
  299.       }
  300.       //把随机产生的DIV的位置设置为当前的DIV的位置
  301.       var tem=d[to];
  302.       d[to]=d[i];
  303.       d[i]=tem;
  304.       //然后把它们两个的DIV保存的编号对调一下
  305.     }
  306.   },
  307.   //返回上一页
  308.   return: function() { 
  309.     clearInterval(set_timer);
  310.     wx.navigateBack({ 
  311.       delta: 1
  312.     })
  313.   },
  314.   /** * 生命周期函数--监听页面加载 */
  315.   onLoad: function (options) { 
  316.     let that = this
  317.     //初始化函数，页面加载的时候调用重置函数，重新开始
  318.     this.start();
  319.     this.reset();
  320.     if(wx.getStorageSync('puzzle') != ''){ 
  321.       that.setData({ 
  322.         history:"历史记录："+wx.getStorageSync('puzzle'),
  323.       })
  324.     }else{ 
  325.       that.setData({ 
  326.         history:"暂无历史记录",
  327.       })
  328.     }
  329.   },
  330. })

4. 随机抽奖

  1. let timer
  2. let times = null
  3. Page({ 
  4.   /** * 页面的初始数据 */
  5.   data: { 
  6.     begin:false,
  7.     imgUrls:[{ 
  8.       id:1,
  9.       name:'1号',
  10.       src:'../static/image/icon/icon-test.png'
  11.     },
  12.     { 
  13.       id:2,
  14.       name:'2号',
  15.       src:'../static/image/icon/icon-test.png'
  16.     },
  17.     { 
  18.       id:3,
  19.       name:'3号',
  20.       src:'../static/image/icon/icon-test.png'
  21.     }],
  22.     number:1,//当前选中框
  23.     time:0,//选中框的转动速度
  24.     ms:0,//选中框的停止时间
  25.     be:false,//是否正在抽奖中
  26.     prizename:0,//奖品名称是否为空(0为没有空的奖品名称)
  27.     click:0,//点击
  28.   },
  29.   //奖品名称
  30.   name:function(e){ 
  31.     let that=this;
  32.     let id = e.currentTarget.dataset.text
  33.     that.data.imgUrls[id].name=e.detail.value
  34.   },
  35.   //选择图片
  36.   select: function(e){ 
  37.     let that=this;
  38.     let id = e.currentTarget.dataset.text
  39.     wx.chooseImage({ 
  40.       sizeType: ['original', 'compressed'], 
  41.       sourceType: ['album', 'camera'], 
  42.       success: function(res) { 
  43.         let imgSrc = res.tempFilePaths;
  44.         if (imgSrc.length >= 1){ 
  45.           let l = imgSrc.length<(that.data.imgUrls.length-id)?imgSrc.length:(that.data.imgUrls.length-id)
  46.           for (let index = 0; index < l; index++) { 
  47.             that.data.imgUrls[id+index].src = imgSrc[index]
  48.           }
  49.           that.setData({ 
  50.             imgUrls: that.data.imgUrls,
  51.           })
  52.         }else{ 
  53.           wx.showToast({ 
  54.             title: '请选择图片',
  55.             icon: 'loading',
  56.             image: "/pages/static/image/icon/xingxing.png",
  57.             duration: 2000
  58.           })
  59.         }
  60.       },
  61.       fail: function() { 
  62.         wx.showToast({ 
  63.           title: '请选择图片',
  64.           icon: 'loading',
  65.           image: "/pages/static/image/icon/xingxing.png",
  66.           duration: 2000
  67.         })
  68.       }
  69.     })
  70.   },
  71.   //按钮弹起
  72.   buttonup:function(){ 
  73.     var that = this
  74.     if(times != null){ 
  75.       clearInterval(times);
  76.     }
  77.     times = setTimeout(function () { 
  78.       that.setData({ 
  79.         click:0,//点击
  80.       })
  81.     },100)
  82.   },
  83.   add:function(){ 
  84.     var that = this
  85.     that.setData({ 
  86.       click:2,
  87.     })
  88.     that.buttonup()
  89.     if(that.data.imgUrls.length < 15){ 
  90.       that.data.imgUrls.push({ id:(that.data.imgUrls.length+1),name:(that.data.imgUrls.length+1)+'号',src:'../static/image/icon/icon-test.png'})
  91.       that.setData({ 
  92.         imgUrls:that.data.imgUrls
  93.       })
  94.     }else{ 
  95.       wx.showToast({ 
  96.         title: '不能再多了',
  97.         icon: 'loading',
  98.         image: "/pages/static/image/icon/xingxing.png",
  99.         duration: 2000
  100.       })
  101.     }
  102.   },
  103.   minus:function(){ 
  104.     var that = this
  105.     that.setData({ 
  106.       click:1,
  107.     })
  108.     that.buttonup()
  109.     if(that.data.imgUrls.length > 2){ 
  110.       that.data.imgUrls.pop()
  111.       that.setData({ 
  112.         imgUrls:that.data.imgUrls
  113.       })
  114.     }else{ 
  115.       wx.showToast({ 
  116.         title: '不能再少了',
  117.         icon: 'loading',
  118.         image: "/pages/static/image/icon/xingxing.png",
  119.         duration: 2000
  120.       })
  121.     }
  122.   },
  123.   //奖品名称是否为空
  124.   prizename:function(){ 
  125.     var that = this
  126.     that.setData({ 
  127.       prizename:0
  128.     })
  129.     that.data.imgUrls.forEach(element => { 
  130.       if(element.name == ''){ 
  131.         that.setData({ 
  132.           prizename:element.id
  133.         })
  134.         return
  135.       }
  136.     });
  137.   },
  138.   //开始抽奖
  139.   lottery:function(){ 
  140.     var that = this
  141.     that.setData({ 
  142.       click:3,
  143.     })
  144.     that.buttonup()
  145.     that.prizename();
  146.     if(that.data.prizename === 0){ 
  147.       that.setData({ 
  148.         begin:true
  149.       })
  150.       if(!that.data.be){ 
  151.         that.setData({ 
  152.           be:true
  153.         })
  154.         that.twirl()
  155.       }
  156.     }else{ 
  157.       wx.showToast({ 
  158.         title: '请输入'+that.data.prizename+'号名称',
  159.         icon: 'loading',
  160.         image: "/pages/static/image/icon/xingxing.png",
  161.         duration: 2000
  162.       })
  163.     }
  164.   },
  165.   //再来一次
  166.   go:function(){ 
  167.     var that = this
  168.     if(!that.data.be){ 
  169.       that.setData({ 
  170.         be:true
  171.       })
  172.       that.twirl()
  173.     }
  174.   },
  175.   twirl:function(){ 
  176.     var that = this
  177.     timer = setTimeout(function(){ 
  178.       //选中框的转动延迟逐渐递增
  179.       that.data.time+=5;
  180.       //当前时间对象
  181.       var date = new Date();
  182.       //递加当前获取的对象的毫秒
  183.       that.data.ms += date.getMilliseconds();
  184.       //选中框的停止条件
  185.       if(that.data.ms >30000){ 
  186.         //重置数据
  187.         that.setData({ 
  188.           time:0,
  189.           ms:0,
  190.           be:false,
  191.         })
  192.         //弹出提示框
  193.         wx.showModal({ 
  194.           title: '抽奖结果',
  195.           content: that.data.imgUrls[that.data.number-1].name,
  196.           showCancel: false,
  197.           success (res) { 
  198.             if (res.confirm) { 
  199.               //确定
  200.             } else if (res.cancel) { 
  201.               //取消
  202.             }
  203.           }
  204.         })
  205.         //结束方法
  206.         return
  207.       }
  208.       //控制当前选中框选中
  209.       if(that.data.number == that.data.imgUrls.length){ 
  210.         that.setData({ 
  211.           number:1,
  212.         })
  213.       }else{ 
  214.         that.setData({ 
  215.           number:that.data.number+1,
  216.         })
  217.       }
  218.       //递归，调用自己
  219.       that.twirl();
  220.     //执行速度
  221.     },that.data.time);
  222.   },
  223.   return: function() { 
  224.     let that = this
  225.     let begin = that.data.begin
  226.     if(begin){ 
  227.       if(that.data.be){ 
  228.         wx.showModal({ 
  229.           title: '提示',
  230.           content: '抽奖中，确定返回？',
  231.           success (res) { 
  232.             if (res.confirm) { 
  233.               clearInterval(timer)
  234.               that.setData({ 
  235.                 begin:false,
  236.                 number:1,//当前选中框
  237.                 time:0,//选中框的转动速度
  238.                 ms:0,//选中框的停止时间
  239.                 be:false,//是否正在抽奖中
  240.               })
  241.             } else if (res.cancel) { 
  242.               //取消
  243.             }
  244.           }
  245.         })
  246.       }else{ 
  247.         that.setData({ 
  248.           begin:false,
  249.           number:1,//当前选中框
  250.           time:0,//选中框的转动速度
  251.           ms:0,//选中框的停止时间
  252.           be:false,//是否正在抽奖中
  253.         })
  254.       }
  255.     }else{ 
  256.       wx.navigateBack({ 
  257.         delta: 1
  258.       })
  259.     }
  260.   },
  261. })

三、立即体验

watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSc56m65Lit5pyA5Lqu55qE5paw6ZGr_size_17_color_FFFFFF_t_70_g_se_x_16_pic_center

发表评论

表情：
评论列表 （有 0 条评论，169人围观）

还没有评论，来说两句吧...

相关阅读

    相关 微信小程序

    微信小程序：             app.js:小程序的入口，全局变量以及获取用户信息都存放在这里。 app.json:界面的路径(会自动生成)，tarBar在这里

    Bertha 。Bertha 。/ 0 赞/ 515 阅读