javascript
关注
分享
扫一扫
sweetllh
不疯癫，不成魔
展开
-
js设计模式
发现两篇js设计模式的文章，写得通俗易懂，大家可以一起学习下https://www.cnblogs.com/libin-1/p/6337115.htmlhttps://www.cnblogs.com/tugenhua0707/p/5198407.html原创 2018-02-04 11:07:21 · 387 阅读 · 1 评论 -
js写一个方法，求一个数组中的最大奇数和最小偶数，并求他们的和，如果一个数不存在则返回null。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script type="text/javascript"> function fun(arr) { var原创 2017-07-01 14:14:13 · 3034 阅读 · 0 评论 -
js写一个方法求一个数组里面奇数和偶数的个数
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script type="text/javascript"> function tab(arr){ va原创 2017-07-01 11:44:04 · 6699 阅读 · 0 评论 -
JS写一个方法求数组奇数和偶数的和
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script type="text/javascript"> function sum(arr){ va原创 2017-07-01 11:59:54 · 4390 阅读 · 0 评论 -
浏览器兼容的JS写法总结
一、元素查找问题1. document.all[name] (1)现有问题：Firefox不支持document.all[name] (2)解决方法：使用getElementsByName(name)，getElementById(id)等来替代。2. 集合类对象问题 (1)现有问题：IE中对许多集合类对象取用时可以用 ()，但在Firefox只能用[]。 如：IE中原创 2017-07-01 10:58:02 · 1184 阅读 · 0 评论 -
BOM（浏览器对象模型）对象总结
1.window对象BOM的核心对象是window，它表示浏览器的一个实例，它也是ECMAScript规定的Globle对象，也就是说网页中任何一个对象都是在window这个对象里面的。如果有用到框架(frameset)，那么每个框架都有自己的window对象. 如下例子：var a = "666";aler(a); //666alert(window.a) //666两条alert都是弹原创 2017-06-29 20:20:35 · 2766 阅读 · 0 评论 -
array数组的使用
定义： var arr = [1,3,5,7,9]; var arr = new Array(1,3,5,7,9); 使用上没有差别，[]性能会高一点点一个属性，length 设置或获取数据的长度，如果设置的新长度小于原有长度，多余的数据会丢失。使用原则：数组中只保存同一类型的数据数组的常用方法// 在数组最后添加新的数据，push()*****// 把数组最后一个数据删除并返回删原创 2017-04-20 17:36:12 · 520 阅读 · 0 评论 -
string字符串常用方法
定义字符串：var s1 = 'string';var s2 = "string";var s3 = new String('string');常用方法： 获取给定位置的字符string.charAt//(位置)string[10]; 拼接两个字符串，原字符串不会做改变，产生一个新的字符串var string3 = string1.concat(string2);var st原创 2017-04-21 18:15:37 · 292 阅读 · 0 评论 -
Date日期的常用方法
计算机的时间是以1970年1月1日0时0分0秒(英国格林尼治天文台)开始 创建日期：var date = new Date(); //获取当前的时间<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>日期的使用</title> </head> <body> </bod原创 2017-04-20 17:47:01 · 532 阅读 · 0 评论 -
DOM对象
DOM就是DocumentObjectModel，文档对象模型。赋予JS操作节点的能力。当网页加载时，浏览器会创建页面的DOM。 查找HTML元素 1. document.getElementById(‘id’)，不建议使用id，后端开发人员使用 2. document.getElementsByTagName(‘tag’); 3. document.getElementsByCla原创 2017-04-21 18:26:55 · 397 阅读 · 0 评论 -
JS常用正则表达式和JS控制输入框输入限制(数字、汉字、字符)
验证数字：^[0-9]*$ 验证n位的数字：^\d{n}$ 验证至少n位数字：^\d{n,}$ 验证m-n位的数字：^\d{m,n}$ 验证零和非零开头的数字：^(0|[1-9][0-9]*)$ 验证有两位小数的正实数：^[0-9]+(.[0-9]{2})?$ 验证有1-3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$ 验证非零的正整数：^\+?[1-9][0-9]*$原创 2017-06-04 20:35:51 · 11788 阅读 · 0 评论 -
js实现页面动态时间，滚动效果（年月日，小时、分钟、秒，星期，毫秒）
年月日放在一个div里面；小时、分钟、秒放在一个div里面；星期放在一个div里面；毫秒放在一个div里面。 因为它们的时间设置不同或img类不同html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>js制作一个动态页面时间，滚动效果</title> <style type原创 2017-04-19 23:03:08 · 6273 阅读 · 1 评论 -
js 实现简单的动画效果（小圆移动）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>animation</title> <style type="text/css" media="screen"> *{ padding: 0; margin: 0;原创 2017-04-18 18:36:40 · 3436 阅读 · 1 评论 -
js实现简单的动画（4个按钮控制图片上下左右移动）
第一种写法，比较原始，没有精简的代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>小圆上下左右移动</title> <style> *{ margin: 0; padding: 0; }原创 2017-04-19 18:11:33 · 10683 阅读 · 0 评论 -
js实现简单的动画（游动的鱼）
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; }原创 2017-04-20 00:14:43 · 5258 阅读 · 0 评论 -
js实现图片无缝向左轮播
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title><style> *{margin: 0;padding: 0;} ul, li{list-style: none;} .js-mask{width: 198px;height: 132px;borde原创 2017-04-20 22:21:39 · 3245 阅读 · 1 评论 -
提供任意字符串，js写一个函数能够查找字符串中出现最多的次数的字符及其个数。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script type="text/javascript"> function transform(str){原创 2017-06-30 19:38:20 · 2142 阅读 · 0 评论 -
将1-100的奇数存入数组
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script type="text/javascript"> var arr = []; for(var i=0原创 2017-07-01 14:26:45 · 2978 阅读 · 0 评论 -
求js数组的最大值和最小值的四种方法
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script type="text/javascript"> var ary = [3,8,7,9,1]; //1原创 2017-07-01 14:54:14 · 948 阅读 · 0 评论 -
表格插件汇总
常用表格插件附官网或中文网：Datatables、EasyUI Datagrid 数据网格、pqgrid、jqGrid、bootstrap-table一、Datatables中文网：http://www.datatables.club/Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。增删改查功能完整：1、原创 2018-02-03 15:56:33 · 12928 阅读 · 0 评论 -
YaHoo Web优化的14条法则
Web应用性能优化黄金法则：先优化前端程序(front-end)的性能，因为这是80%或以上的最终用户响应时间的花费所在。法则1. 减少HTTP请求次数80%的最终用户响应时间花在前端程序上，而其大部分时间则花在各种页面元素，如图像、样式表、脚本和Flash等，的下载上。减少页面元素将会减少HTTP请求次数。这是快速显示页面的关键所在。 一种减少页面元素个数的方法是简化页面设计。但是否存在其他方式原创 2017-07-27 22:13:33 · 358 阅读 · 0 评论 -
ie和dom事件流的区别
1.事件流的区别 IE采用冒泡型事件 Netscape使用捕获型事件 DOM使用先捕获后冒泡型事件 示例： 点击这里 冒泡型事件模型： button->div->body (IE事件流) 捕获型事件模型： body->div->button (Netscape事件流) DOM事件模型： body->div->button->button->div->body (先捕获后冒泡) 2.事原创 2017-07-27 14:28:56 · 2295 阅读 · 0 评论 -
Jquery瀑布流布局
<!doctype html><html><head><meta charset="utf-8"><title>Jquery瀑布流布局</title><style type="text/css">body, ul, li, h3 { margin: 0 50px; padding: 0; list-style: none; font: bold 12px "微软雅黑"; }/*瀑布流布原创 2017-06-26 20:25:18 · 529 阅读 · 0 评论 -
ajax百度搜索框
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>#q {width: 300px; height: 30px; padding: 5px; border:1px solid #f90; font-原创 2017-06-26 20:24:01 · 362 阅读 · 0 评论 -
浅谈Jquery中的bind(),live(),delegate(),on()绑定事件方式
一、bind() bind()向匹配元素添加一个或多个事件处理器。 使用方式 (selector).bind(event,data,function)event：必需项；添加到元素的一个或多个事件，例如click,dblclick等；单事件处理：例如(selector).bind(event,data,function) event：必需项；添加到元素的一个或多个事件，例如 clic转载 2017-07-03 20:21:33 · 264 阅读 · 0 评论 -
正则表达式验证邮箱地址
邮箱@前缀的几种类型：1、纯数字 123456@qq.com 2、纯字母 zhangsan@qq.com 3、字母数字混合 zhang123@qq.com 4、带点的 zhang.san@qq.com 5、带下划线 zhang_san@qq.com 6、带连接线 zhang-san@qq.com邮箱@后缀的类型：1、123456@qq原创 2017-07-03 14:23:38 · 3613 阅读 · 0 评论 -
构造一个函数能将border-bottom-color用函数转成驼峰命名法，就是变成：borderBottomColor输出
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script type="text/javascript"> function transform(str){原创 2017-06-30 19:56:45 · 653 阅读 · 0 评论 -
JavaScript写一个方法把URL解析成对象.html
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script type="text/javascript"> var url="http://www.taobao.com/in原创 2017-07-03 09:14:00 · 452 阅读 · 0 评论 -
js强制类型转换
转换函数、强制类型转换、利用js变量弱类型转换。1. 转换函数：js提供了parseInt()和parseFloat()两个转换函数。前者把值转换成整数，后者把值转换成浮点数。只有对String类型调用这些方法，这两个函数才能正确运行；对其他类型返回的都是NaN(Not a Number)。一些示例如下： parseInt("1234blue"); //returns 1234 par转载 2017-07-01 17:34:57 · 503 阅读 · 0 评论 -
JavaScript的隐式类型转换浅析
参考博文：http://www.codeceo.com/article/javascript-type-convert.html http://www.jianshu.com/p/0f1e3ff14537JavaScript的数据类型分为六种，分别为null,undefined,boolean,string,number,object。object是引用类型，其它的五种是基本类型或转载 2017-07-01 17:18:56 · 763 阅读 · 0 评论 -
前端页面有哪三层构成，分别是什么?作用是什么?
参考博文：http://www.web92.net/870.html 最准确的网页设计思路是把网页分成三个层次，即：结构层、表示层、行为层。网页的结构层（structural layer）由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是转载 2017-07-01 15:59:38 · 30844 阅读 · 0 评论 -
JS输出100-1000的水仙花束
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script> var n,i,j,m,s; for (n=100;n<=999;n++){//原创 2017-04-19 10:03:41 · 2076 阅读 · 0 评论 -
for循环嵌套制作九九乘法表
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>for循环嵌套制作九九乘法表</title></head><body></body><script> for(var i=1;i<10;i++){ for(var j=1;j<10;j++){原创 2017-04-18 10:39:24 · 3607 阅读 · 0 评论 -
编写一个js函数用来求n的阶乘
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script type="text/javascript"> //求阶乘n! 即，1×2×3×4×5×······×n（使用递归原创 2017-07-01 15:31:09 · 22897 阅读 · 3 评论 -
编写一个js函数用来求一个数组中各元素之积
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script type="text/javascript"> function product(arr) {原创 2017-07-01 15:20:06 · 2886 阅读 · 0 评论 -
js实现按钮控制图片向左、向右、向上、向下无缝轮播
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>向左、向右、向上、向下无缝滚动</title> <style type="text/css"> *{ padding: 0; marg原创 2017-04-21 17:24:23 · 2566 阅读 · 0 评论 -
js实现图片淡入淡出
效果：鼠标移入时，图片由半透明逐渐变成清晰，移出时，由清晰变为半透明分析：用变量来储存透明度，因为元素.style.alpha不能直接增加或减少代码中另附有一个设置元素透明度的方法, 是按IE规则(0~100)设置, 若改成标准设置方法(0.00~1.00)<!DOCTYPE html><html> <head> <meta charset="utf-8" />原创 2017-04-25 19:11:10 · 2713 阅读 · 0 评论 -
js实现检查两个div是否有碰撞
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>检查两个div是否有碰撞</title> <style> #box1 { width: 100px; height: 100px;原创 2017-05-07 23:19:22 · 3323 阅读 · 0 评论 -
js实现全选全不选反选
<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <title>全选全不选反选</title> <style type="text/css"> *{ padding: 0; margin: 0; } bo原创 2017-04-22 22:58:17 · 365 阅读 · 0 评论 -
JS实现全选、全不选的email效果
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div><input type="checkbox" id="checkAll"/>全选/全不选</div> <ul>原创 2017-04-15 16:56:38 · 409 阅读 · 0 评论