- 博客(74)
- 收藏
- 关注
RSS订阅原创 Vuex中getters的使用方法
Vuex中getters的使用方法前提脚手架搭好Vuex，项目内store文件夹下的index.js实例代码export default createStore({ state: { todos: [ { id: 1, text: '...1', done: true }, { id: 2, text: '...2', done: false }, { id: 3, text: '...3', done: true } ] }, getters: { // 基础用法
2020-12-23 11:53:40
1406
原创 Vue中使用Vuex获取多个state状态的4种写法
Vue中使用Vuex获取多个state状态的3种写法写法①computed: { count () { return this.$store.state.count }, count1 () { return this.$store.state.count1 } }写法②computed: mapState([ 'count', 'count1' ])写法③computed: { ...mapState(
2020-12-22 15:34:37
2993
原创 运用极简行代码实现省市区三级联动【固定数据版】
运用极简行代码实现省市区三级联动【固定数据版】页面展示效果map.html<style> body{ background: #eee; } select{ width: 90px; }</style><body> <div> <select id="province"> &l
2020-12-21 16:32:43
3453
转载 全国省市区县json数据
map.json[ { "name": "北京市", "city": [ { "name": "北京市", "area": [ "东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区", "
2020-12-18 11:26:54
4561
原创 运用极简行代码实现省市二级联动【json动态数据版】
运用极简行代码实现省市二级联动【json动态数据版】map.html请查看：运用极简行代码实现省市二级联动【固定数据版】map.jsvar arr = [] //存数据$(function() { $.ajax({ // 获取json数据 url: 'map/map.json', dataType: 'json', success: function(res) { let _pro = document.getE
2020-12-18 11:20:14
491
原创 运用极简行代码实现省市二级联动【固定数据版】
运用极简行代码实现省市二级联动【固定数据版】固定数据(加到map.js开头)var area =[ { "proName":"广东", "cityName":['潮州','东莞','佛山','广州','河源','惠州','江门','揭阳','茂名','梅州','清远','汕头','汕尾','韶关','深圳','阳江','云浮','湛江','肇庆','中山','珠海'], }, { "proName":"广西", "city
2020-12-18 11:05:26
397
原创 微信浏览器切换页面不间断播放音乐解决办法思路
应用场景微信浏览器打开的H5页面不可能做到的，微信每跳转一次页面，就会销毁之前的页面，storage记录上次播放的时间也会消失，不过，ios手机可通过底部出现的左右导航栏切换页面的时候，storage不会被销毁，可以实现页面不间断音乐播放，但还是会有点不精准，上次记录播放的时间点有误差思路：使用的技术：localStorage.setItem（‘键’，值）localStorage.getItem（‘键’）localStorage.removeItem（‘键’）具体实现参考下面链
2020-12-16 17:22:51
1269
原创 ios系统微信H5页面背景音乐自动播放
思路：在html页面代码内嵌小程序的代码块，可让ios手机自动播放背景音乐注意：微信小程序的代码块script脚本必须写在html文件，不可外部引入html代码<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maxi
2020-11-04 11:35:32
1384
原创 js前端实现ios12和ios13+摇一摇功能
前言：做过H5摇一摇玩法的小游戏的朋友都知道，随着ios的系统升级，安全协议越来越严格，例如ios系统手机的运动和方向感控被限制了，必须得用户手动授权方可进行，前端为了要实现摇一摇功能，必须要具备以下思路。思路： ① 必须是https协议，即打开h5页面的链接开头必须是https://… ②摇一摇功能开启必须经过用户授权，必须用户手动点击确定。PS：相关H5页面操作，均是在微信浏览器打开html代码<!DOCTYPE html><html lang="zh-CN"&.
2020-11-04 10:20:26
2454
7
原创 解决$(window).load(function(){ …})报错问题及详解$(document).ready()和$(window).load()的区别
解决(window).load(function()…)报错问题及详解(window).load(function(){ …})报错问题及详解(window).load(function()…)报错问题及详解(document).ready()和$(window).load()的区别1.解决$(window).load(function(){ …})报错问题①修改：$(window).on(“load”,function(){ …})2.(document).ready()和(document).re
2020-11-02 11:36:56
2398
3
原创 CSS可以继承的样式属性
CSS可以继承的样式属性不可继承的：display、margin、border、padding、background、height（min-height、max-height）、width（min-width、max-width）、overflow、position、left、right、top、bottom、z-index、float、clear、vertical-align、（table-layout、page-break-after、page-bread-before、unicode-bidi）
2020-09-27 14:43:12
1060
原创 解决ios手机select下拉选择不居中问题
解决ios手机select下拉选择不居中问题思路：select选择后赋值给span，select字体设置透明，span要设置不可点击html5代码<div class="page" style="position: relative;"> <span disabled>第 1 页</span> <select id='pageIndex' onclick="hasSelect()" onchange='pageChange(this.value
2020-09-07 17:59:15
1653
原创 vue动态绑定class和style，三目运算符条件判定
三目运算符vue语法#标签内容{{button？ ‘取消’ ：‘确定’}}【例子】<el-button class="button" type="primary" @tap="handleClick">{{button? '取 消' : '确 定'}}</el-button>#类名：class = “[className ? ‘xx’ : ‘xx’]”【例子】<input :class="[className ? 'class1'
2020-08-31 10:37:04
9580
原创 ios摇一摇触发后不能播放音乐的解决方案
提出问题：ios手机做测试的时候，摇一摇功能已授权，监听（addEventListener）设备运动事件（devicemotion）的时候触发 Audio 的play() 方法开始播放当前的音频没有任何一点声音，纹丝不响。分析：可能 授权摇一摇之后，Audio的play()方法压根就没被触发到寻找原因/解决问题：经过不断调试和不断百度搜索，一顿操作猛如虎之后，原来真相是这样的，在IOS里明确指出等待用户的交互动作后才能播放media，所以在js代码中第一次直接调用play()方法播放音频会被阻止，必须得
2020-07-24 17:55:18
1112
原创 js、vue和小程序阻止事件冒泡
冒泡当嵌套多个标签，每个标签上有点击事件时，事件会从最里面的子标签事件开始向上冒泡阻止冒泡event.stopPropagation() 可改写为 return false阻止标签点击的默认行为，如a标签event.preventDefault（） 可改写为 return falsevue怎么阻止事件冒泡1、@click.stop=“handleClick” //阻止事件冒泡2、@click.prevent=“handleClick” //取消默认事件3、@click.stop.
2020-06-16 15:46:23
499
原创 js checkbox全选和取消全选功能
全选和取消全选先来看下效果附上代码html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>全选和取消全选</title> <link re
2020-06-10 11:35:24
538
原创 解决vue 使用velocity.js动画库rotateZ属性旋转图片出现锯齿问题（有效）
解决vue 使用velocity.js动画库rotateZ属性旋转图片出现锯齿问题（有效）点开下面的链接，有3种解决办法，有兴趣的小朋友可以查看3种解决办法其中的最优解解决办法，直接在transfrom属性后加入translateZ : 0px即可实现，但是在使用vue时引用velocity.js出现以下情况然后呢小伙伴看见了么，translateZ属性被生吞了，那么图片旋转后的锯齿消除不了，怎么办！嘤嘤嘤~好了不拐弯抹角了，原因是当你设置的属性值为0的时候，浏览器默认不把你的属性渲染出来
2020-05-25 16:40:01
943
原创 世界上最令人看起来感觉舒适的10种颜色
世界上最令人感觉舒适的10种颜色，前端调色再也不怕找不到色码了如果有打开微信（或者QQ）的话，按下Alt+A键（或Ctrl+Alt+A键），鼠标放到色块上就能看到RGB了
2020-05-15 18:03:03
7226
原创 前端html、css、jq制作精准计时器（几乎零误差）
先来看下效果制作源泉（或遇到的苦恼）：一般的计时器，一般的思路，要做成上图的效果，首先会想到的是通过一毫秒一毫秒的计数去实现，但是每当返回setTimout执行该函数的时候，中间消耗了其他资源时间，从而产生误差,使得计时器计时不准确，计时时间越长越能表现出来。核心思想（或解决办法）：每当计时器开始，截取此刻的时间startTime（系统时间），然后使用计时器setTimeout不断获取系统的...
2020-04-30 11:36:35
1284
1
原创 JQ实现弹窗滚动背景页面不跟随滚动
JQ实现弹窗滚动背景页面不跟随滚动情景：当自己写的弹窗使用overflow滚动的时候，其背景页面也是设置了overflow可以滚动的，这时候当弹窗滚动到底部时，背景页面会开始滚动，而滚动弹窗没有反应了。解决问题：弹窗滚动，页面背景就不能滚动思路：当弹窗弹出时，设置背景页面的bodyposition属性值为fixed固定住页面不能拖动，并让它置于顶部，然后当关闭弹窗的时候再恢复背景 页面滑动...
2019-07-09 16:13:08
1541
原创 简易JS计算器
简易JS计算器<!DOCTYPE html><html><head> <title>原创--计算器</title> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <style type="text/css"...
2019-06-25 09:54:27
342
原创 Html+Css+js实现计时器
Html+Css+js实现计时器人狠话不多，先上图实现原理：1.通过js控制图片的路径，动态替换图片2.通过js控制图片的显示或隐藏，动态替换图片一版的实现代码：game.html<body> <div class="game-startNumber flex"> <div class="staticTime"> &l...
2019-05-08 12:05:13
4500
2
原创 实现单选（radio）和多选（checkbox）自定义选择样式
自定义单选和多选的radio和checkbox实现先看效果如图↓单选：123多选：12代码1//单选时的html代码<div class="Seleted"> <label class="border-bottom"> <input name="Select1" type="radio" hidde...
2019-04-25 17:20:04
3849
原创 雪碧图&&合成工具
推荐使用的雪碧图合成工具https://www.toptal.com/developers/css/sprite-generator选择图片放进去，会自动帮助你生成矢量图和获取矢量图图片定位的代码，方便又好用！！还有一点要注意的，矢量图的定位使用的是px固定单位，若想要改变图片的大小，最简单快捷的办法就是使用scale（）方法，即CSS3的缩放scale（）方法，它会将元素根据中心原点...
2019-04-25 17:02:31
4281
原创 踩坑：Vue.js中v-for和v-if不能同时使用
踩坑：Vue.js中v-for和v-if不能同时使用问题出现之时：v-if代码地方出现报错下面有红色的波浪线，具体报错信息大概是说v-for和v-if不能混用，取而代之要使用computed计算属性，让数组变量替换为返回的已过滤数组的计算属性。那就写一个计算属性呗在计算属性中已经是过滤了一次数组遍历项，这样写使得性能更优，而且代码不会再报错了！！！！...
2019-04-25 16:26:17
13700
8
原创 Vue项目解决iphoneX底部小黑条遮挡底部菜单栏布局问题
Vue项目解决iphoneX底部小黑条遮挡底部菜单栏布局问题1.先在公共样式里给body加上红色区域块的代码2.在入口文件的viewport的内容里使用viewport-fit=cover属性3.效果如图码字前：~~~~~~码字后：~~~~~~~~~引用该链接的见解实现↓https://blog.csdn.net/dx18520548758/article/details/8...
2019-04-11 14:36:51
5008
4
原创 每点击一次随机显示所有语句中的一条（使用随机函数）
普通办法：以上这种办法会出现个问题，当你每去掉“display：none”样式的时候，若用户多次点击就会显示出多条语句（因为它们不再是“display：none”样式了），所以用这种办法的时候还需要在结束弹窗的时候，把display：none样式还原回来，比较麻烦我就不写，推荐以下的解决的办法，使用JQ的show（）和hide（）方法来处理。解决办法：显示结果如下，非常成功注意几...
2019-02-21 18:15:35
686
原创 获取父级id和兄弟id
简单方法：Html代码截图：Js代码截图通过html页面直接传父级的id和兄弟的id获取他们的id值（这种方法比较人工化，类似的问题多起来就很麻烦，要一个个手动输入），如果不嫌麻烦，可以参考下面做法！ 智能化的方法：思路：有没有办法，就是点击的时候获取到子级的值，去获取父级的id，然后再通过父级id获取兄弟id？以下请看代码：Html代码的传值去掉（这里就...
2019-01-17 14:54:01
3160
转载 Web必知必会—HTTP
Http知识栈关键词概念URL：uniform resource location 统一资源定位符URI：uniform resource identifier 统一资源标识符（URI是一种资源的标识；而URL也是一种URI，它指明了如何定位Locate到这个资源。URI是一种抽象的资源标识，既可以是绝对的，也可以是相对的。但是URL是一种URI，它指明了定位的信息，必须是绝对...
2019-01-11 17:24:23
239
原创 日历插件使用心得
日历插件使用心得1.laydate(https://www.layui.com/laydate/)这个插件好用样式也很好看，但是只能靠点击，不能实现手机的下拉选择，操作不便，不过可有多种样式选择2.html自带得input type date（http://www.runoob.com/try/try.php?filename=tryhtml5_input_type_date）...
2019-01-10 15:39:06
439
转载 实用的15种html/css/css3居中方式 实现水平居中 垂直居中 水平垂直居中
作为前端工程师，在做页面布局的时候，毫无疑问会涉及到居中布局的困扰，今天就用一篇文章帮你解决这个普遍而又繁琐的问题，及其适合新手去做HTML5/CSS3的页面布局，同时也适合喜欢手写CSS3的前端工程师们！
2018-12-17 14:37:26
821
原创 欢迎使用CSDN-markdown编辑器
欢迎小海龟第一次使用Markdown编辑器写博客小海龟要好好学习成为程序员而修炼：我会把平时书写的作业心得写进来快捷键加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl + Q插入链接 Ctrl + L插入代码 Ctrl + K插入图片 Ctrl + G提升标题 Ctrl + H有序列表 Ctrl + O无序列表
2017-12-08 14:43:40
253
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人