我的随记
文章平均质量分 52
雪莲的博客
这个作者很懒,什么都没留下…
展开
-
js获取验证码倒计时效果
div class="div user-input"> input type="number" class="code" placeholder="请输入手机验证码" required maxlength="6"> input type="button" class="obtain generate_code" value=" 获取验证码" onclick="settime(t原创 2017-02-08 11:46:40 · 951 阅读 · 0 评论 -
解决微信页面中ios音乐不能自动播放问题
document.getElementById('audio').play(); document.addEventListener("WeixinJSBridgeReady", function() { // 音乐自动播放 document.getElementById('audio').play(); }, false);原创 2017-05-22 14:57:05 · 3786 阅读 · 0 评论 -
移动端布局终极解决方案hotcss
插件描述:hotcss不是一个库,也不是一个框架。它是一个移动端布局开发解决方案。使用hotcss可以让移动端布局开发更容易。hotcss让移动端布局开发更加容易介绍hotcss不是一个库,也不是一个框架。它是一个移动端布局开发解决方案。使用hotcss可以让移动端布局开发更容易。使用动态的HTML根字体大小和动态的viewport scale。遵循转载 2017-06-21 15:51:42 · 2503 阅读 · 0 评论 -
JS生成二维码(兼容各种浏览器及中文)
本文将介绍如何使用js生成二维码,兼容各种浏览器及手机端,支持中文。html>head>meta charset="utf-8"/>title> JS 生成二维码 title>script src="qrcode.js">script>script type="text/javascript">window.onload = function(){ //转载 2017-07-11 16:49:31 · 932 阅读 · 1 评论 -
20个正则表达式,让js校验不在难
正则表达式,一个十分古老而又强大的文本处理工具,仅仅用一段非常简短的表达式语句,便能够快速实现一个非常复杂的业务逻辑。熟练地掌握正则表达式的话,能够使你的开发效率得到极大的提升。正则表达式经常被用于字段或任意字符串的校验,如下面这段校验基本日期格式的JavaScript代码:var reg = /^(\\d{1,4})(-|\\/)(\\d{1,2})\\2(\\d{1,2})$/; v转载 2017-07-17 16:12:47 · 687 阅读 · 0 评论 -
表单验证
先来看看html部分姓名:联系方式:参加人数:房间要求:大床房标间套房是否需要酒店提供早餐:是否参加板块选择(可多选):ABC酒店选择:请选择酒店万达皇冠假日酒店万达文华度假酒店敖麓谷雅酒店哈尔滨凯宾斯基酒店香格里拉大酒店(松北)凯莱花园大酒店马迭原创 2017-07-19 13:37:37 · 423 阅读 · 0 评论 -
拉钩、网易、淘宝移动端rem布局分析(转载非原创)
从网易与淘宝的font-size思考前端设计稿与工作流本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问题,内容较多,但对你的技术和工作一定有价值,欢迎阅读和点评:)。这是淘宝的github网址,里面有适配所需的js还有说明文档 地址:https://github.com/amfe/lib转载 2017-08-16 17:47:25 · 932 阅读 · 0 评论 -
调用微信sdk接口的录音功能
一定要引入jweixin-1.0.0.js先来一段html代码:录音看看js是如何操作的// 手指按下录音 $('.btn').on('touchstart', function(event){ event.preventDefault();//阻止浏览器默认行为 START = new Date().getTime(); $('.t原创 2017-09-13 15:18:39 · 3414 阅读 · 4 评论 -
微信分享链接时,怎样才能带上带缩略图和简介?
// alert(location.href.split('#')[0]) $(function(){var timestamps;var nonceStrs;var signatures;var url = encodeURIComponent(location.href.split('#')[0]);$.ajax({ async: false, url:原创 2017-04-17 16:42:50 · 12035 阅读 · 0 评论 -
HTML5页面被运营商进行DNS劫持问题及解决方案,app中h5页面源码的获取
App应用的html5页面经过运营商的移动网络(非wifi网络),被强制插入广告和手机管家的多余信息,在有些场景严重干扰用户的操作,也产生在美丽的页面上加入了不协调的悬浮层。并且这个手机管家类的悬浮层有时间出现,有时间不出现,神出鬼没,虽然你可以通过点击关闭手机手机关键是突然出现,有时候还关闭不了。总之用户不喜欢这种用户不需要的选择,所以干掉它吧! 在app中h5页面源码,可以通过下面代码获得转载 2017-09-18 14:40:46 · 3320 阅读 · 0 评论 -
js设置手机号中间几位为隐藏星代替 (正则)
var reg = new RegExp("(\\d{3})(\\d{4})(\\d{4})");var tel = mobile.replace(reg, "$1****$3");$('.phone').text(tel);原创 2017-10-12 16:06:10 · 4823 阅读 · 0 评论 -
用better-scroll来解决ios中html5页面fixed布局不兼容问题的处理
在做webapp的时候,会遇到顶部导航,底部按钮之类的需求,前端第一想到的就是fixed定位,在Android中是没有问题的,然而在ios中却不那么尽如人意。给大家介绍一个方法,仍然使用fixed,只不过在需要滚动部分的外层再加一层div,也是fixed布局。这里需要用到better-scroll插件。首先,来看一下页面:原创 2017-12-07 18:23:46 · 3567 阅读 · 3 评论 -
解决js点击click事件在iOS设备上事件延时闪烁的问题
闪烁问题由于在iOS Safari上click事件存在300ms响应延时,所以为touch事件添加样式,会和click事件默认样式叠加而产生闪烁问题。因为ios safari浏览器中对触摸事件的响应顺序是:ontouchstart -> ontouchmove -> ontouchend -> (300ms) onclick快速解决问题的方法:消除click默认样式转载 2017-12-14 10:52:39 · 1932 阅读 · 0 评论 -
解决html页面中含有input输入框fixed布局底部按钮在Android和ios中被弹起的问题
html页面在安卓或ios中fixed 页面底部的按钮常常会被弹起,如图,当input获取焦点唤起软键盘的时候,下一步按钮被悬在半空中,那么如何解决呢?起初,顶部餐饮商家头部是fixed在顶部,下一步按钮fixed在页面底部,滑动中间内容部分的时候,头部和底部是固定不动的。但是当input获取焦点唤起软键盘的时候,下一步按钮会悬在半空中,所以我采用position:absolute原创 2017-12-14 13:44:12 · 3093 阅读 · 0 评论 -
input框在ios中的阴影问题
在IOS下,input 和textarea表单默认会有个内阴影,一定程度上影响视觉一致,可通过设置下面代码去掉:input{-webkit-appearance: none;}原创 2017-12-07 17:40:12 · 9579 阅读 · 0 评论 -
滚动条 美观
/* 滚动条 美观 */::-webkit-scrollbar-track {border-radius:0;background:#e1e1e1;position:absolute}::-webkit-scrollbar {width:6px;height:6px;position:absolute}::-webkit-scrollbar-thumb原创 2017-04-21 12:35:40 · 452 阅读 · 0 评论 -
HTML+CSS+jQuery实现弹幕技术
.barrage .screen{width:100%;height:100%;position:absolute;top:0px;right:0px;}.barrage .screen .s_close{z-index:2;top:20px;right:20px;position:absolute;text-decoration:none;width:40px;height:40px;bor转载 2017-04-20 17:04:53 · 5136 阅读 · 0 评论 -
js图片懒加载(可视区域加载)
图片懒加载(可视区域加载)* {padding: 0px;margin: 0px;}html,body {width: 100%;min-height: 100%;}#SB {margin: 0;padding: 0;list-style: none;}#SB .in {border: 1px solid red;转载 2017-04-06 16:08:41 · 2170 阅读 · 0 评论 -
手机适配rem
;!function(window){var win=window,doc=win.document,docEle=doc.documentElement,objhtml=doc.getElementsByTagName('html')[0],width=docEle.clientWidth,size='fontSize',html=function(obj,key,v原创 2017-02-08 11:50:14 · 494 阅读 · 0 评论 -
qq交谈(可以调用手机qq)
咨询客服原创 2017-02-08 11:52:25 · 748 阅读 · 0 评论 -
获取时间
1.获取当前时间:function getNow(id){var d = new Date();var year = d.getFullYear();var month = d.getMonth() + 1;var date = d.getDate();var hour = d.getHours();var minute = d.getMinutes();var原创 2017-02-20 10:37:49 · 317 阅读 · 0 评论 -
移动端web开发,click touch tap区别
一:click与tap比较click与tap都会触发点击事件,但是在手机web端,click会有200-300ms的延迟,所以一般用tap代替click作为点击事件。singleTap 和doubleTap分别代表单次点击和双次点击二:tap的穿透处理使用zepto框架的tap的点击事件,来规避click事件的延迟响应,会出现穿透,即点击会触发非当前层的点击事件。三原创 2017-02-20 15:21:29 · 956 阅读 · 0 评论 -
关于event.cancelBubble和event.stopPropagation()的困惑
首先我在网上看到不少文章大体上分为两个(不正确)观点:1. cancelBubble用于ie的阻止冒泡事件,event.stopPropagation()用于firefox和chrome等其他浏览器。先不讲上面是对是错先看一个例子:(测试环境:chrom5.0.275.7, moz3.6.4, opera10.53, ie6,7,8)DOCTYPE htm转载 2017-01-20 09:51:17 · 1833 阅读 · 1 评论 -
o2o地图功能
1.引用百度地图2.链接】登录百度帐号http://lbsyun.baidu.com/apiconsole/key?application=key点进去登陆后就可以创建了拿到key以后就是初始化地图了如果你不需要那个地图可以不初始化但是这句:var map = new BMap.Map("allmap"); // 创建Map实例实例化是必备的因为map对象后面搜原创 2017-01-22 09:43:55 · 720 阅读 · 0 评论 -
关于状态栏的图标
据我个人所知有俩种方式:1.<linkrel="shortcut icon"href="${base}/res/css/favicon.ico"/>2.直接把图片命名为favicon.ico放在根目录下。原创 2017-01-22 09:57:48 · 571 阅读 · 0 评论 -
CSS实现单行、多行文本溢出显示省略号(…)
1、单行文本的溢出overflow: hidden;text-overflow:ellipsis;white-space: nowrap;2、多行文本的溢出display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;适用范围:因使用了WebKit的CSS扩展属性,该方法适...转载 2017-02-15 11:09:26 · 4851 阅读 · 0 评论 -
用JavaScript判断横屏竖屏问题
/判断手机横竖屏状态: function hengshuping(){ if(window.orientation==180||window.orientation==0){ alert("竖屏状态!") } if(window.orientation==90||window.orientation==-90){原创 2017-03-09 13:51:38 · 1322 阅读 · 0 评论 -
ios微信h5音频audio无法自动播放问
在微信端开发H5的时候,audio标签在苹果机上无法进行自动播放Media = document.getElementById("music");alert(Media.networkState);// 状态码显示为3,表示Audio没有找到资源路径于是尝试使用js去注入一个路径Media.src = "./assets/sound/music.mp3"; Med原创 2017-03-22 17:10:22 · 4697 阅读 · 0 评论 -
h5移动端知识要点
第1章 使用rem作为单位html{font-size:10px}1.1、使用媒体查询,不同分辨率设置不同的html的font-size@(min-width:320px){ html{font-size:10px;}}@(min-width:360px){ html{font-size:11.25px;}}@(min-width:400px){ html{font-size:转载 2017-03-17 11:43:40 · 895 阅读 · 0 评论 -
jQuery中使用Ajax获取JSON格式数据示例代码
有时候我们需要读取JSON格式的数据文件,在jQuery中可以使用Ajax或者 $.getJSON()方法实现,下面有个不错的示例,需要的朋友可以参考下JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。JSONM文件中包含了关于“名称”和“值”的信息。有时候我们需要读取JSON格式的数据文件,在jQuery中可以使用Ajax或者 $.getJS转载 2017-04-05 15:08:33 · 3049 阅读 · 2 评论 -
单选/多选框 美观UI
/* 单选/多选框 美观 */input[type=checkbox], input[type=radio] {-webkit-appearance: none;appearance: none;width: 13px;height: 13px;margin: 0;cursor: pointer;vertical-align: bottom;background转载 2017-04-14 13:35:31 · 1968 阅读 · 0 评论 -
前端-图片压缩canvas干货
需要用户上传图片的时候,怎样只通过前端来压缩图片的大小呢?往下看⬇️//canvas压缩图片 参数base64,callback回调函数(由于加载图片是异步的,所以必须要用回调函数来获取base64的图片)export function imgZip(file, callback) { let img = document.createElement('img'); //创建图片元...原创 2019-07-25 17:00:11 · 358 阅读 · 1 评论