![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript - Jquery
文章平均质量分 86
雷斯巴能
这个作者很懒,什么都没留下…
展开
-
JavaScript 获取客户端IP 以及 外网IP
JavaScript 获取内网IP 客户端 ip 也叫做内网 ip、本地 ip。使用 js 获取内网 IP 目前比较有效的方法通过 WebRTC 接口来获取。 通常浏览器没有禁用 WebRTC,在 firefox 以及 chrome 浏览器下都能正常执行。不过该接口并不支持IE,除非在您的系统需要兼容IE,那么您可能就需要通过 ActiveX 来获取 IP了。 外网 ip 也叫做公网...原创 2020-04-17 21:11:08 · 1326 阅读 · 0 评论 -
rem布局,移动H5页面布局规范(1)。
功能决定成度,样式决定美感度,在移动H5页面布局上规范必然时不可少。 在H5页面 UI设计图的基础,如何根据设计图片写出比例相同, 在不同移动设备上页面上的样式依然保持一致。响应式页面,rem布局的使用方法。 1、设置viewport<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,原创 2017-09-13 10:59:09 · 1902 阅读 · 0 评论 -
原生JS如何监听移动设备屏幕横竖屏的旋转
到目前JS的强大和所能完成的工作已经不言而喻,然而杯具的发生总是在使用过JS的基础上。代码中监测旋转是用了onorientationchange 函数,但是在一些APP或游戏内嵌页面会有该函数不会执行、orientation获取不到的情况。所以如果是内嵌页建议使用resize事件,检查宽高变化来检测屏幕是否旋转。代码使用实例:<script type="text/javascript">原创 2017-09-13 10:04:56 · 11326 阅读 · 0 评论 -
JavaScript对数组操作。添加/删除/截取/排序/倒序
js对数组对象的操作以及方法的使用如何声明创建一个数组对象: var arr = new Array(); 或者 var arr = [];如何移除所有数组中数据?arrayJson.dataList.splice(0,arr.length);如何指定位置对数组对象的添加,如何将指定元素添加到数组中间位置?/** * 假设数组的长度值为偶数,如何将指定元素添加到...原创 2017-05-02 22:14:29 · 19573 阅读 · 2 评论 -
原生JS、CSS3 上拉刷新效果的实现。
突然间的兴致,把遗留的上拉刷新的组件给写写,完工确实也花费了不少时间。个人认为在移动端 大可不必做一个上拉的效果来进行数据分页,类型淘宝、等app都是判断滚动条到底部进行数据加载的动作,效果堪称极品中的上品,确实不错。前端生也为此寻找一些乐趣。Dome不是一流,但是一般。有任何兼容性问题,欢迎提出和分享。 在这里与大家分享 以及 技术学习的目的。 解决发现问题: 兼容IOS滚动条 上拉是滚动不流程原创 2017-12-21 16:09:25 · 2398 阅读 · 0 评论 -
原生js 仿微信网页加载进度条的提示
一些H5页面在网络加载时,事件会一直监听并触发 readystatechange 事件。某些需要提示网页 加载进度,进行进度条提醒的友好提示,类似微信访问微信公众号会出现进度条。用原声JS实现的方法,只需要引入js脚本文件到页面头部。引入progress.js。 添加到网页头部。document.addEventListener('readystatechange',function() {原创 2017-12-25 12:01:29 · 1341 阅读 · 0 评论 -
js 判断浏览器
function isBrowser() { var userAgent = navigator.userAgent; //微信内置浏览器 if(userAgent.match(/MicroMessenger/i) == 'MicroMessenger') { return "MicroMessenger"; } //QQ内置浏览器 e原创 2017-12-25 14:15:21 · 4135 阅读 · 0 评论 -
移动端原声js + css3实现下拉刷新
1、引入 jquery.js 和 nativePull.js 文件<script src="js/jquery-1.8.3.min.js"></script><script src="js/nativePull.js"></script>2、加载下拉刷新Dom引擎HTML代码块 <!-- beginDown --><div class="pull_down" style=&quo转载 2017-01-06 12:42:10 · 1912 阅读 · 0 评论 -
针对 iOS端禁止列表顶部下拉和底部上拉露出浏览器灰色背景 的解决方案。
在iOS的微信,QQ,Safari等浏览器, 列表顶部下拉和底部上拉露出浏览器灰色背景。 针对此问题,在一些移动端页面下拉、上拉过程导致浏览器底部露出背景。 在一定程度上会影响用户的正常操作 以及 用户体验。 省下好多喝茶的片刻,以及找过网上类似的解决方法。 终于想到一套能够很好解决此类问题的办法! 需要解决此刻需求的朋友参考文章,提供给大家思路以及参考学习。 具体实现步骤以及原创 2018-01-23 15:03:40 · 17368 阅读 · 4 评论 -
原生JS实现H5页面侧滑删除的效果
目前很多H5框架都有类似QQ、微信消息侧滑删除的功能。如果工程并没有提供侧滑功能的时候该如何是好?。。。。得来全不费功夫,特此花费些时间编写的侧滑插件,希望能够帮助前端学习者的一些参考~~。本文根据实现此类效果展开说明以及演示。基于移动端触摸事件touchstart、ontouchmove以及touchend事件。注意此三种事件的触发只能在手机上有效,电脑调试需切换手机调试模式。使用CSS原创 2017-10-20 17:05:13 · 6469 阅读 · 0 评论 -
精致的H5 列表侧滑组件。H5页面侧滑删除、修改的功能效果实现!
精致的H5 列表侧滑组件。H5页面侧滑删除、修改的效果。这里只支持手机端访问,Chrome浏览器调试 切换到Mobile 调试模式学习无止境,何时是终点、时间让人沉思。代码分享,是对以下文章的更新版本!http://blog.csdn.net/china_guanq/article/details/78297430此此修改,大部分整理修改了组件存在的Bug 以及优化处理。为了不给自己埋井原创 2018-01-25 17:05:09 · 5784 阅读 · 1 评论 -
(常用代码)原声JS 实现倒计时的效果。分/秒/毫秒/
(常用代码)原声JS 实现倒计时的效果。分/秒/毫秒/第一步:构建HTML 结构和样式div class="timing"> span class="minute date">07span> span class="colon">:span> span class="second原创 2018-01-30 14:39:49 · 631 阅读 · 0 评论 -
Echarts图表库。饼图 pie 图表组件的使用。饼图组件API使用规则--DOME
举例给予Echarts 图表 饼图的使用规则。更多内容参考:http://echarts.baidu.com/examples/#chart-type-pie后端领前线,前端无极限。这里只举例了基于 Echarts 图表 “饼图” 的使用规则。更多内容参考官网网址,或者加入菜鸟Q群探讨问题以及学习:595377655。&amp;lt;!doctype html&amp;gt;&amp;lt;html&amp;g...原创 2018-03-26 10:32:11 · 3003 阅读 · 0 评论 -
== 和 === 的区别? & 和 && 的区别? js运算符小知识记录。
比较运算符:= :等于,与比较值会发生类型的转换。var n1 = '1';var n2 = 1;console.log(n1 == n2); //打印true== :全等于,值和类型比较过程不会发生类型的转换。var n1 = '1';var n2 = 1;console.log(n1 === n2); //打印false逻辑运算符:&amp;amp; :逻辑运算符...原创 2018-04-01 17:21:02 · 445 阅读 · 0 评论 -
针对iview表格支持可拖拽拉伸,自定义插件封装支持iview table可拉伸效果实现
针对ivie表格支持可拖拽拉伸,自定义插件封装支持iview table可拉伸效果实现 也不知道多久没有去更新一些文章来分享一下东西,可能是在“程序猿”的道路上走着再平凡不过道路而感到惴惴不安,或者也可能是没有时间去研究其他的一些新鲜的东西呢?到此虽然自己还在前端的开发道路上… 跳槽了一会,对于前端,在公司的应用也说不上是一个比较成熟的体系了,用的Vue + Iview 等技术栈应用。在使...原创 2019-09-26 16:14:17 · 2543 阅读 · 0 评论 -
原声JS判断程序运行平台Pc OR Mobile
var userAgent = navigator.userAgent.toLowerCase();if(!userAgent.match(".*(ip(hone|od)).*") && !userAgent.match(".*(android.+mobile|bada\\/|blackberry|iemobile|kindle|wap|windows (ce|phone)).*")) {转载 2017-09-13 14:26:08 · 472 阅读 · 0 评论 -
基于Jquery/cropper插件的使用。头像截切/裁剪图片。
—-》闲来无事,学习了解一点新的东西还是可以消磨时间,非常敬业、提炼升仙。本栗针对移动页面上需要头像裁剪上传的功能。 基于Jquery库/Cropper插件 实现头像旋转、裁剪、转换canvas等功能。模仿QQ头像上传的样式,具体使用方法请参考如下实例。使用方法: 1、引入插件需要的js、css文件即可。请jquery文件放在cropper.js前面引用。<link rel="styleshe原创 2017-10-11 17:23:40 · 1391 阅读 · 0 评论 -
JavaScript 实现loading加载效果实现页面遮罩层
1、引入需要JS文件<script src="js/page-over.min.js" type="text/javascript"></script>2、HTML页面加载 遮罩块代码如下。 <div id="overlay"></div>3、JavaScript 如何实现打开 和 关闭遮罩原创 2017-08-03 14:09:02 · 15452 阅读 · 0 评论 -
实用的时间控件的使用和下载
标记:下载需要的css文件和js文件,引入到工程项目中,编写部分脚本代码js文件:1、mobiscroll.custom-2.6.2.min.js 2、jquery.min.jscss文件:mobiscroll.custom-2.6.2.min.css 引入文件后编写部分脚本代码:如下 $(function () { var currYear = (new D...原创 2016-06-14 17:34:48 · 483 阅读 · 0 评论 -
js 实现定时对函数的调用setInterval()方法
var int = self.setInterval(“timeDate()”,2000);function timeDate() { var myDate = new Date(); var year = myDate.getFullYear(); alert(“当前年份:” + year); } // 清除定时原创 2016-07-01 14:12:47 · 622 阅读 · 0 评论 -
正则表达式全解析,通俗易懂
js正则表示式符号(限制符)释义:\ :将下一个字符标记为特殊字符^ :匹配输入字符的开始$ :匹配输入字符的结束* :匹配前面字符0次或者多次+ :匹配前面字符至少1次或者多次?:匹配前面字符0次或者1次,当跟随在其他限制符后时将开启贪婪模式,列表达式/^A{3}?$/ 字符"AAA"将匹配到AAA,即不在是原来的0次到一次的匹配模式{n} :非负整数,配置前面字符n次,列{2},即至少2次{n,原创 2016-07-13 17:33:20 · 1094 阅读 · 0 评论 -
js获取日期以及日期格式化
http://www.cnblogs.com/qinpengming/archive/2012/12/03/2800002.html转载 2017-05-03 14:59:51 · 608 阅读 · 0 评论 -
js 判断滚动条滚动到底部
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title&g原创 2017-08-01 14:37:50 · 853 阅读 · 0 评论 -
js获取页面元素高度、宽度
网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offsetWidth (包括边线和滚动条的宽);网页可见区域高: document.body.offsetHeight (包括边线的宽);网页正文全文宽: document.body.scrollWidt转载 2017-08-01 14:42:17 · 456 阅读 · 0 评论 -
js 针对手机平台判断IOS,Anndroid
<div class="body"> <button id="downLoadApp"> app </button> </div>JS 代码:<script> $(function () { function returnSys() { var sys = "";转载 2017-07-27 16:49:44 · 394 阅读 · 0 评论 -
清晰明了告诉你RequireJS 的使用。
RequireJS 是一个JavaScript模块加载器。它非常适合在浏览器中使用,但它也可以用在其他脚本环境,就像 Rhino and Node。使用RequireJS加载模块化脚本将提高代码的加载速度和质量。实现模块化加载。使用方法: 1、引入require.js,官网下载地址: http://requirejs.org/docs/download.html#requirejs<scrip原创 2017-08-04 16:06:03 · 491 阅读 · 0 评论 -
使用jquery.lazyload.js 图片懒加载
1、引入必须的JS一依赖文件<script src="js/jquery-1.11.0.min.js"></script><script src="js/jquery.lazyload.min.js"></script>2、为图片加入样式lazy 图片路径引用方法用data-original<div clas原创 2017-08-21 15:15:49 · 450 阅读 · 0 评论 -
纯JS、CSS3实现高仿IOS消息alert弹窗(警告框,确认框,提示框)。老铁们,没毛病。
简洁,大方的ios弹窗风格。网上有很多关于alert 弹窗的栗子可以借鉴使用。本文章主要应用在移动端上面的弹窗实现。 在项目没有应该到其他框架的弹窗的基础上, 此实例应该可以满足大部分弹窗上的要求,可直接应用于项目之中。使用方法: 1、引入依赖的样式文件和脚本,(也可直接引入非压缩文件,附件包含):<link href="popup.min.css" type="text/css" rel="st原创 2017-08-25 10:43:25 · 5410 阅读 · 0 评论 -
输入框只能输入数且小数点后不能超过2位
限制input 文本框只能输入数字。HTML:<input type='text' onkeyup="clearNoNum(this)">JavaScript:function clearNoNum(obj){ obj.value = obj.value.replace(/[^\d.]/g,"");//清除"数字"和"."以外的字符 obj.value = obj.value.r转载 2017-03-29 17:18:02 · 3689 阅读 · 0 评论 -
移动端 触摸事件 ontouchstart、ontouchmove、ontouchend、ontouchcancel
Touch事件简介 pc上的web页面鼠 标会产生:onmousedown、onmouseup、onmouseout、onmouseover、onmousemove的事件。但是在移动终端上的web页面触屏时会产生ontouchstart、ontouchmove、ontouchend、ontouchcancel 事件。 分别对应了触屏开始、拖拽及完成触屏事件和取消。 当按下手指时,触发ontou转载 2017-08-25 15:19:51 · 11302 阅读 · 0 评论 -
js格式化货币,数字转货币格式。
//格式化货币function fmoney(s, n) { n = n > 0 && n <= 20 ? n : 2; s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + ""; var l = s.split(".")[0].split("").reverse()转载 2017-03-29 17:12:03 · 4308 阅读 · 0 评论 -
H5技术完美实现调用手机摄像头、相册。图片上传base64,图片压缩、预览、删除以及图片旋转90度的处理--demo。
看了帖子上有很多关于H5调用手机摄像头、相册的例子,也有很多可靠的栗子,综合技术点针对HTML5调用用手机相机、相册的的一次代码整合。实现提供完成的Demo提供给大家,可直接应用于项目中需要图片上传的功能。因为是H5直接调用,并没有用到像Cordova或者HTML5Plus的 JavaScript库去调用手机硬件,因此在低端手机可能会调用不到摄像图、或者相册,因此这也是在H5在这里的不足,不好解决。原创 2017-08-16 23:50:45 · 10698 阅读 · 1 评论 -
圆形指示器radialIndicator控件的使用
1、首先需要引入js文件:<script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/radialIndicator.js"></script> 2、定义HTM原创 2016-06-23 11:18:51 · 14344 阅读 · 1 评论 -
移动H5手势密码解锁插件--demo
“”下面“”备注: 此实例应用于移动H5端,手势密码解锁的功能。实例针对不同大小的移动设备做了相应解锁屏幕的大小尺寸。 密码设置为一个 Z。需要使用手势解锁的移动前端的童鞋们,希望能帮助到。附件Demo: http://download.csdn.net/download/china_guanq/9937714转载 2017-08-17 10:51:19 · 2704 阅读 · 0 评论 -
实现鼠标自动点击
$(function() {var odiv = document.getElementByIdx_x("uid");odiv.onclick = function(){alert("abc");}odiv.click();})原创 2016-06-07 14:19:22 · 7164 阅读 · 0 评论