- 博客(18)
- 收藏
- 关注
原创 canvas绘制时钟 光明 | 黑暗主题
canvas绘制时钟 光明 | 黑暗主题先上效果图canvas时钟的绘制参考了 # Sunshine_Lin大佬的# 为了让她10分钟入门canvas,我熬夜写了3个小项目和这篇文章这篇文章,具体样式是参考了B站 @Webb-L 的视频,然后以这两个为基础做了这个小demo我个人认为比较有难点的就是四个阴影的绘制// 外右下阴影ctx.shadowOffsetX = 10; // 阴影Y轴偏移ctx.shadowOffsetY = 10; // 阴影X轴偏移ctx.shadowBlur =
2021-08-13 13:49:23
207
原创 函数的解构赋值(ES6知识点汇总---第二章)
函数的解构赋值函数的参数也可以使用解构赋值。function add({x, y}){ return x + y}add([1, 2]) //3上面的代码中,函数add的参数表面是一个数组,但在传入参数的那一刻,数组参数就被解构成变量x和y。对于函数内部的代码来说,它们能感受到的参数就是x和y。下面是另一个例子:[[1, 2], [3, 4]].map(([a, b])=> a + b);// [ 3, 7 ]函数参数的解构也可以使用默认值。function move({x
2021-07-02 00:57:57
232
原创 字符串、数值和布尔值的解构赋值(ES6知识点汇总---第二章)
字符串的解构赋值字符串也可以解构赋值,这是因为此时字符串被转换成了一个类似数组的对象。const [a, b, c, d, e] = 'hello';a //hb //ec //ld //le //o类似数组的对象都有一个length属性,因此还可以对这个属性进行解构赋值。let { length : len } = 'hello';len //5数值和布尔值的解构赋值解构赋值时,如果等号右边时数值和布尔值,则会先转为对象。let {toString: s} = 123;s
2021-07-01 00:29:57
194
原创 对象的解构赋值(ES6知识点汇总---第二章)
对象的解构赋值解构不仅可以用于数组,还可以用于对象。let { foo, bar} = { foo:"aaa", bar:"bbb"};foo // "aaa"bar // "bbb"对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值是由它的位置决定的;而对象的属性没有次序,变量必须与属性同名才能取到正确的值。let { bar, foo} = { foo:"aaa", bar:"bbb"};foo // "aaa"bar // "bbb"let { baz } =
2021-06-30 00:08:00
210
原创 数组解构赋值(ES6知识点汇总---第二章)
1、定义ES6允许按照一定模式从数组和对象中提取值,然后对变量进行赋值,这被称为结构(Destructuring)。2、用法在ES6之前为变量赋值只能直接指定值,例如:let a = 1;let b = 2;ES6允许进行如下写法:let [a,b,c] = [1,2,3];上面的代码表示,可以从数组中提取值,并按照对应位置对变量进行赋值。本质上这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。let [foo,[[bar],baz]] = [1,[[2
2021-06-28 00:29:12
103
原创 ES6 “...“ 扩展运算符 (点点点)
1、定义扩展运算符(spread)是三个点(…),它如同rest参数的逆运算,将一个数组转为用逗号分隔的参数序列。2、使用console.log(...[1,2,3]); //1 2 3 console.log(1,...[2,3,4],5); // 1 2 3 4 5console.log(0,...[1,2,3,[4,5]],6); //0 1 2 3 [ 4, 5 ] 6该运算符主要用于函数调用。function add(x,y){ return x + y;}let num
2021-06-27 00:56:18
626
原创 let const命令(ES6知识点汇总---第一章)
前言:ES6平时在工作中应用诸多,但掌握的都太浅显,用的也都很基础,于是买了本阮一峰的《ES6标准入门(第三版)》,在看这本书的同时也寄希望能借助写博客的方式帮助自己重新梳理、记忆相关知识点以及养成写博客的习惯。在这个系列里我整理的基本都是书上已有的,会加入一些自己的理解,并做一些适当的缩减,如有错误望指出[抱拳]感谢!1、let和const命令1.1 let命令let命令是ES6新增命令,用于声明变量。用法类似于var,但是声明的变量只在let命令所在的代码块内有效。{ let a
2021-06-26 01:13:47
102
原创 vue移动端实现悬浮可拖动且滑动页面时收缩至内侧按钮
效果图按钮我用的是一个返回图片,这里你可以自定义按钮文字和宽高,父页面传参就可以了。我是在vue移动端实现可拖动悬浮按钮上进行的修改,加了一个滑动收缩组件代码<template> <div class="float_button"> <div @click="onBtnClicked" ref="floatButton" class="float_info" :style="{'width':
2021-04-29 11:52:40
794
原创 微信小程序生成二维码
需引入weapp-qrcode.js下载https://blog-static.cnblogs.com/files/-tiantian/weapp-qrcode.js,点开链接按 ctrl + s 保存到对应的位置页面引入let drawQrcode = require("../../js/weapp-qrcode")wxml<canvas style="width: 600rpx; height: 600rpx;" canvas-id="myQrcode"></canvas
2021-01-28 11:06:38
126
原创 js 微信小程序根据身份证号计算年龄
封装成js文件function getAge(identify) { var UUserCard = identify; if (UUserCard != null && UUserCard != '') { //获取年龄 var myDate = new Date(); var month = myDate.getMonth() + 1; var day = myDate.getDate(); var age = myDate.getFu
2021-01-28 11:00:40
1001
原创 微信小程序按钮超时禁用
以微信小程序为例,其他原理相同效果图wxml<button bindtap="getBangDing" disabled="{{buttonShow}}" type="primary">绑定用户({{buttonTime}})</button>jsjs databuttonShow:'false',buttonTime: '180', // 按钮失效倒计时 // 180秒后禁用绑定按钮 var inter = setInter
2021-01-26 16:01:11
744
1
原创 微信小程序获取用户手机号
微信小程序获取微信绑定手机号效果图获取微信绑定手机号,更换手机号可以点下方“管理手机号码”,微信会给更换的手机号发送验证码进行验证,验证通过就可以正常获取。不用自己去配置短信验证手机号的正确性,用的是微信的短信服务。json用的WxUI,如何引入就不多说了,网上一搜一大堆{“usingComponents”: {“mp-cells”: “…/…/…/miniprogram_npm/weui-miniprogram/cells/cells”,“mp-cell”: “…/…/…/minipr
2021-01-26 13:16:10
680
1
转载 vue-quill-editor富文本编辑器 自定义工具栏
基于webpack和vue一、npm 安装 vue-quill-editor二、在main.js中引入import VueQuillEditor from 'vue-quill-editor'// require styles 引入样式import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubble.css'Vue.use(VueQuillEd.
2020-07-16 20:17:27
1211
1
转载 vue 对象数组去重
vue 对象数组去重(转载 方便自己回看)其实很简单,一般的数组去重可以直接用 new Set() 方法即可,但是数组对象的话,比较复杂,不能直接用,我们可以采取间接的方法来去重unique(arr) {const res = new Map();return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1))}下面有一个示例,根据对象的id作为去重的依据:<el-button type=“
2020-07-16 00:34:48
1591
原创 vue cli 2.9.6升级至最新版本
1、打开cmd2、输入npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载旧版3、使用npm install -g @vue/cli 或 yarn global add @vue/cli 安装最新版4、输入 vue-V 查看版本,@vue/cli 4.4.6成功!官方文档:https://cli.vuejs.org/zh/guide/installation.html...
2020-07-01 17:28:21
1948
原创 js/vue/小程序字母大小写转换
js字母大小写转换方法:1、转换成大写:toUpperCase()2、转换成小写:toLowerCase()3、举例:(1)var a=“aBcD”;a=a.toUpperCase();alert(a);提示出来的就是 ABCD(2)var a=“aBcD”;a=a.toLowerCase();alert(a);提示出来的就是 abcd...
2020-06-19 19:22:41
3497
原创 图片加<span><h1>时<span><h1>内文字无法垂直居中的解决办法
试了水平居中:text-align:center;垂直居中:line-height,都无法解决问题,最后加了vertical-align 属性得以解决。代码效果图
2019-10-31 11:12:59
1079
原创 vue 页面跳转 路由传参
vue 页面跳转 路由传参仅供参考,前端小白①添加点击事件点击事件内也可跟接口变量② js代码内增加点击方法③ 路由接收参数
2019-10-28 12:22:34
244
空空如也
json格式向后台传参,这种情况如何解决?
2021-03-22
TA创建的收藏夹 TA关注的收藏夹
TA关注的人