html5技术积累
文章平均质量分 69
qq_15602525
这个作者很懒,什么都没留下…
展开
-
为什么 window.location.search 为空?
1,什么是window.location?示例URL:http://b.a.com:88/index.php?name=kang&when=2011#first属性含义值protocol:协议"http:"hostname:服务器的名字"b.a.com"port:转载 2017-11-29 09:48:26 · 1670 阅读 · 1 评论 -
Android 和 iOS js注入
//iOSjs注入 NSString *js =@"var script = document.createElement('script');script.type = 'text/javascript';document.getElementById('nickname').value ='ios';var child=document.getElementsByTagNa转载 2018-01-05 16:23:46 · 415 阅读 · 0 评论 -
h5 实现调用系统拍照或者选择照片并预览
调用手机相机拍照或者是调用手机相册选择照片,这个功能在 手机端页面 或者 webApp 应该是常用到的,就拿个人或会员资料录入那块来说就已经是经常会碰到的,每当看到这块功能的时候,前端的小伙伴就得去找各种各样的插件。除非你收藏了什么好东西,或者是你收藏了什么比较旧的、需求跟不上的好东西,需求不一样体验不好 那你提交了,产品经理会买你账吗?好了,咱入正题!这里主要是针对手机端转载 2018-03-07 14:22:47 · 5482 阅读 · 0 评论 -
javascript 手机移动端 微信 拍照 录音 录视频并阿里oss上传
调用照相机,拍照 <input type="file" accept="image/*" capture="camera">1调用摄像机,视频 <input type="file" accept="video/*" capture="camcorder">1调用录音机,录音 <input type="file&转载 2018-03-07 11:11:33 · 3558 阅读 · 4 评论 -
h5前端图片压缩直传到OSS,压缩用localResizeIMG插件
前段时间参与了一个H5项目,里边有个需求是用户上传图片。当时的方案是前端先调用微信的JSSDK选择图片并上传,然后再从后端下载到服务器上。然而用的时候发现客户端给的图片有大有小,但是由于用了微信的接口,图片在下载之前是没法控制的。后来在想能不能调用HTML5原生的文件上传接口,另外还可以配合阿里云的OSS对图片做进一步处理,所以就有了这篇文章。1. HTML5原生上传其实之前也有想转载 2018-03-13 15:05:26 · 2131 阅读 · 1 评论 -
微信浏览器禁止页面下拉查看网址(不影响页面内部scroll)
此类事件是手机touchmove默认事件行为,可以通过js代码隐藏事件:$(‘body’).on(‘touchmove’, function (event) {event.preventDefault();});ordocument.addEventListener('touchmove', function(e){e.preventDefault()}, false);但这样往往会转载 2018-03-30 15:30:18 · 4453 阅读 · 0 评论 -
js 写入图片Exif信息piexifjs
SamplesInsert Exif into jpegfunction handleFileSelect(evt) { var file = evt.target.files[0]; var zeroth = {}; var exif = {}; var gps = {}; zeroth[piexif.ImageIFD.Ma原创 2018-04-25 16:28:37 · 3224 阅读 · 0 评论 -
js点击按钮,自动复制到粘贴板
免费领取活动规则1活动规则免费抽取Q币,领取现金红包,每天可领。2活动有效期活动有效期为一年3领奖规则点击“领取红包”按钮,方可领取红包奖励。4活动声明本活动最终解释权归棒棒糖所有onclick="goOther()"data-cl原创 2018-05-03 18:13:29 · 3500 阅读 · 0 评论 -
js黑客中毒的效果
html> charset="utf-8"> name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">转载 2018-04-27 16:48:10 · 2869 阅读 · 0 评论 -
PhotoSwipe 官方API解读(一)
一:getting started开始之前要知道:1、 PhotoSwipe需要提前预定义图片的大小(more: http://photoswipe.com/documentation/faq.html#image-size)2、 如果您把PhotoSwipe用在非响应式的站点上,但是这个控件也会在移动端进行缩放(因为这整个页面就是缩放的)。所以你需要实现自定义控件(例如单大关闭按钮在右上角...转载 2018-07-31 18:23:17 · 2855 阅读 · 0 评论 -
一个 Ajax Loading —— spin.js
菊花的制作地址:http://spin.js.org$ajax提交,菊花加载的方式和位置: $.ajax({ type: "get", url: "http://www.xxx.com/test.html", beforeSend: function(XMLHttpRequest){ //ShowLo转载 2017-10-26 13:17:26 · 339 阅读 · 0 评论 -
所有表单验证
js验证表单大全正则表达式:"^\\d+$" //非负整数(正整数 + 0) "^[0-9]*[1-9][0-9]*$" //正整数 "^((-\\d+)|(0+))$" //非正整数(负整数 + 0) "^-[0-9]*[1-9][0-9]*$" //负整数 "^-?\\d+$" //整数 "^\\d+(原创 2016-11-13 17:49:38 · 1039 阅读 · 0 评论 -
js 上下文字滚动效果
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">xmlns="http://www.w3.org/1999/xhtml"> http-equiv="Content-Type" content="text/html;原创 2016-10-25 10:36:46 · 313 阅读 · 0 评论 -
移动开发html5最快banner制作(快速生成)有2种方法
html>lang="en"> http-equiv="Content-Type" content="text/html; charset=utf-8"> name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scal原创 2016-07-20 13:45:14 · 3853 阅读 · 0 评论 -
webapp font-size解决问题的方案
最近在微博上看到流云诸葛总结的一篇文章《从网易与淘宝的font-size思考前端设计稿与工作流》,其中介绍到的几种Web App适配方案,我们现在的做法恰好是跟某招聘网站类似的方案,当然就会有上面我提到的一些问题,最后经过预研和demo测试,我们采取了网易跟淘宝的方案,其实这两者的方案是大同小异,都是基于rem的适配方案。 2、解决问题的方案 网易跟淘宝的方原创 2016-07-27 16:43:28 · 313 阅读 · 0 评论 -
html5 css 万能的position大法
水平居中的text-align:center 和 margin:0 auto 这两种方法都是用来水平居中的,前者是针对父元素进行设置而后者则是对子元素。他们起作用的首要条件是子元素必须没有被float影响,否则一切都是无用功。margin:0 auto也可以被写成margin:0 auto 0 auto。不能理解的童鞋们可以自己去找找关于css缩写的内容。原创 2016-07-21 11:23:25 · 3248 阅读 · 0 评论 -
html5+css3实现手机toast提示
html5+css3实现手机toast提示-webkfa.com *{ margin:0;padding:0; -webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */ -webkit-text-size-adjust: none; /* prevent原创 2016-07-28 16:54:07 · 6316 阅读 · 2 评论 -
iScroll.js 用法参考
iScroll 4 这个版本完全重写了iScroll这个框架的原始代码。这个项目的产生完全是因为移动版webkit浏览器(诸如iPhone,iPad,Android 这些系统上广泛使用)提供了一种本地化的方式来对一个限定了高度和宽度的元素的内容进行滑动。很不幸的是,这种情况下所有的web应用的页面就不能够包含具有position:absolute的头、页尾或者是一个内容可滚动的中间区域。原创 2016-07-18 10:19:18 · 2345 阅读 · 0 评论 -
html5调用手机相机并压缩、上传
近日刚做的一个功能,要在app里使用内嵌页面进行图像的上传。从功能上看,原生的实现应该是最好的。毕竟页面上所有的东西都隔着一个浏览器,所有的实现都要依赖浏览器提供的接口,不同的浏览器对接口的实现又有差异……到最后又会陷入兼容性的大坑!吐槽归吐槽,但是折腾的劲头不能丢!使用input file[camera]属性调用相机简直So easy!input转载 2016-09-21 10:25:11 · 2831 阅读 · 0 评论 -
JavaScript 文件拖拽上传插件 dropzone.js 介绍
dropzone.js 是一个开源的 JavaScript 库,提供 AJAX 异步上传功能。安装下载dropzone.js文件并添加到页面中即可。Dropzone 不依赖 jQuery 框架。启用可以新建一个div元素,然后通过如下 JavaScript 代码启用 dropzone(如果你使用 jQuery): id="dropz"> $("原创 2016-09-28 15:06:43 · 535 阅读 · 0 评论 -
Vue 动态设置网站title 解决ios在微信浏览器中不生效问题
document.title = "文章标题" 安卓可以正常显示,但是ios在微信浏览器中不生效 setTimeout(function(){ //利用iframe的onload事件刷新页面 document.title = '标题'; var iframe = document.createElement('iframe...转载 2018-08-27 16:02:06 · 1323 阅读 · 0 评论