我还记得那天夕阳下的奔跑-CSDN博客

原创 jquery 实现DOM节点增删+循环获取表单值示例

交互：1.点击“添加故障”：可添加多个故障，默认首次进入展示一条故障录入框，添加上限不限；点击“删除故障”，可删除最近一条故障，删除至仅有一个故障后，“删除故障”按钮消失；2.点击“添加方案”：可添加多个方案，默认展示一个方案，添加上限不限；点击“删除”，可删除该方案，删除至仅有一个方案后，”删除“按钮消失。图1 弹框初始样式图2 点击几次”添加故障“按钮图3 点击几次”添加绑定方...

2018-11-21 17:52:16 401

原创微信公众号页面禁止长按弹出系统菜单，兼容ios和安卓

cssSelect{ -webkit-touch-callout:none;/*系统默认菜单被禁用*/ -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;/*用户是否能够选中文...

2018-09-18 14:34:21 3165 2

原创实现移动端复制粘贴指定内容，兼容ios和安卓

最近做一个微信公众号的需求，有个复制功能，需要复制券码。如下图所示：我使用了clipboard.js插件，发现能兼容ios和安卓。我的使用方法如下：<div class="coupon-code-box" id="copy-target"> <p>卷码1:&nbsp;456645978qqf114</p> <p&gt

2018-09-17 16:53:17 1971

原创微信二次分享解决方案

这几天做一个微信公众号的需求，有个分享功能。发现分享从公众号分享到微信是正常的，可以看到缩略图、名称、描述，但是直接转发该分享或者点开该分享再次通过微信分享时，就只出现了链接地址，也没有缩略图。测试的图片如下：图1 第一次分享-正确图2 第二次分享-不正确原因：我的情况是，触发分享事件的页面与分享的目标页面不是同一个页面，当用户通过分享链接点开页面并分享该页面，由于该页面（前面...

2018-09-17 15:03:58 11371 8

原创 DOM 扩展

对DOM 的两个主要的扩展是Selectors API（选择符API）和HTML5。以下内容注意兼容性。一、选择符API1、querySelector()方法接收一个参数，即CSS 选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。 2、querySelectorAll()方法接收一个参数，即CSS 选择符，但返回的是所有匹配的元素而不仅仅是一个元素。这个方法返...

2018-08-30 16:01:40 208

DOM（文档对象模型）是针对HTML 和XML 文档的一个API（应用程序编程接口），DOM 定义了访问 HTML 和 XML 文档的标准。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。此处主要讨论与浏览器中的HTML 页面相关的DOM1 级的特性和应用，以及JavaScript 对DOM1 级的实现。注意，IE 中的所有DOM 对象都是以COM 对象的形式实现的...

2018-08-28 18:02:27 1092

转载 js数组迭代方法

ES5为数组定义了5个迭代方法。每种方法都接收两个参数。要在每一项上运行的函数和（可选的）运行该函数的作用域对象–影响this的值。//其中（可选的）这个参数暂时未遇到过。其中，函数都接收三个参数（数组中的每一项、每一项的索引值、数组对象本身）。下面是5中方法的介绍： every() 对数组中的每一项执行函数，如果每一项都返回 true ,则该方法返回 true。 some() 对数...

2018-07-02 14:56:21 235

原创解决webstorm卡顿

每次打开webstorm都卡死了，总是记不住怎么处理，在此记录一下我常用的方法，方便查找。原因：webstorm在加载项目的时候，会扫描所有的文件，并建立索引。解决办法：在对应文件上右键 -> mark directory as -> excluded，这样就可以把这个文件标记并排除出来，使webstorm不会扫描这个文件下面的文件，同样其他的独立的文件也可以如此处理，需要恢...

2018-06-29 16:03:12 2089

转载 web移动端开发技巧与注意事项汇总

一、meta的使用1、<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览2...

2018-06-22 17:20:33 3635

原创 BOM——history 对象

history 对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。因为history 是window对象的属性，因此每个浏览器窗口、每个标签页乃至每个框架，都有自己的history 对象与特定的window对象关联。出于安全方面的考虑，开发人员无法得知用户浏览过的URL。不过，借由用户访问过的页面列表，同样可以在不知道实际URL 的情况下实现后退和前进。使用go()方法可以在用户的历史记...

2018-06-15 09:54:12 303

原创 BOM——location 对象

location 是最有用的BOM对象之一，它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。事实上，location 对象是很特别的一个对象，因为它既是window 对象的属性，也是document 对象的属性；换句话说，window.location和document.location引用的是同一个对象。location 对象的用处不只表现在它保存着当前文档的信息，还表现在它将U...

2018-06-14 16:03:46 231

原创 BOM——window 对象

BOM 的核心对象是window，它表示浏览器的一个实例。在浏览器中，window 对象既是通过JavaScript 访问浏览器窗口的一个接口，又是ECMAScript 规定的全局对象。因此所有在全局作用域中声明的变量、函数都会变成window 对象的属性和方法。全局变量不能通过delete 操作符删除，而直接在window 对象上的定义的属性可以。var age = 29;wind...

2018-06-14 13:35:08 291

原创闭包

闭包是指有权访问另一个函数作用域中的变量的函数。创建闭包的常见方式，就是在一个函数内部创建另一个函数，以createComparisonFunction()函数为例。function createComparisonFunction(propertyName) { return function(object1, object2){ var value1 = objec...

2018-06-13 15:07:04 194

原创递归函数

递归函数是在一个函数通过名字调用自身的情况下构成的，如下所示。function factorial(num){ if (num &amp;lt;= 1){ return 1; } else { return num * factorial(num-1); }}这是一个经典的递归阶乘函数。虽然这个函数表面看来没什么问题，但下面的代码却可能导致...

2018-06-11 10:54:51 216

原创鼠标悬停图片位置呼出浮层，点击浮层按钮可上传图片替换原图

举个栗子，鼠标悬停头像位置呼出浮层，点击浮层按钮可修改头像。不说废话，直接看效果图：图1 正常情况下图2 鼠标悬停于头像位置时html代码：<div class="user-avatar"> <img id="headUrl"> <div class="modify-avatar"...

2018-06-01 17:19:21 994

转载前端HTML5几种存储方式的总结

转自 http://www.cnblogs.com/LuckyWinty/p/5699117.html总体情况h5之前，存储主要是用cookies。cookies缺点有在请求头上带着数据，大小是4k之内。主Domain污染。主要应用：购物车、客户登录对于IE浏览器有UserData，大小是64k,只有IE浏览器支持。目标解决4k的大小问题解决请求头常带存储信息的问题解决关系型存储的问题跨浏览器 ...

2018-05-25 09:58:25 251

原创自定义单选框样式

大多数情况下我们需要重新定义单选框的样式，比如下图：html代码如下：<div class="user-info-detail"> <p> <span class="item-name">性别</span> <label class="choice-item radio-sex" fo

2018-05-07 14:18:54 1226

原创动态填充两个相关联的下拉框（如二级地址）

动态填充两个相关联的下拉框。例如：先获取所有的省，然后根据用户选中的省再获取该省的所有市。效果如下图：图1 图2html代码如...

2018-05-07 11:38:06 311

原创实时计算用户输入的字符数

某输入框限定最多输入15（或其他数字）个字符并实时计算用户输入的字符数，显示出可输入字符数。右下角数字表示允许长度，数字可到负，到负标红。效果如下图：html代码如下：<div class="user-info-detail"> <p> <span class="item-name"><i class="ico...

2018-05-03 18:24:52 448

原创 js 引用类型 -- Function类型

函数实际上是对象。每个函数都是Function 类型的实例，而且都与其他引用类型一样具有属性和方法。由于函数是对象，因此函数名实际上也是一个指向函数对象的指针，不会与某个函数绑定。函数通常是使用函数声明语法定义的，如下面的例子所示。function sum (num1, num2) { return num1 + num2;}这与下面使用函数表达式定义函数的方式几乎相差无几。var ...

2018-04-18 18:06:19 296

原创 RegExp 类型

RegExp 类型RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。正则表达式的设计思想是用一种描述性的语言来给字符串定义一个规则，凡是符合规则的字符串，我们就认为它“匹配”了，否则，该字符串就是不合法的。JavaScript有两种方式创建一个正则表达式，第一种方式是直接量语法 /pattern/attributes ；第二种方式是创建 RegExp 对象的语法：new Reg...

2018-04-04 18:12:16 237

原创 js 引用类型 -- Date类型

Date 类型JavaScript 中的Date 类型是在早期Java 中的java.util.Date 类基础上构建的。为此，Date类型使用自UTC（Coordinated Universal Time，国际协调时间）1970 年1 月1 日午夜（零时）开始经过的毫秒数来保存日期。在使用这种数据存储格式的条件下，Date 类型保存的日期能够精确到1970 年1月1 日之前或之后的285 616...

2018-04-04 10:09:12 474

原创 js 引用类型 -- Array类型

Array类型JavaScript 数组是可以包含任意数据类型的有序列表。也就是说，可以用数组的第一个位置来保存字符串，用第二位置来保存数值，用第三个位置来保存对象，以此类推。而且，JavaScript 数组的大小是可以动态调整的，即可以随着数据的添加自动增长以容纳新增数据。创建数组的基本方式有两种。第一种是使用Array 构造函数（可以省略new 操作符）。如下面的代码所示。var colors...

2018-04-02 18:34:13 167

原创 js 引用类型 -- Object类型

引用类型的值（对象）是引用类型的一个实例。在JavaScript中，引用类型是一种数据结构，用于将数据和功能组织在一起。Object类型JavaScript的对象是一种无序的集合数据类型，它由若干键值对组成。创建Object 实例的方式有两种。第一种是使用new 操作符后跟Object 构造函数，如下所示：var person = new Object();person.name = "Nich...

2018-03-29 16:09:05 240

原创 js 变量、作用域

1. 基本类型和引用类型的值ECMAScript 变量可能包含两种不同数据类型的值：基本类型值和引用类型值。基本类型值在内存中占据固定大小的空间，因此被保存在栈内存中；引用类型的值是对象，保存在堆内存中。在将一个值赋给变量时，解析器必须确定这个值是基本类型值还是引用类型值。5 种基本数据类型（Undefined、Null、Boolean、Number 和String）是按值访问的，因为可以操作保存...

2018-03-28 17:40:48 185

原创 js 关系操作符、相等操作符

一、关系操作符【小于（<）、大于（>）、小于等于（<=）和大于等于（>=）】ECMAScript 中，当关系操作符的操作数使用了非数值时，也要进行数据转换或完成某些奇怪的操作。以下就是相应的规则。 如果两个操作数都是数值，则执行数值比较。 如果两个操作数都是字符串，则比较两个字符串对应的字符编码值。 如果一个操作数是数值，则将另一个操作数转换为一个数值，然后执行数值比...

2018-03-27 17:18:44 280

原创 IE9兼容placeholder

最近做项目发现IE9不支持placeholder属性，故而做兼容，在此做一个记录。解决方案：先检查浏览器是否支持placeholder属性，如果支持，则不做处理；如果不支持，且placeholder有值的情况下，生成一个label标签覆盖在原来input的位置，然后再根据input的情况对label标签显示或隐藏。效果如下图：demo如下（由于宽度有限，对某些代码做了换行处理）：...

2018-03-23 18:15:50 300

原创页面加载时，添加进度条，提高用户体验

这几个月做了个项目，在此对一些问题做一个记录。项目是前后端分离的，前端用的 npm+webpack。问题：由于系统某页面数据量过大或网络较差等原因，导致页面还未完全加载出来，但按钮已被加载时（js还未就绪），点击按钮会报错。根据系统情况，解决方案：每个页面加载的时候，在header上方加一个动态的进度条，同时通过css样式在页面上覆盖一个透明的背景，使页面在加载完成前不可点击。页面完全...

2018-03-22 16:01:34 2579

原创 js数据类型

最近看了《JavaScript高级程序设计（第3版）》，对数据类型相关知识做了整理。ES5简单数据类型（也称为基本数据类型）：Undefined、Null、Boolean、Number和String。还有1 种复杂数据类型—Object，Object 本质上是由一组无序的名值对组成的。ECMAScript不支持任何创建自定义类型的机制，而所有值最终都将是上述6 种数据类型之一。1. typeof ...

2018-03-21 15:01:36 166

原创 js动态生成的DOM绑定事件失效的问题

事件委托原理：事件冒泡机制。优点：1. 可以大量节省内存占用，减少事件注册。比如ul 上代理所有li 的click 事件。2. 可以实现当新增子对象时，无需再对其事件进行绑定。对动态内容部分尤为合适。缺点：如果把所有事件都用事件代理，可能会出现事件误判。即本不该触发的事件被绑上了事件。初学者会可能会遇到在js 动态生成的DOM元素中直接绑定事件，事件没有生效的问题。因为网页只执行一次初始化绑定，...

2018-03-20 15:34:12 5017

原创 src=' ' 致webpack打包报错

今天同事遇到代码打包报错，从main.js -> js -> css -> html 排除错误。找了几个小时后，将错误定位到图1所示代码：图1报错详情如图2所示：（这个报错无法帮助我们定位错误） ...

2018-03-19 17:31:12 272

原创 IE9中table出现空白单元格及td出现错位的问题

问题描述：最近做的项目中，PC端页面有大量的table。某些页面的table列数较多（20列左右），在IE9浏览器中部分表格单元格分割线显示不全，同时存在数据显示错位。如下图所示：原因：经排查，发现是换行引起的，即<tr><td></td><td></td></tr>不能换行。解决办法：找一个在线HTML压缩，将表格插件中 t...

2018-03-12 17:42:34 1536

原创 js获取下一个月最后一天

思路：先获取当前时间（年月日），再判断当前月份的下一个月是多少天。注意：（1）js中 getMonth() 返回值是0（一月）到11（十二月）之间的一个整数；（2）当getMonth()返回的值是11（12月），则它的下一个月为次年1月；（3）当getMonth()返回的值是0（1月），则它的下一个月为2月，应判断是否为闰年。代码如下： <!DOCTYPE ...

2018-03-12 15:41:08 2934

原创软键盘弹出影响webapp中固定定位的问题

最近用html做app时，在修改密码页面弹出的软键盘将固定在页面底部的按钮顶上来了，导致布局有一定的混乱。我查阅了相关资料解决此问题。这里做一个记录。原因：某些安卓机下键盘弹起会引起窗口高度（html标签的高度）变小，而fixed定位是相对于html根元素的，所以会被顶上来。如下图： html如下：<body><div class="container h...

2017-11-16 14:24:05 2646

原创倒计时

倒计时html<div class="activity-title" id="title"> <div class="time"> <div class="time-con"> <div class="time-num">

2017-09-04 16:12:35 366

原创 jQuery实现消息匀速移动显示

原理：不停地调用定时器，达到在很短的时间（最小执行时间 OSX:10ms,Windows:15ms）移动很短的距离（1px），即视觉上是匀速移动效果：消息从右往左匀速移动html（消息内容从后台接口获取然后添加到<ul></ul>中） <div class="notify" id="js-notify"> <div class="...

2017-09-04 14:58:24 673

原创 JQuery实现图片轮播滚动效果

原理（参考网上资料）：设置一个定时器，使图片列表在每隔一段时间后滚动一次。而循环效果，就是在每一滚动的时候，将第一张图片放到最后一张的后面(for循环来控制图片的换位操作)。效果：图片从右往左依次滑动html（轮播内容从后台接口读取然后添加到<ul></ul>中）<div class="project-tracking" id="tracking"&...

2017-09-04 14:00:24 940

转载前端模块化

转载：http://www.cnblogs.com/dolphinX/p/4381855.html在JavaScript发展初期就是为了实现简单的页面交互逻辑，寥寥数语即可；如今CPU、浏览器性能得到了极大的提升，很多页面逻辑迁移到了客户端（表单验证等），随着web2.0时代的到来，Ajax技术得到广泛应用，jQuery等前端库层出不穷，前端代码日益膨胀这时候JavaScript作

2017-03-27 16:08:17 373

原创网页header固定不动+隐藏二级菜单栏

效果图如下：图1 header初始状态图2 鼠标移到“分类浏览”，出现二级菜单图3 鼠标移到右上角用户头像处，出现二级菜单<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>index_hea

2017-03-24 17:20:17 2804

原创前端轮播图

html（从项目中截的）:<div class="index-slide-ctt-left"> <div id="slide1" class="shadow-666"> <ul> <li> <a href="article_det

2017-03-23 17:04:43 450

空空如也

空空如也