- 博客(81)
- 收藏
- 关注
RSS订阅原创 精灵图（CSS Sprite）制作教程
精灵图（CSS Sprite）是一种将多个小图片合并到一张大图片中的技术，通过 CSS 控制背景位置来显示不同部分的图片。主要用于网站图标、按钮、导航栏背景等元素的优化。1. 课程总结了解了精灵图的概念和优缺点学习了两种制作精灵图的方法（手动制作、在线工具）掌握了 CSS background-position 的使用方法学会了 hover 效果和响应式设计2. 课后作业选择一个网页项目，将页面中的多个小图片优化为精灵图。
2025-03-28 18:19:16
1125
原创 HTML5 Audio/Video 标签、属性、方法、事件汇总
src源，controls播放控制器，loop 循环播放，autoplay 自动播放，height，width，宽度和高度，在Audio里面不能指定，但是在Video里面是可以的，muted 静音，poster 预览图（当视频没有播放或者正在加载时展示给用户的一张图片，为了交互的友好性），preload 预加载，和autoplay一块时失效。mediaGroup 设置或返回音频/视频所属的组合（用于连接多个音频/视频元素）。played 返回表示音频/视频已播放部分的 TimeRanges 对象。
2025-03-11 15:20:24
1055
原创 Echarts (option.yAxis) Y轴 的属性
Echarts (option.yAxis) Y轴 的属性加粗样式yAxis: [ { show: true, // 是否显示 Y轴 type: 'value', //('value''category''time''log') name: '降雨量(mm)', // 坐标轴名称 nameLocation: 'end', // 坐标轴名称显示位置。('start''middle''center''end') //nameTextStyle: {...}, //
2022-03-04 15:26:32
1818
1
原创 git 代码写完发现开发分支错了怎么解决
修改当前开发分支git stash //将修改的代码暂存到stashgit checkout targetbranch //切换到正确的分支git stash pop // 从stash中取出暂存的代码修改上面三步完成，即修改为正确开发分支
2022-01-20 14:34:28
650
原创 git 删除本地及远程分支
git 删除本地及远程分支//查看本地分支 or //查看当前所在分支git branch git branch -a//删除目标本地分支git branch -D <分支名称>//删除目标远程分支git push origin --delete <分支名称>//重新拉取 分支git checkout <分支名称>//拉取远程分支 并创建本地分支git checkou
2020-07-28 16:55:20
321
原创 修改hosts文件实现在本地使域名解析到指定IP
修改hosts文件实现在本地使域名解析到指定IP一如何修改hosts文件？hosts文件的位置：C:\windows\system32\drivers\etc，文件夹中找到Hosts文件并用记事本打开。按照 ip地址 域名 的格式添加单独的一行记录。例：112.124.39.29 www.server110.com注： IP地址前面没有空格，ip地址和域名之间，要有且至少1个空格。修改后，一定要记得保存文件。查看域名的IP地址是否已经生效操作：点击“开始”点击“运行
2020-06-19 15:27:54
14951
原创 使用nuxt.js构建一个vue项目
使用nuxt.js构建一个vue项目简述过程：使用nuxt2.0官方脚手架，先全局安装npx，输入npm i -g npx切换至创建项目的路径，输入npx create-nuxt-app ’项目名称‘回车后，会出现一些配置项，可集成koa，elementUI等模块，按需选择Y或者N即可。补充：有时可能需要输入npm i --update-binary，以杜绝编译时node版本的一些隐患npm i --update-binary若需使用css预处理器（如：sass/
2020-06-12 14:33:11
699
原创 程序员特有的浪漫
程序员特有的浪漫控制台输出以下内容：[[][0] + []][0][5]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][8]+[[[] == []][0] + []][0][2]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]...
2020-04-10 14:53:31
278
原创 canvas生成图片分享并保存相册【uniapp开发小程序项目】
canvas生成图片分享并保存相册具体步骤描述：添加画布首先，在小程序里进行绘图操作需要用到组件，那我们就先在我们的wxml代码中放入<canvas>，然后，我们要开始写JS代码在这张画布上进行绘图操作。代码如下：html代码：<template> <view class="mine"> <!-- //广告 触发分享打开分享弹窗，开始...
2020-04-10 14:43:26
1569
原创 微信小程序rich-text富文本 图片超出屏幕宽度，自适应解决
微信小程序rich-text富文本图片自适应处理一、问题描述微信小程序rich-text标签对于样式定义仅支持style和class，直接指定<img>样式设置图片样式无效。造成<img>图片宽度太大超出显示屏。如图：实际图片应如下图显示：二、解决使用正则替换处理，添加style属性设置图片宽度 data.content.replace(/\<img...
2020-03-31 14:49:02
7858
3
原创 css 虚化背景图
css 虚化背景图虚化背景样式： -webkit-filter: blur(2rpx);-moz-filter: blur(2rpx);-o-filter: blur(2rpx);-ms-filter: blur(2rpx);filter: blur(2rpx);示例直接上代码，此示例是基于uniapp项目举例（最近在熟悉uniapp框架，所以直接基于项目写例子）注： 其中涉及到...
2020-03-23 19:31:21
970
原创 uniapp 入行（一）
一、开始下载hbuilder编译器；创建默认模板项目；运行到各三方编译器，需设置编译器所在本地路径（可以直接打开第三方编译器）；注： 第三方编译器需要开启访问权限，方可访问。如下图中提示：去开启服务器端口二、项目结构uni.css — 全局样式【无需引用即可全局使用】；pages.json — app的初始化设置，注册页面【设置页面路由等】设置tabBar：官网 –...
2020-03-13 17:43:04
1211
原创 原生js写tab选项卡切换功能【附加：移动端项目解决适配问题】
原生js写tab选项卡切换功能【附加：移动端项目解决适配问题】注：以下是移动端项目为例：html代码 + js代码：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="...
2020-03-10 15:02:14
562
原创 JS隐藏11位手机号码中间4位为****
JS隐藏11位手机号码中间4位为****其实是用字符串的截取来实现，话不多说直接上代码：let tel = '15823561797';tel = tel.slice(0,3)+" **** "+tel.slice(-4);console.log(tel);效果如图：...
2020-01-08 11:17:12
618
原创 vue项目【 input输入框长度限制】
vue input输入框长度限制<input type="number" maxlength="11" placeholder="请输入手机号">经测试，发现在type为number或者text时，设置maxlength参数并不会生效。解决如下：<input type="number" oninput="if(value.length > 11)value = v...
2020-01-07 18:42:51
5790
1
原创 微信小程序getLocation 需要在app.json中声明permission字段
微信小程序 getLocation 需要在app.json中声明permission字段一、 问题：小程序的位置授权要先在app.json里声明一下，如下图。据说这是改版之后需要做的配置，之前是不需要的【旧版本没用过】如图二、 解决：根据描述，在app.jsonz中声明permission字段，如图： "permission": { "scope.userLocation...
2019-12-17 11:50:44
746
原创 JavaScript 【js】回车键替换成逗号，逗号替换成回车键
JavaScript 【js】回车键替换成逗号，逗号替换成回车键一、逗号替换成回车键let text = '1，2';text = text.replace(/\uff0c/g,"\n");console.log(text);//如图所示。replace(/\n/g,",")//回车键替换成逗号二、回车键替换成逗号let text = '12';text = text.rep...
2019-12-12 16:05:06
4941
原创 JavaScript （js）--- 正则匹配中文标点符号
JavaScript （js）— 正则匹配中文标点符号function checkText() { var text = ","; //匹配这些中文标点符号 。 ？ ！ ， 、 ； ： “ ” ‘ ' （ ） 《 》 〈 〉 【 】 『 』 「 」 ﹃ ﹄ 〔 〕 … — ～ ﹏ ￥ var reg = /[\u3002|\uff1f|\uff01|\uff0c|\u3001|\uff1b...
2019-12-12 15:44:39
7997
1
原创 vue + element 项目中，表格多选状态如何禁选
vue + element 项目中，表格多选状态如何禁选一、 应用情景因需求，要对elementUI中table表格的多选框进行 可勾选 和 不可勾选 的处理二、 具体步骤1. 给 type 属性为 selection 的<el-table-column />加一个事件 :selectable='selectInit’ <el-table-column ...
2019-12-07 16:56:36
1231
原创 vue项目中，上传图片做像素大小宽高的限制
vue项目中，上传图片做像素大小宽高的限制<el-upload class="avatar-uploader" action="http://upload.qiniup.com" :data="qn" :show-file-list="false" :on-success="handleAvatarSuccess" ...
2019-12-05 18:29:21
3738
1
原创 vue 项目中H5页面，实现大转盘活动
vue 项目中H5页面，实现大转盘活动<template> <div class="about"> <div id="app"> <span>Prize number: {{ prizeNumber }}</span> <button type="button...
2019-11-25 14:30:48
1615
5
原创 数组的flat方法【Array.prototype.flat()】
数组的flat方法【Array.prototype.flat()】一、 概念 flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。二、语法结构var newArray = arr.flat([depth])参数depth： 指定要提取嵌套数组的结构深度，默认值为 1。返回值： 一个包含将数组与子数组中所有元素的新数组。...
2019-10-12 10:48:54
7335
1
原创 vue项目实现记住密码到cookie功能
vue项目实现记住密码到cookie功能一、实现功能：1.记住密码勾选，点登陆时，将账号和密码保存到cookie，下次登陆自动显示到表单内2.不勾选，点登陆时候则清空之前保存到cookie的值，下次登陆需要手动输入二、思路：大体思路就是通过存/取/删cookie实现的；每次进入登录页，先去读取cookie，如果浏览器的cookie中有账号信息，就自动填充到登录框中，存cookie是在登...
2019-09-30 18:18:17
514
原创 如何监听 Element 组件 el-input 标签的 回车enter事件
如何监听Element组件标签的回车事件一、现象表单提交时需要处理输入框的回车事件，一般的原生input标签可以用@keyup.enter=“onSubmit”（tips:onSubmit为定义的方法）二、解决1、@keyup.enter=“onSubmit” 改写为 @keyup.enter.native=“onSubmit” ，也就是说多加一个native标志2、如：<el...
2019-09-29 14:05:36
956
原创 vue项目中，js （javascript）生成二维码
vue项目中，js （javascript）生成二维码1. 概述1.1 引入二维码生成模块 npm install qrcodejs2 --save注意：此处安装qrcodejs2，安装依赖后可在main方法中进行全局引用设置，也可单独某个页面中进行引用设置。1.2 引入使用import QRCode from 'qrcodejs2';备注：在main中设置全局可使用 Vu...
2019-09-22 20:20:59
469
转载 移除HTML5 input在type="number"时的上下小箭头
移除HTML5 input在type="number"时的上下小箭头在chrome下：input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{ -webkit-appearance: none !important; margin: 0; }Firefox下：input[type="numbe...
2019-08-30 14:26:18
219
原创 当 input 属性为 number，设置maxlength属性不生效的坑
当 input 属性为 number，设置maxlength属性不生效的坑一、现象1、 <input type="text" maxlength="11" />，有效；2、 <input type="number" maxlength="11" /> 无效当input的type属性设为number时，maxlength属性失效，长度可以无限输入。二、解决方法&...
2019-07-04 17:10:13
4652
2
原创 element-ui 表格列动态展示时出现排序错乱问题
element-ui 表格列动态展示时出现排序错乱问题一、问题描述当表格列项动态显示时，多次刷新，造成渲染时出现列项错乱现象二、解决问题给每列加设排序，用key=“1”...
2019-06-23 18:02:24
6105
原创 vue+elementUI项目中，el-dialog弹出框被遮罩层覆盖
vue+elementUI项目中，el-dialog弹出框被遮罩层覆盖一、问题表现el-dialog弹出框被遮罩层覆盖但是，浏览器调试时，明明遮罩层比弹出框z-index层级小【低一层】。二、解决方法在el-dialog标签里添加 :modal-append-to-body='false’:modal-append-to-body='false'成功被解决。三、解决原理：...
2019-06-19 17:28:08
8965
2
原创 js 将13位时间戳转化为YYYY-MM-dd HH:mm:ss
方法一：var date = 1553677259000,y,m,d,h,mm,s;date = new Date(ele.createTime);y = 1900 + date.getYear();m = "0" + (date.getMonth()+1);d = "0" + date.getDate();h = "0" + date.getHours();mm = "0" + ...
2019-04-26 16:37:13
3105
翻译 es6 解构赋值
//一维数组解构var data = ['aa','bb','cc'];let [a,b,c] = data;alert(a,b,c) //aa bb cc//二维数组解构var data = ["aa","bb",[22,33],"cc"];let [a,b,[c,d],e] = data;alert(a,b,c,d,e) //aa ...
2019-04-25 14:32:37
434
原创 vue动态绑定背景图片
vue动态绑定背景图片html代码：<html> <template> <div class="itemBox"> <div class="item" v-for="(ele,i) in goalList" :key="i" :style="{'backgroundImage': 'url(' + ele.bg + ')'}"> ...
2019-04-18 16:04:25
11145
翻译 中文版Chrome浏览器不支持12px以下字体的解决方案
中文版Chrome浏览器不支持12px以下字体的解决方案以下内容为转载内容，最下方会有自测经历，自测以下代码有效： Chrome 27之前的中文版桌面浏览器会默认设定页面的最小字号是12px，英文版则没有限制，主要是因为chrome认为汉字小于12px就会增加识别难度，尤其是中文常用的宋体和微软雅黑。而我们在实际项目中，对于数字/英文内容，其他字体的文本可能会有特殊的需求要求它们以更小的字...
2019-04-11 12:10:54
953
原创 手机改变系统字体大小导致h5页面在webview中变形。。h5页面嵌入webview中，在有些手机上布局乱套的bug。。
解决因为手机设置系统字体大小导致h5页面在webview中变形的BUG 说实话，遇到这个问题，我内心里是崩溃的，表面还一副镇定自若的模样，事实上受到了一万点打击，我做的页面完美适配，就那一台手机，就那一台，整体都是乱的。 然后发现那台手机所有的字体都特别大，像是老年机，这时尝试去查看系统字体大小，发现设置比标准大了两个度【超小–标准–大--超大–巨大，就是五个程度，具体什么字不想看了，要吐...
2019-03-26 20:50:08
3931
原创 基于elementUI中级联选择器，完成省市区二级+三级联动效果
基于elementUI中级联选择器，完成省市区二级+三级联动效果注： 最下方有城市数据下载地址，为本人git账号地址，放心使用<p>选择区域：</p><el-cascader :options="options" v-model="selectedOptions" @change="handleChange" :separator="' '">...
2019-03-26 17:11:49
6786
1
原创 在 vue 中动态绑定 v-model
在 vue 中动态绑定 v-model一、经典数据双向绑定如下动图：二、当v-for循环中需要动态绑定v-model以图示例：注意： 避免在运行时向Vue实例或其根 $data 添加反应性属性在data选项中预先声明它。 注意v-model是vue中的一个指令，而不是标签属性，不要用v-bind:去动态绑定它【“ v-bind: ”缩写为“ : ”】...
2019-03-26 15:51:15
8397
2
原创 css 设置文本自动填充指定宽度
css 设置文本自动填充指定宽度场景如图： 指定宽度，文本自适应填满.justify { width:100px; display:block; //注：此处需要设置display属性为块级block text-align:justify; text-align-last:justify; }...
2019-03-21 11:53:49
4648
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人