- 博客(213)
- 资源 (1)
- 收藏
- 关注
原创 vue使用v-if v-show页面闪烁,div闪现的解决
在页面层次结构,数据较多的时候,用v-if或者v-show就会出现div闪现,或者部分闪烁的结果。可以在根元素添加v-cloak来解决,并且设置它的样式即可。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> /* 在引入的css文件中写入这个*/...
2021-06-28 17:26:20
2451
原创 H5中添加video视频
1,下面是一个播放视频的最简单样例(controls属性告诉浏览器要有基本播放控件)<video src="hangge.mp4" controls></video>2,通过width和height设置视频窗口大小<video src="hangge.mp4" controls width="400" height="300"></video>3,预加载媒体文件设置preload不同的属性值,可以告诉浏览器应该怎样加载一个媒..
2021-05-08 17:32:33
2839
转载 VS Code 快捷键(中英文对照版)
常用 General按 Press 功能 Function Ctrl + Shift + P,F1 显示命令面板 Show Command Palette Ctrl + P 快速打开 Quick Open Ctrl + Shift + N 新窗口/实例 New window/instance Ctrl + Shift + W 关闭窗口/实例 Clo...
2019-10-10 14:47:23
602
转载 vue-cli脚手架中webpack配置基础文件详解
一、前言vue-cli是构建vue单页应用的脚手架,输入一串指定的命令行从而自动生成vue.js+wepack的项目模板。这其中webpack发挥了很大的作用,它使得我们的代码模块化,引入一些插件帮我们完善功能可以将文件打包压缩,图片转base64等。后期对项目的配置使得我们对于脚手架自动生成的代码的理解更为重要,接下来我将基于webpack3.6.0版本结合文档将文件各个击破,纯干料。重点...
2019-08-08 15:02:18
353
转载 vue-cli的使用步骤
vue-cli 是 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目GitHub地址是:https://github.com/vuejs/vue-cli一、安装vue-cli:全局安装 vue-cli:npm install -g vue-cli但是这种安装方式比较慢,推荐使用国内镜像来安装,所以我们先设置 cnpm:npm install -...
2019-08-05 16:29:01
920
原创 微信小程序canvas与wx:if的出现的问题
微信小程序canvas与wx:if的漏洞 问题描述当使用wx:if="{{showStatus}}" 去切换canvas 的消失与出现时,第一次渲染会成功当关闭即设置showStatus为false,然后再次设置showStatus为true,会发现canvas 标签出现,但是内容为空解决方案1、this.setData({ showStatus为true }...
2019-08-05 14:24:47
1968
1
原创 常用的正则表达式
正则表达式的元字符元字符 名称 匹配对象 * 星号 零次或多次 + 加号 一次或多次 ? 问好 零次或一次 . 点号 单个任意字符 [...] 字符组 列出的任意字符 [^...] 点号 未列出的任意字符 ^ 脱字符 行的起始位置 $ 美元符 行的结束为止...
2019-04-25 15:53:40
332
原创 如何通过js和jquery获取图片真实的宽度和高度
1、什么时候需要获取图片真实的宽度和高度 在做pc网页的时候,有时候会考虑按照插入的图片的尺寸来判断图片是横图还是竖图。然后判断过后给予不同的展示方式! 另外一种就是在手机页面上,在新闻页插入的图片往往都是按照图片的原尺寸来展示,如果手机屏幕太小,太大的图就会超出去!这时候有两种解决办法1)给所有的图片加上这样的样式.news img{margin:5px a...
2019-04-24 18:13:15
410
原创 web端 网页端分享功能的实现
思路web端 网页端分享功能的实现。我们看微信的分享开发者文档,可以知道使用微信JS-SDK可以实现网页在微信里的分享。微信JS-SDK说明文档也就是说 在微信浏览器中打开的网页 才能调用 该分享功能。但是我们是PC端打开的web,网页。怎么实现分享呢。因为微信现在已经屏蔽了来自外部的分享链接。所以我们的思路是 点击分享 按钮后 弹出一个 网页 或者 我们要分享的网页的 二...
2019-04-24 11:29:19
14021
原创 js清除浏览器缓存的几种方法
关于浏览器缓存浏览器缓存,有时候我们需要他,因为他可以提高网站性能和浏览器速度,提高网站性能。但是有时候我们又不得不清除缓存,因为缓存可能误事,出现一些错误的数据。像股票类网站实时更新等,这样的网站是不要缓存的,像有的网站很少更新,有缓存还是比较好的。今天主要介绍清除缓存的几种方法。清理网站缓存的几种方法meta方法//不缓存<META HTTP-EQUIV="pragma" ...
2019-04-22 14:03:59
11804
1
转载 skrollr.js中文教程
skrollr.js是一款轻量级且强大的js库,关于这款js库的相关的详细教程却不多。所以这里根据国内一些大神们的笔记和skrollr官方文档进行总结,方便自己以后查阅,也方便大家学习。这里主要参考了 Shimily大神的skrollr中文教程,在这个基础上进行改进和完善。有什么不妥之处,还希望大家能够及时指出,共同修改。一、skrollr 相关地址链接:skrollr官方地址 ...
2019-04-11 11:16:00
2583
原创 flexible.js 移动端自适应方案
一,flexible.js 的使用方式:github地址:https://github.com/amfe/lib-flexible官方文档地址:https://github.com/amfe/article/issues/17本文中有部分内容引至上面这个文档。(一),引用方式1,引用cdn地址<script src="http://g.tbcdn.cn/mtb/lib-...
2019-04-11 11:10:41
5909
原创 jQuery Easing 使用方法及其图解
从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数:properties:一组包含作为动画属性和终值的样式属性和及其值的集合 duration(可选):动画执行时间,其值可以是三种预定速度之一的字符串("slow", "normal", or "f...
2019-04-11 11:05:27
511
原创 html前端使用高德地图入门教程,并在地图上标记位置
准备工作 注册Key 首先,注册开发者账号,成为高德开放平台开发者 登陆之后,在进入「应用管理」 页面「创建新应用」 为应用添加 Key,「服务平台」一项请选择「 Web 端 ( JSAPI ) 」 记住这个Key,等会要用,以后可能也会用,一定要记住。 页面上的准备新建一个DIV,作为地图的容器(这一步和使用其他插件一样,必...
2019-04-09 17:29:17
23330
5
原创 H5唤醒本地APP(谷歌地图、百度地图等相通)
说一下兼容性问题:IOS:safari浏览器,google浏览器,UC浏览器可用QQ浏览器无法使用,其他的没测。Android:只有google浏览器可以打开谷歌地图,百度地图没测试。首先:判断当前操作环境与浏览器内核:let browser = { versions: function () { let u = navigator.userAge...
2019-04-09 17:01:36
4233
原创 移动端html5网页a标签实现打电话、发短信
采用url链接的方式,实现在safari ios,android 浏览器,webos 浏览器,塞班浏览器,ie,operamini等主流浏览器,进行拨打电话功能。1.最常用WEB页面JS实现一键拨号的电话拨打功能:<a href="tel:13764567708">移动WEB页面JS一键拨打号码咨询功能</a>在拨号界面,显示号码,并提示拨打。支持大部分的浏览...
2019-04-09 14:18:29
969
原创 移动端页面a input去除点击效果 及 pc端切换
1 手机端页面a button input去除点击效果以及闪屏问题 添加:a,button,input { -webkit-tap-highlight-color: rgba(255, 0, 0, 0);}2 使用border创建小三角形span { height: 0px; width: 0px; border-t...
2019-04-09 14:11:01
591
原创 微信小程序 获取地理位置(省市县)
配置过程:1、在腾讯平台申请自己的秘钥http://lbs.qq.com/console/mykey.html一定要记住自己的秘钥,程序中会用到2、小程序平台设置request安全域名https://apis.map.qq.com3、下载腾讯地图api js文件链接:https://pan.baidu.com/s/1rafwusj2raOMLNIcyMOnhg提取码:1w...
2019-03-29 11:03:09
1990
2
原创 仿响应式html:JavaScript判断设备处于PC端还是移动端
我们想要的效果是pc文件和mobile文件统一入口,适配不同的设备。先看看项目的目录:在index.html里面配置js控制选择那一个文件夹下的文件就可以了。我们要利用:Navigator 对象,Navigator 对象包含有关浏览器的信息。index.html很简单,直接上码吧:<!DOCTYPE html><html> <...
2019-03-27 10:48:44
636
原创 微信小程序顶部导航栏自定义,根据不同手机自适应距离状态栏高度,防止标题栏高度歪歪扭扭
微信小程序顶部导航栏自定义,根据不同手机自适应距离状态栏高度一、微信小程序顶部导航栏自定义 "navigationStyle": "custom"app.json "window": { "backgroundTextStyle": "dark", "navigationBarBackgroundColor": "#fff", "navigationBa...
2019-03-26 19:12:04
26918
12
原创 浅谈页面布局定位
。那为什么在开发过程里,经常给父元素设置相对定位,然后给子元素设置绝对定位呢? 【主体】 针对这个问题,也是前端里经常出现的一个问题。有的入门不久的经常按照编程习惯记成“子绝父相”,即子元素绝对定位,那么父元素一定要设置相对定位。 这个只是编码习惯造成的错误理解。。。 之所在开发里经常给父元素加相对后再给子元素加绝对定位,是因为父元素加相对定位后才不会摆脱流式布局,其他定位属性会让其摆脱流式布局的文档流,造成页面布局混乱。 .
2019-03-25 14:57:55
243
原创 JS浮点数表示法
精确地表示分数,比如1/2,1/8,1/1024。遗憾的是,我们常用的分数都是十进制分数1/10,1/100等,二进制浮点数表示法并不能精确的表示类似0.1这样的简单的数字。所以js浮点数运算会不精准。 例如:js加法:9.3+0.3;//结果为9.600000000000001js加法:9.3-0.7;//结果为8.600000000000001js乘法:7*0.8;//结果为5.6000000000000005js除法:9.3/0.3;//结果为31.0000000000000
2019-03-04 09:55:41
2404
1
原创 浅谈锚点跳转优先级
(1)name值 a 标签 name 属性值为 top(可变)<!-- 定义一个名称为top的锚点链接 --><a name="top"></a><!--主体代码--><!--返回页面顶部top锚点的链接--><a href="#top">返回顶部<
2019-03-02 15:08:06
624
原创 attachEvent兼容各浏览器事件(DOM2级事件的兼容处理)
on> <script type="text/javascript"> window.onload = function(){ // DOM2事件兼容 function addEvent(obj,ev,fn){ //obj为要绑定事件的元素,ev为要绑定的事件,fn为绑定事件的函数 if(document.addEventListener){ obj.addEventListener(ev
2019-02-18 11:40:39
546
原创 浅谈ASCII码
示(因为计算机用高电平和低电平分别表示1和0),例如,像a、b、c、d这样的52个字母(包括大写)以及0、1等数字还有一些常用的符号(例如*、#、@等)在计算机中存储时也要使用二进制数来表示,而具体用哪些二进制数字表示哪个符号,当然每个人都可以约定自己的一套(这就叫编码),而大家如果要想互相通信而不造成混乱,那么大家就必须使用相同的编码规则,于是美国有关的标准化组织就出台了ASCII编码,统一规定了上述常用符号用哪些二进制数来表示。 (2)概论 ASCII
2019-02-16 11:19:01
459
原创 windows系统设置定时关机
方法一:1、按win+R打开“运行”。2、输入“shutdown -s -t 300”。3、点击确定即可完成。注意事项:语句“shutdown -s -t 300”表示“300秒,即5分钟之后自动关机”,300可以换成任何整数,单位是秒。 方法二:1、按win+R打开“运行”。2、输入“cmd”,点击确定。3、在弹出窗口,输入“shutdown -s -t 300”,按回车。注意事项:语句“shutdown -s -t 300”表示“300秒,即5分钟之后
2019-02-07 23:49:45
845
原创 正则验证案例(1)
harset="utf-8"> <title>demo</title> <style type="text/css"> *{ margin: 0; padding: 0; } /*属性选择器*/ input[name="phone"]{ color: red; } </st
2019-01-25 09:33:26
176
原创 纯JS实现点击区域外隐藏元素
PE html><html><head> <meta charset="utf-8"> <title>demo</title> <style type="text/css"> *{ margin: 0; padding: 0; } .a
2019-01-23 15:30:11
491
原创 input表单控件及属性补充
</title> <style type="text/css"> *{ margin: 0; padding: 0; } .area{ width: 600px; height: 40px; border: 1px solid red; } .area span{ color: red; display: none; } .area
2019-01-18 11:57:53
736
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人