09 2019 档案

元素focus页面不滚动不定位的JS处理
摘要：有时候我们希望元素被focus的时候页面不发生滚动，例如我们点击一个按钮打开一个弹框，此时点击弹框中的关闭按钮隐藏弹框后，希望键盘的焦点回到之前的按钮上，我们就会执行如下JavaScript代码： 但是有时候会带来另外一个比较严重的体验问题，那就是如果弹框显示之后我们页面发生了滚动，原本点击的按钮跑 阅读全文
posted @ 2019-09-25 10:20 超哥20 阅读(940) 评论(0) 推荐(0)
js使用案例
摘要：1、判断是否微信浏览器 2、判断是移动端浏览器还是PC浏览器 3、创建一个菜单搜索 4、联想自动补齐功能 5、下啦菜单可进行搜索/过滤操作 6、点击式导航栏下啦菜单 7、全屏幕导航--从上到下动画 8、右侧侧边栏 9、侧边栏动画--页面主体内容黑色透明背景 10、js/css响应式顶部导航样式实例 阅读全文
posted @ 2019-09-24 14:02 超哥20 阅读(575) 评论(0) 推荐(0)
js使用setInterval简单实现一个时钟
摘要：var myVar=setInterval(function(){ myTimer() },1000); function myTimer(){ var d=new Date(); var t=d.toLocaleTimeString(); document.getElementById("demo").innerHTML=t; } 阅读全文
posted @ 2019-09-24 11:24 超哥20 阅读(715) 评论(0) 推荐(0)
js日期封装方法
摘要：Date.prototype.format = function (fmt) { var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), //小时 "m+": this.getMinutes(), //分 "s+": this.getSeconds(), //秒 "q+": 阅读全文
posted @ 2019-09-24 10:48 超哥20 阅读(853) 评论(0) 推荐(0)
scss简单使用总结
摘要：1、使用全局变量 2、嵌套使用 3、引入别的文件 SASS中引入片断时，可以缺省使用文件扩展名，因此上面代码中直接通过@import 'reset'引入，编译后生成的代码如下： 4、混合 混合也可以这样用 5、继承，继承是SASS中非常重要的一个特性，可以通过@extend指令在选择器之间复用CSS 阅读全文
posted @ 2019-09-20 15:27 超哥20 阅读(374) 评论(0) 推荐(0)
点击页面出现文字动画
摘要：css部分 js部分 本文来源：https://www.zhangxinxu.com/wordpress/2018/05/click-page-popup-text-tips/ 阅读全文
posted @ 2019-09-19 17:13 超哥20 阅读(429) 评论(0) 推荐(0)
js简单实现累加
摘要：var x = 0, n = 0; while (x<10) { x++; n += x; } console.log(n);//55 阅读全文
posted @ 2019-09-18 14:49 超哥20 阅读(4491) 评论(0) 推荐(0)
github发布线上项目
摘要：今天看MDN技术文档的时候，突然看到里面有发布网站的方法，具体链接如下： https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/Publishing_your_website 然后我就选择了里面GitH 阅读全文
posted @ 2019-09-18 14:13 超哥20 阅读(396) 评论(0) 推荐(0)
jsonp的实现
摘要：以前只知道jsonp其实是通过创建一个新的script标签，然后进行请求数据，因为script的src属性进行请求，没有存在跨域这么一说， 因此jsonp的方式也是只能是通过get来进行请求，于是今天再网上看到这么一个做法，觉得可以学习一下。 阅读全文
posted @ 2019-09-16 17:28 超哥20 阅读(917) 评论(0) 推荐(0)
js操作class
摘要：//判断有无 function hasClass(ele, cls) { return ele.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)")); } //添加 function addClass(ele, cls) { if (!this.hasClass(ele, cls)) ele.className += " " + cls; 阅读全文
posted @ 2019-09-16 16:51 超哥20 阅读(697) 评论(0) 推荐(0)
js开发实用技巧
摘要：String Skill 时间对比 格式化金钱 随机生成ID 生成随机HEX色值 生成星级评分(可以直接设置节点内容为start，然后设置不同颜色) 操作URL查询参数 Number Skill 取整 补零 转数值 时间戳 精确小数 判断奇偶 取最小最大值 生成范围随机数 Boolean Skill 阅读全文
posted @ 2019-09-16 09:21 超哥20 阅读(283) 评论(0) 推荐(0)
使用:valid和:invalid校验表单
摘要：css: 效果： 阅读全文
posted @ 2019-09-09 09:46 超哥20 阅读(610) 评论(0) 推荐(0)
import和export
摘要：import导入模块、export导出模块 总结： 阅读全文
posted @ 2019-09-07 17:13 超哥20 阅读(260) 评论(0) 推荐(0)
vue组件使用技巧（附带vuex的modules引入）
摘要：正常我们想要使用一个组件，需要经过三步： 这样做本身没有问题，但是组件多了的话就麻烦了，看了网上一些资料，说可以借助一下webpack，使用require.context()方法来创建自己的模块，从而实现自动动态require组件。 思路是：在src文件夹下面main.js中，借助webpack动态 阅读全文
posted @ 2019-09-07 15:49 超哥20 阅读(2935) 评论(0) 推荐(0)
自己写的一个简单版swiper，后面再学习优化
摘要：<template> <div class="swiper"> <div id="swiper_lsc" class="swiper_lsc"> <div class="swiper_box" v-for="(item,index) in imgArr" :key="index"> <img :src="item.url" alt=""> </div> </d 阅读全文
posted @ 2019-09-05 15:36 超哥20 阅读(387) 评论(0) 推荐(0)
解决flex布局的space-evenly兼容性问题
摘要：直接上代码： space-evenly的作用是将每个元素的间隔相等, 但是兼容性较差,尤其是IOS,这种trick很好的解决了兼容性问题 原理很好理解,假设有5个元素, space-evenly是将每个剩余空间平均分割,这样就有6个相同宽度的间隔空间,间隔空间数量 = n + 1;space-bet 阅读全文
posted @ 2019-09-04 11:25 超哥20 阅读(1285) 评论(0) 推荐(0)
es6来实现封装、继承学习
摘要：一、为什么要封装 在开发过程中，具有相同处理逻辑的代码通常会进行函数的封装来减少代码冗余，使代码看起来更加美观， 属性一般定义在构造函数中，而方法一般定义在prototype原型上 es6中的class类的实现 在类里面定义方法，是直接定义在原型上的。constructor方法相当于es5中构造函数 阅读全文
posted @ 2019-09-03 09:36 超哥20 阅读(841) 评论(0) 推荐(0)
关于vue.js禁用浏览器返回问题以及路由的一些简单使用
摘要：1、查了一下网上的资料，发现以下方法有效 2、可是，有时候不能直接禁用，而是要返回指定的路由地址，于是： 其中this.goback()是mothods中的方法，可以自定义返回地址，例如： 3、以上两个方法出现的情况都是因为浏览器有记录跳转路由，因为之前基本路由跳转都是用的router.push() 阅读全文
posted @ 2019-09-02 10:21 超哥20 阅读(2040) 评论(0) 推荐(0)