html5
文章平均质量分 90
昔人'
觉今是而昨非
展开
-
【vue】ios中返回到列表页出现空白的问题
问题:ios机器上点击返回列表页的时候,会出现空白现象,触屏一下或者拉动一下,数据才会显示出来,解决方案:给当前组件最外层元素添加以下样式overflow-y: auto;-webkit-overflow-scrolling: touch;position: absolute;top:0;left:0;width:100%;height:100%;...转载 2020-06-18 16:50:59 · 813 阅读 · 0 评论 -
h5(H5)下载功能,用JS在浏览器中创建下载文件
转载:http://www.jb51.net/article/47723.htm但受限于浏览器,很多情况下我们都只能给出个链接,让用户点击打开-》另存为。如下面这个链接:复制代码代码如下:file.js用户点击这个链接的时候,浏览器会打开并显示链接指向的文件内容,显然,这并没有实现我们的需求。HTML5中给a标签增加了一个download属性,只转载 2017-12-20 11:51:21 · 23475 阅读 · 0 评论 -
把后台传来的日期时间转化为几天前,几小时前,几分钟前在前端展现
function timeago(dateTimeStamp){ // dateTimeStamp是一个时间毫秒,注意时间戳是秒的形式,在这个毫秒的基础上除以1000,就是十位数的时间戳。13位数的都是时间毫秒。 var minute=1000*60; //把分,时,天,周,半个月,一个月用毫秒表示 var hour=minute*60转载 2017-11-24 13:36:20 · 4141 阅读 · 2 评论 -
使用swiper 轮播插件ajax 请求加载图片时,无法滑动
因为banner图是动态创建的,在插件开始初始化时,文档流中没用图片,故没有创建相应宽度,通过调整js加载顺序,问题还是没有解决。最后找到swiper插件 api 有属性是可以根据内容变动,自动初始化插件的,添加observer:true后问题解决!var mySwiper = new Swiper ('.swiper-container', { pagina转载 2017-11-27 15:23:40 · 1436 阅读 · 0 评论 -
HTMl5的sessionStorage和localStorage--灵活使用
转自:https://www.cnblogs.com/yuzhongwusan/archive/2011/12/19/2293347.htmlhtml5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束转载 2018-01-02 20:05:50 · 435 阅读 · 0 评论 -
app回流---之深度连接linkedme
项目参考:http://m.vancl.com/深度链接(Deep Linking),可以从手机中任何地方将用户导入APP内的指定页面。LinkedME——国内首家企业级深度链接服务提供商,致力于帮助APP解决用户增长(拉新、拉活、留存、转化等)和流量变现等问题。LinkedME,企业级深度链接(Deep Linking)服务平台https://www.linkedme.cc/原创 2018-01-17 13:52:20 · 1063 阅读 · 0 评论 -
前端性能优化
转自:http://web.jobbole.com/93665/通过性能测速和分析,我们基本可以获取收集到页面上大部分的具体性能数据,如何根据这些数据采取适当的方法和手段对当前的页面进行优化呢?目前来看,前端优化的策略很多,如YSlow(YSlow是Yahoo发布的一款Firefox插件,可以对网站的页面性能进行分析,提出对该页面性能优化的建议)原则等,总结起来主要包括网络加载类、页面渲染类、CS转载 2018-01-17 20:44:56 · 271 阅读 · 0 评论 -
Meta http-equiv属性详解(转)
http-equiv顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。 引用meat标签的http-equiv属性语法格式是:<meta http-equiv="参数" content="参数变量值"> ;其中http-equiv属性主要有以下几种参数:1、Exp转载 2018-01-17 21:28:41 · 316 阅读 · 0 评论 -
vue购物车实例
测试代码1<template> <div id="my"> 全选<input type="checkbox" v-model="checkAll" @change="change"> &原创 2018-06-07 02:08:23 · 1227 阅读 · 0 评论 -
reduce
图列原创 2018-06-07 02:10:09 · 316 阅读 · 0 评论 -
vue:is属性,keep-alive,slot,watch,插件,动态class,防止页面出现{{}},改变数据取最新值,计算属性,懒加载,全局过滤器,生命周期,自定义指令..等知识点
fliter filter和map forEach includes&find is切换缓存&组件缓存 is属性 keep-alive mount-nexttick. ref1 ref2 slot slot实例...原创 2018-06-02 02:35:31 · 771 阅读 · 0 评论 -
本地离线存储localforage
关于 HTMl5的sessionStorage和localStorage–灵活使用传送门localforage 用法类似转载自API1)setItem(key, value, successCallback):创建一个键,参数是键名、键值、回调函数,回调函数的参数是对应的键值。// Unlike localStorage, you can store non-strings.lo...转载 2018-06-16 16:32:20 · 2663 阅读 · 0 评论 -
项目技术点,参考
1 自执行函数 :http://www.cnblogs.com/TomXu/archive/2011/12/31/2289423.htmlhttps://www.cnblogs.com/jiangshichao/p/7152855.html2 当js里有多个export怎么引入?https://segmentfault.com/q/10100000093725913 VUE -- 全局...原创 2018-09-09 23:54:14 · 428 阅读 · 0 评论 -
自定义文字云/词云图----基于echarts
demo连接 :自定义文字云/词云图效果如下:人形态小鸟形态参考 https://github.com/ecomfe/echarts-wordcloud,https://blog.csdn.net/shelbyandfxj/article/details/83243284...原创 2019-02-27 12:18:07 · 4460 阅读 · 6 评论 -
vue配置多页应用项目模板
最近研究了一下 vue 多页面应用,参考着,也搞了个模板: 模板传送门至于 多页面 、 单页:原创 2019-03-25 20:19:28 · 568 阅读 · 0 评论 -
H5-input 弹起键盘遮盖输入框(Android),键盘顶不起来输入框, ios正常
遇到H5页面-input 弹起键盘遮盖输入框(Android),键盘顶不起来输入框, ios正常 的问题用js的resize()方法对浏览器窗口调整大小进行计数:览器窗口的大小时,发生 resize 事件。就可以解决window.addEventListener('resize', () => { if (document.activeElement.tagN...转载 2019-05-16 13:53:11 · 3098 阅读 · 1 评论 -
散碎笔记-------
循环Object.keys -> 遍历自身可枚举的属性Object.getOwnPropertyNames -> 获取自身可枚举的属性obj.hasOwnProperty -> 是否自身属性for(let key in obj) -> 遍历自身及原型链上可枚举的属性ps: for(key value of obj) -> es6创造的对各种数据结构统...原创 2019-08-01 13:25:36 · 342 阅读 · 1 评论 -
h5移动端输入框随键盘上升
var xxxxxxxx = document.getElementById('#xxx');setInterval(function(){ xxxxxxxx.scrollIntoView(false);},200)Element.scrollIntoView()说是还在试验中的属性,mdn: https://developer.mozilla.org/zh-CN/docs/We原创 2017-11-20 10:39:59 · 6472 阅读 · 1 评论 -
座位表,点名
点名td {width: 9.09%;height: 50px;text-align: center;}.tdBg {background-color: pink;}var timer = null;// 这是一个函数,表示一个功能function start(){timer = setInterval(f转载 2016-11-02 19:04:52 · 958 阅读 · 0 评论 -
设置div中文字超出时自动换行和css实现文本超出N行之后显示省略号等
一、对于div强制换行1.(IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准。#wrap{white-space:normal; width:200px; }或者#wrap{word-break:break-all;width:200px;}2.(Firefox浏览器)white-space:normal; word-br转载 2017-06-06 17:50:35 · 18145 阅读 · 0 评论 -
css3之canvas 基础
DOCTYPE html>html>head>metacharset="utf-8">title>title>styletype="text/css">#myCanvas{box-shadow:10px 10px10px black;}style>head>body>canvasid="myCanvas" wi原创 2016-12-14 19:05:46 · 667 阅读 · 0 评论 -
css选择器中:first-child与:first-of-type的区别
:first-child选择器是css2中定义的选择器,从字面意思上来看也很好理解,就是第一个子元素。比如有段代码:p:first-child 匹配到的是p元素,因为p元素是div的第一个子元素;h1:first-child 匹配不到任何元素,因为在这里h1是div的第二个子元素,而不是第一个;span:first-child 匹配不到任何元素,因为在这里两个转载 2016-12-13 13:12:06 · 596 阅读 · 0 评论 -
CSS布局奇葩技巧之--各种居中
居中是我们使用css来布局时常遇到的情况。使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍。注:本文所讲方法除了特别说明外,都是兼容IE6+、谷歌、火狐等主流浏览器的。先来说几种简单的、人畜无害的居中方法1. 把margin设为auto具体来说就是把要居中的元素的margin-left和m转载 2016-12-13 13:21:16 · 438 阅读 · 0 评论 -
键盘键码一览表
按键键码按键键码A656(数字键盘)102B667(数字键盘)103C678(数字键盘)104D689(数字键盘)105转载 2016-12-17 18:18:18 · 6529 阅读 · 0 评论 -
document.body、document.documentElement和window获取视窗大小的区别
2015-3-27 $(window).height(); 才是窗口的宽高,而且一直不变 document.body.clientHeight,在文档内容有滚动条的时候远大于$(window).height(); 实际例子,向下滑动判断 $(document).height() - $(window).scrollTop() - $(window).height()转载 2016-12-15 18:44:58 · 931 阅读 · 0 评论 -
canvas 之图片模糊&马赛克
canvas{ border: 1px solid red; } btn 模糊 马赛克 var canvas1 = document.getElementById("vanvas1"); var canvas2 = document.getElementById("vanvas2"); var context1 = ca转载 2016-12-19 20:58:02 · 1618 阅读 · 0 评论 -
解决微信界面返回问题
把代码写在1页面的点击进入下一级的事件中,点击手机自带的返回就会有效果,(事列:所有页面在一个网页中显示,控制显隐)if (window.history && window.history.pushState){$(window).on('popstate', function() {var hashLocation = location.hash;var hashSplit = hashL原创 2017-05-11 12:12:37 · 3993 阅读 · 0 评论 -
IE9 以下版本浏览器兼容HTML5的方法
最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。--------------------也不知道这句话是什么时候说的??????????IE9 以下版本浏览器兼容HTML5的方法,使用百度静态资源的html5shiv包: 载入后,初始化新标签的CS转载 2017-05-12 13:41:17 · 1159 阅读 · 0 评论 -
获取自己的定位(GPS)然后转换成百度地图坐标
body, html, #allmap { width: 100%; height: 100%; overflow: hidden; margin: 0; font-family: "微软雅黑"; } --> 浏览器定位 // 百度地图API功能// 获取自己的位置gps原创 2017-05-04 13:51:07 · 6635 阅读 · 0 评论 -
rem,移动端适配心得2【转载】
随着移动端的发展,手机端的页面应用越来越广泛,所以我们现在更多的是做移动端的页面。但是我们同样要维持pc端,因此难免会遇到许多麻烦。而且现在做移动端适配的方法也有好多种,针对不同的网站我们需要合理的判断,选择全适的方法;第一种方法:整个页面宽高用px写死,让宽度自适应这是最蠢的一个办法,但是实际上我们用得也挺多,它适用于一些页面结构比较复杂的转载 2017-05-08 15:29:48 · 421 阅读 · 0 评论 -
webstorm 2017 激活pojie,
2017.2.27更新 选择“license server” 输入:http://idea.imsxm.com/2016.2.2 版本的破解方式: 安装以后,打开软件会弹出一个对话框;选择“license server” 输入:http://114.215.133.70:410172016.2.3 版本的破解方式: 目前最新的就是2.3版本,在打开的License Activation转载 2017-05-09 13:59:23 · 554 阅读 · 0 评论 -
ie兼容问题,强制使用ie浏览器使用最高版本内核
在IE8浏览器以后版本,都有一个“兼容性视图”,让不少新技术无法使用。那么如何禁止浏览器自动选择“兼容性视图”,强制IE以最高级别的可用模式显示内容呢?下面就介绍一段HTML代码。X-UA-Compatible是一个设置IE浏览器兼容模式的属性,在IE8浏览器之后诞生。IE8或者IE9有很多种模式,比如,IE8有4种模式:IE5.5怪异模式、IE7标准模式、IE8几乎标准模式、IE8标准模转载 2017-05-09 15:13:45 · 20402 阅读 · 5 评论 -
ajax提交整个form表单
在项目开发中,有时提交form表单时不能单单用action或者jQuery的表单提交方法有三种,主要说下第三种第一种:用form自带属性action提交第二种:用jquery提交:$("#formid").submit();第三种:用ajax提交:但如果form表单中数据很多时,不可能一一列出,只需要用$('#yourformid').serialize()就可以了举例如下:$.a转载 2017-05-19 11:05:26 · 615 阅读 · 0 评论 -
html img图片不变形等比例缩放,兼容ie6
方法1 img 只定义宽(或高)度可以等比例缩放,外面加个框,设置宽高和 overflow:hidden; 即可方法2 在img标签里面只设置宽,不设置高,图片就会等比例缩放。方法3或者把图片作背景图片。background-position: center center tips:使用max-width:30转载 2017-05-19 12:05:19 · 36104 阅读 · 0 评论 -
网页布局之》》》》弹性盒子》》》
网页弹性盒子》》》》box-flex 属性 按比例占据父元素的尺寸。定义两个可伸缩的 p 元素。如果父元素的总宽度是 300 像素,则 #p1 的宽度是 100 像素,而 #p2 的宽度是 200 像素:#p1{-moz-box-flex:1.0; /* Firefox */-webkit-box-flex:1.0; /* Safari 和 Chrome */box-fl原创 2016-12-13 19:44:31 · 590 阅读 · 0 评论