原生JS实现一个验证码功能 定义一个用于显示验证码的canvas<canvas width="100" height="40"></canvas>生成JS的业务逻辑// 获取canvas let canvas = document.querySelector("canvas") let context = canvas.getContext("2d"); // 定义初始化验证码内容 let nums = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R','S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x','y', 'z']; drawCode() // 绘制验证码 function drawCode() { context.beginPath() /* 绘制背景色 */ context.fillStyle = "cornflowerblue"; context.fillRect(0, 0, canvas.width, canvas.height) /* 绘制验证码 */ context.fillStyle = "white"; context.font = "25px Arial"; let rand = [], x = [], y = [] for (let i = 0; i < 5; i++) { rand[i] = nums[Math.floor(Math.random() * nums.length)] x[i] = i * 16 + 10; y[i] = Math.random() * 20 + 20; context.fillText(rand[i], x[i], y[i]); } /* rand就是生成后的结果， 后面用来判断验证码输入框是否与该值相等 */ console.log(rand); //画3条随机线 for (let i = 0; i < 3; i++) { drawline(canvas, context); } // 画30个随机点 for (let i = 0; i < 30; i++) { drawDot(canvas, context); } } // 随机线 function drawline(canvas, context) { //随机线的起点x坐标是画布x坐标0位置，y坐标是画布高度的随机数 context.moveTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height)); //随机线的终点x坐标是画布宽度，y坐标是画布高度的随机数 context.lineTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height)); context.lineWidth = 0.5; context.strokeStyle = 'rgba(50,50,50,0.3)'; context.stroke(); } // 随机点 function drawDot(canvas, context) { let px = Math.floor(Math.random() * canvas.width); let py = Math.floor(Math.random() * canvas.height); context.moveTo(px, py); context.lineTo(px + 1, py + 1); context.lineWidth = 0.2; context.stroke(); }

Vue限制输入框内容只能输入金额或数字 <template> <input @input="formatValue(value)" v-model="value"> </template> <script> export default = { data(){ return { value: "" } }, methods：{ // 只允许输入数字，其他一律不允许输入 formatValue(val){ this.value = this.value.replace(/[^\d]/g, "") }, // 只允许输入金额类型，最大两位小数（如：3.88） formatValue(val){ val = val.replace(/(^\s*)|(\s*$)/g, ""); if (!val) return this.value = ""; val = val.replace(/[^\d.]/g, ""); val = val.replace(/^\./g, ""); val = val .replace(".", "$#$") .replace(/\./g, "") .replace("$#$", "."); val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3"); this.value = val; }, } } </script>

Typecho开启Gzip压缩加速网站 Gzip简介GZip压缩，是一种网站速度优化技术，也是一把SEO优化利器，许多网站都采用了这种技术，以达到提升网页打开速度、缩短网页打开时间的目的。网站采用Gzip压缩，还有一个好处，就是让你少了一份流量超标的担心。因为Gzip开启以后会将输出到用户浏览器的数据进行压缩的处理，这样就会减小通过网络传输的数据量，而这个，也正是提升网页打开时间的原因所在。首先看未开启的效果（本主题为例）从上图可以看到，这个api接口的大小是21kb，请求时间539ms接着开启gzip压缩很明显的可以看到区别，压缩后只有4.5kb大小，并且时间缩短到了99ms，极大的优化了网站速度开启方法打开typecho目录下的 index.php，并在开头添加 ob_start('ob_gzhandler'); 即可。

Joe主题实现自动更新 Joe主题更新到5.0.0版本后，因为属于重构版本，所以很多功能没有加上，需要频繁更新，但是每次更新都需要下载，然后删除老版本，在上传新版本，今天群里有个人分享的自动更新教程写的很好，于是我把补充的详细点{mtitle title="START"/}第一步，克隆主题1、首先进入博客的 themes 文件夹下2、点击 终端 按钮，出现一个黑色的窗口3、 在这个窗口内输入以下指令并回车git clone https://github.com/HaoOuBa/Joe.git出现下图的样子，表示成功4、刷新当前页面，会发现多出一个叫 Joe 的目录第二步，设置自动更新主题1、进入宝塔 计划任务 页面2、任务类型选择 Shell 脚本3、任务名称，可以随便写一个，例如我写的是：Joe主题更新4、执行周期，就是多久更新一次，这个可以随便写，例如我设置的是每30分钟检测一次更新5、脚本内容，填写如下，注意需要将网站目录替换成你的#!/bin/sh cd /www/wwwroot/网站目录/usr/themes/Joe git pull完整的设置内容如下第四步，判断是否正常1、上面步骤都完成后，点击这里的 执行2、然后点击 执行 右侧的 日志 按钮，如果内容显示如下，则代表没有任何问题{mtitle title="END"/}

苹果cms设置允许跨域 打开苹果cms站点，找到如下位置：application/api/controller/Provide.php在对应的位置填写如下内容：允许部分域名使用$origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : ''; // 允许跨域的域名写在数组里， $allow_origin = array('http://xxx.com','http://xxx.cn' ); if(in_array($origin, $allow_origin)){ header('Access-Control-Allow-Origin:'.$origin); }允许全部人使用header('Access-Control-Allow-Origin:*');

JS通过解构或Object.assign去合并2个对象 在封装插件的时候，经常会碰到传入参数和默认参数的问题，如果调用者没有传递参数，那么使用插件的内置属性，如果传递了，那么就设置成传递的参数，例如：这是一个弹窗插件class Dialog { constructor(options = {}) { // 插件的默认配置 const defaultOption = { title: "提示", size: "small", show: false } for (let key in options) { defaultOption[key] = options[key] } } } new Dialog({ title: '标题', size: 'mini' })传统的会使用上面的for循环，然后将默认参数里的参数替换掉，在ES6出来后，上面的写法就可以改成下面的简写第一种方式class Dialog { constructor(options = {}) { // 插件的默认配置 const defaultOption = { title: "提示", size: "small", show: false, // 通过展开运算符 ...options } } }第二种方式class Dialog { constructor(options = {}) { // 插件的默认配置 const defaultOption = { title: "提示", size: "small", show: false } // 通过Object.assign方法 const newOption = Object.assign(defaultOption, options) } }

JoeQQ小程序页面专用 本页面为Joe小程序演示专用一级标题上面是一级标题的样式二级标题上面是二级标题的样式三级标题上面是三级标题的样式四级标题上面是四级标题的样式五级标题上面是五级标题的样式六级标题上面是六级标题的样式段落：《南国三部曲》产生于二十世纪九十年代。当时，作者曾从省机关贬官到郊外，以其亲身经历创作了这部《南国三部曲》作品。《南国三部曲》是以反腐败为主题，描述了在党的领导下，广大工人、农民、学生与腐败分子进行斗争曲折、复杂、惊险故事。歌颂了广大劳动人民群众，捍卫国家与人民财产，坚持走社会主义集体化道路，追求共产主义信仰的献身精神。加粗：我们使用 右手 进行吃饭。斜体：哎呀！我 歪倒 了！！！斜体加粗：你看！那个 女孩子 正在跳舞！删除线：这个内容是错误的，已经废弃引用：欢迎来到德莱联盟图片：无序列表：苹果橘子香蕉有序列表猴子猫子狗子表格：表头表头表头内容内容内容内容内容内容行内代码：我们在前端开发的时候，经常用到 div 标签代码块：let a = 1; let b = 2; console.log(a + b); // 3

Joe开源目录程序系统 首先直接看效果演示前台页面预览地址：{anote icon="fa-unlink" href="https://hefollo.com" type="success" content="https://hefollo.com"/}后台上传预览地址：{anote icon="fa-unlink" href="http://files.js.cn/admin" type="info" content="files.js.cn/admin"/}程序介绍1、前台目录程序采用 files.photo.gallery2、后台上传为开源Joe上传，支持粘贴上传、点击上传、拖拽上传、上传成功失败进度条等3、默认上传密码（在文件里可以看到，以及限制上传的文件格式）源码下载隐藏内容，请前往内页查看详情注意事项1、PHP扩展安装：GD、mbstring、fileinfo、exif（不开启部分图片读取不到！！！！）(宝塔默认已安装GD、mbstring扩展)2、请务必保证根目录有 _uploads 文件夹，否则可能会报错！3、如何修改上传密码、允许上传的类型？{message type="info" content="打开 admin/index.php 文件，开头就可以看见"/}

Typecho实现评论显示操作系统和评论来源 {message type="info" content="首先打开 functions.php 文件，粘贴下面的代码" /}// 获取浏览器信息 function getBrowser($agent) { if (preg_match('/MSIE\s([^\s|;]+)/i', $agent, $regs)) { $outputer = 'Internet Explore'; } else if (preg_match('/FireFox\/([^\s]+)/i', $agent, $regs)) { $str1 = explode('Firefox/', $regs[0]); $FireFox_vern = explode('.', $str1[1]); $outputer = 'FireFox'; } else if (preg_match('/Maxthon([\d]*)\/([^\s]+)/i', $agent, $regs)) { $str1 = explode('Maxthon/', $agent); $Maxthon_vern = explode('.', $str1[1]); $outputer = 'MicroSoft Edge'; } else if (preg_match('#360([a-zA-Z0-9.]+)#i', $agent, $regs)) { $outputer = '360 Fast Browser'; } else if (preg_match('/Edge([\d]*)\/([^\s]+)/i', $agent, $regs)) { $str1 = explode('Edge/', $regs[0]); $Edge_vern = explode('.', $str1[1]); $outputer = 'MicroSoft Edge'; } else if (preg_match('/UC/i', $agent)) { $str1 = explode('rowser/', $agent); $UCBrowser_vern = explode('.', $str1[1]); $outputer = 'UC Browser'; } else if (preg_match('/QQ/i', $agent, $regs)||preg_match('/QQ Browser\/([^\s]+)/i', $agent, $regs)) { $str1 = explode('rowser/', $agent); $QQ_vern = explode('.', $str1[1]); $outputer = 'QQ Browser'; } else if (preg_match('/UBrowser/i', $agent, $regs)) { $str1 = explode('rowser/', $agent); $UCBrowser_vern = explode('.', $str1[1]); $outputer = 'UC Browser'; } else if (preg_match('/Opera[\s|\/]([^\s]+)/i', $agent, $regs)) { $outputer = 'Opera'; } else if (preg_match('/Chrome([\d]*)\/([^\s]+)/i', $agent, $regs)) { $str1 = explode('Chrome/', $agent); $chrome_vern = explode('.', $str1[1]); $outputer = 'Google Chrome'; } else if (preg_match('/safari\/([^\s]+)/i', $agent, $regs)) { $str1 = explode('Version/', $agent); $safari_vern = explode('.', $str1[1]); $outputer = 'Safari'; } else{ $outputer = 'Google Chrome'; } echo $outputer; } // 获取操作系统信息 function getOs($agent) { $os = false; if (preg_match('/win/i', $agent)) { if (preg_match('/nt 6.0/i', $agent)) { $os = 'Windows Vista&nbsp;·&nbsp;'; } else if (preg_match('/nt 6.1/i', $agent)) { $os = 'Windows 7&nbsp;·&nbsp;'; } else if (preg_match('/nt 6.2/i', $agent)) { $os = 'Windows 8&nbsp;·&nbsp;'; } else if(preg_match('/nt 6.3/i', $agent)) { $os = 'Windows 8.1&nbsp;·&nbsp;'; } else if(preg_match('/nt 5.1/i', $agent)) { $os = 'Windows XP&nbsp;·&nbsp;'; } else if (preg_match('/nt 10.0/i', $agent)) { $os = 'Windows 10&nbsp;·&nbsp;'; } else{ $os = 'Windows X64&nbsp;·&nbsp;'; } } else if (preg_match('/android/i', $agent)) { if (preg_match('/android 9/i', $agent)) { $os = 'Android Pie&nbsp;·&nbsp;'; } else if (preg_match('/android 8/i', $agent)) { $os = 'Android Oreo&nbsp;·&nbsp;'; } else { $os = 'Android&nbsp;·&nbsp;'; } } else if (preg_match('/ubuntu/i', $agent)) { $os = 'Ubuntu&nbsp;·&nbsp;'; } else if (preg_match('/linux/i', $agent)) { $os = 'Linux&nbsp;·&nbsp;'; } else if (preg_match('/iPhone/i', $agent)) { $os = 'iPhone&nbsp;·&nbsp;'; } else if (preg_match('/mac/i', $agent)) { $os = 'MacOS&nbsp;·&nbsp;'; }else if (preg_match('/fusion/i', $agent)) { $os = 'Android&nbsp;·&nbsp;'; } else { $os = 'Linux&nbsp;·&nbsp;'; } echo $os; }{message type="warning" content="comments.php 中找到合适位置（比如评论作者的后面）添加以下代码" /}<?php getOs($comments->agent); ?><?php getBrowser($comments->agent); ?>

Vue面包屑导航实现方案 例如想实现一个 首页 / 项目列表 / 我的项目 这样的面包屑1、首先在路由js文件里写上面包屑对应的名称router.jsexport default [ { path: "/", children: [ { path: "/todoList", component: TodoList, name: "todoList" meta: { breadName: "项目列表" } }, { path: "/todoList/mylist", component: MyList, name: "mylist" meta: { breadName: "我的项目" } }, ] } ]2、编写面包屑组件<template> <a-breadcrumb class="breadcrumb"> <a-breadcrumb-item v-for="(breadcrumb, index) in breadcrumbList" :key="index"> {{breadcrumb.meta.breadName}} </a-breadcrumb-item> </a-breadcrumb> </template> <script> export default { computed: { breadcrumbList () { // 先定义一个变量 用于存放计算出来的导航数组 let breadArr = [] // 获取当前页面的路由， 并将路由字符串截取第一个/， 然后组成数组 let path = this.$route.path.substr(1).split("/") // >>> ["todoList", mylist] // 获取所有页面的路由地址，通过this.$router.options拿到， 具体样子可以打印看看 const allRouter = this.$router.options.routes[0].children // 然后循环allRouter找到里面中符合的path的2个，将他们存起来 allRouter.forEach(_ => { // 判断path的每一项是否有allRouter里的某项 if (path.some(_item => _item === _.name)) { breadArr.push(_) } }) console.log(breadArr) // 打印下看看数据是否正确， 如果为两项， 并且每项里面都有meta内容， 则正确 // 因为这个数组里是没有 首页 这一项的， 我们自己手动添加一个就好, 此时用到unshift breadArr.unshift({ path: "/", meta: { breadName: "首页" } }) // 最后computed 需要return出去， return出去这个数组就好了 return breadArr } } } </script>