js
erdouzhang
这个作者很懒,什么都没留下…
展开
-
数据类型--隐式类型转化
减号、乘号、除号、取模等都是隐式类型转换- * / % 把字符串变成数字加号 + 转换成字符串自加、自减 ++、-- 转换成数字大于、小于 > :仔细看清楚是数字的比较还是字符串的比较取反叹号 ! :把右边的数据通通转成布尔值双等号 == :转成布尔值,只看值不看数据类型如果转换不成功,就会出现NaN(Not a Number)。alert('200'-3);//197a原创 2017-07-07 16:19:20 · 1349 阅读 · 0 评论 -
获取样式 currentStyle与getComputedStyle
currentStyle与getComputedStyle 都是获取样式; currentStyle()兼容IE6、7、8 getComputedStyle()不兼容IE6、7、8 getComputedStyle得到的是计算机(浏览器)经过计算后的样式:如果同时有行内样式和样式表,那么优先选择行内式;如果js中也设置样式,那么优先选择js中的样式;下面的例子是获取一个盒子的宽度:h原创 2017-07-27 16:04:17 · 452 阅读 · 0 评论 -
定时器
定时器:在某一定的时间之内发生一些事;有时间的概念;for(var i=0;i5;i++){ }//瞬间执行,没有时间根据设置定时器:var timer = setInterval(函数,时间毫秒); 关闭定时器:clearInterval(timer);一个函数执行有以下几种方式: 1、直接调用:fn1( ); 2、事件调用:document.onclick = fn1; 3原创 2017-07-27 16:04:34 · 5413 阅读 · 0 评论 -
定时器 — 换背景图片
html:type="button" value="点我换个背景吧">type="button" value="停!">js:var btn = document.getElementsByTagName('input');//获取按钮var arrUrl = ['img/13.jpg','img/14.jpg','img/15.jpg','img/16.jpg'];//图片数原创 2017-07-27 16:04:58 · 2601 阅读 · 0 评论 -
定时器 — 弹窗广告
页面打开之后2秒钟开始弹出广告,广告弹出3秒钟之后自动关闭广告(只执行一次);例如:看视频时,刚打开视频5秒钟后,右下角弹出一个广告,过5秒自动关闭广告;html:img src="img/ad.png" alt="广告" id="ad">css:body {background:url(img/bg.png) no-repeat center 0; text-align: c原创 2017-07-27 16:05:16 · 803 阅读 · 0 评论 -
定时器 — 图片自动切换(轮播图)
自动播放轮播图,鼠标放在图片上轮播停止;鼠标移开,继续轮播; 一种是打开页面就开始轮播; 另一种是打开图片过几秒再开始轮播(具体看下面js代码);html:"pic"> "img/1.jpg" alt=""> 数量正在加载... 文字正在加载... css:body {background-color: #333;}ul {padding原创 2017-07-27 16:05:37 · 11418 阅读 · 1 评论 -
定时器 — 延时小菜单
鼠标放在qq框中,title提示框过一会出现;鼠标移开qq框,title提示框过一会消失html:div id="qq">div>div id="title">div>css:#qq { width: 150px; height: 300px; background-color: #f9c;}#title { width: 100px;原创 2017-07-28 16:44:23 · 317 阅读 · 0 评论 -
滑块运动 — 向右
点击按钮,红色方块向右运动;无论怎么连续点击按钮,滑块始终匀速前进html:"button" value="向右滑动" id="btn">div id="div1">div>css:#div1 { width: 50px; height: 50px; background-color: red; position: absolute; to原创 2017-07-28 16:44:43 · 883 阅读 · 0 评论 -
动画函数 doMove.js
用动画可以直接引用这个动画函数文件,然后调用doMove()函数。 js:'use strict';// 运动函数function $(id){return document.getElementById(id);} function doMove(obj,attr,dir,target,endFn){//参数分别代表:元素、上下左右方向运动、方向(正反方向)、原创 2017-08-04 19:06:51 · 2133 阅读 · 1 评论 -
滑块运动 — 左右
html:type="button" value="向右滑动" id="btn1">type="button" value="向左滑动" id="btn2">"div1">css:#div1 { width: 50px; height: 50px; background-color: red; position: absolute; to原创 2017-07-28 16:45:03 · 717 阅读 · 0 评论 -
滑块运动 — 上下
html:type="button" value="向下" id="btn1">type="button" value="向上" id="btn2">"div1">css:#div1 { width: 50px; height: 50px; background-color: red; position: absolute; top: 5原创 2017-07-28 16:45:21 · 1261 阅读 · 0 评论 -
函数 - arguments
arguments:参数的集合fn1(1,2,3);//实参function fn1(a,b,c){//形参 // arguments ==> [1,2,3]实参的集合 //alert(arguments);//object Arguments alert(arguments.length);//3 alert(arguments[0]);//1 al原创 2017-07-27 16:03:57 · 221 阅读 · 0 评论 -
函数 - return
return后面跟的是数据类型;原创 2017-07-27 16:03:37 · 387 阅读 · 0 评论 -
NaN、isNaN、判断输入值是不是数字、字符串
1、NaN只要是类型转换失败,都会出现NaN。例如:var a = Number('abc');alert(a);//NaNalert(typeof a);//number 查看a的数据类型NaN:Not a number 不是个数字 的 数字类型 一旦写程序出现NaN,那么肯定进行了非法的运算操作。例如:alert('200px' - 100);//NaN 忘记先把200p原创 2017-07-07 16:19:42 · 8752 阅读 · 0 评论 -
简单对输入判断
输入要求:// 1、有没有输入// 2、输入的是不是数字// 3、不能有0在前面// 4、不能是小数// 5、输入的数字必须在5位以上10位以内html:div class="box"> span>请输入QQ号码:span> input type="text" name="" id="num"> input type="button" value="判断原创 2017-07-07 16:22:02 · 293 阅读 · 0 评论 -
函数传参、参数类型
函数传参:就是函数传递参数。 参数就是JS的数据类型:数字、字符串、布尔值、函数、对象、未定义 例如:function fn1(a){//a用于接收函数传过来的参数 alert(a);//100}fn1(100);//100function fn1(a,b){//100传给a,px传给b alert(a+b);//100px}fn1(100,'px');原创 2017-07-07 16:57:34 · 451 阅读 · 0 评论 -
判断参数数据类型
当看到不同的数据类型时,要先处理判断一下,然后再做后面的事。 函数传参是在后面写一些库,方法,公用方法时侯需要考虑的一些细节。// 根据传进来的东西不同,要对参数的类型进行判断// 如何做判断呢?function fn1(a){//参数是a // 我们要先对传进来的参数进行数据类型的判断 // NaN的类型是Number类型,所以如果想要排除Na原创 2017-07-07 16:57:59 · 1182 阅读 · 0 评论 -
页面中多组切换按钮
html:"pic1" class="box"> "img/1.jpg" alt=""> 数量正在加载... 文字正在加载... "pic2" class="box"> "img/1.jpg" alt=""> 数量正在加载... 文字正在加载... css:body {background-color: #3原创 2017-07-07 16:58:27 · 708 阅读 · 0 评论 -
页面中多组切换按钮— 事件不同
左边是点击事件,右边是鼠标移入移出。 如果事件不同(一个是点击事件、一个是鼠标滑动事件),也是在函数调用时传入参数。html、css和上篇文章一样,这里就不重复。 js:window.onload = function(){ fnTab('pic1',['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'],['海上帆原创 2017-07-07 16:58:56 · 350 阅读 · 0 评论 -
购物车商品价格计算
多组商品价格计算html:ul id="list" > li> input type="button" value="-" id="j"> strong>0strong> input type="button" value="+" id="jia"> 单价:em>12.5元e原创 2017-07-07 16:59:25 · 2672 阅读 · 0 评论 -
数据类型 — 真假
真真:非零数字(正数、负数、小数)、所有的非空字符串if( 123 ){//数字为真,正数、负数、小数都为真 alert('真');}else{ alert('假');}假:0、NaN、空字符串‘’if( 'abc' - 123 ){//得到NaN是假 alert('真');}else{ alert('假');}原创 2017-07-17 15:41:07 · 1213 阅读 · 0 评论 -
作用域 - JS解析器如何解析js代码?
作用域:简单来说就是在什么样的空间范围内,对数据进行读写操作 域:就是空间、范围、区域 作用:读和写在浏览器中,有专门读JS的东西,我们叫js解析器。原创 2017-07-08 13:50:15 · 649 阅读 · 0 评论 -
运动 — 每个滑块依次落下
点击任意位置,红色方块都会依次落下;首先引用动画文件doMove.js,动画函数是封装好的,具体参考上篇文章:script src="doMove.js">script>js:var str = '';var len = 20;var oDiv = document.getElementsByTagName('div');//选中页面上的所有div元素var timer =原创 2017-08-04 19:06:28 · 326 阅读 · 0 评论 -
滑块运动 — 到目标位置宽度缓慢展开
点击按钮,方块运动到右边目标位置,然后宽度展开; 也可以设置高度展开参考下一篇文章;html:"button" value="运动" id="btn"> div id="div1">div>css:#div1 { width: 50px; height: 50px; background-color: red; position: absol原创 2017-07-28 16:45:42 · 335 阅读 · 0 评论 -
滑块运动 — 到目标位置高度展开
具体html、css不变,参考滑块运动 — 到目标位置宽度展开,js只改动一个地方: 只要把回调函数中的width改成height,展开高度和展开速度自己随便调;$('btn').onclick = function(){ doMove(div1,'left',5,250,function(){ doMove(div1,'height',4,200);//回调函数原创 2017-07-28 16:45:59 · 413 阅读 · 0 评论 -
图片左右抖动、上下抖动
点击图片,图片会左右抖动(GIF图片效果不太明显,实际效果比这要好看);html:img src="./img/19.jpg" alt="" id="img1">css:img { position: absolute; top: 200px; left: 300px;}js:script src="doMove.js">script>scrip原创 2017-08-24 06:52:11 · 7722 阅读 · 0 评论 -
分割字符串split( )
把字符串分割成数组原创 2017-08-30 19:20:08 · 1419 阅读 · 0 评论 -
字符串连接join( )
join( )括号中不加任何参数,默认是逗号连接var arr = ['aa','bb','cc','dd'];alert(arr.join());//aa,bb,cc,ddjoin( )括号中加单引号,连接:alert(arr.join(''));//aabbccddjion( ) 括号中添加分隔符:alert(arr.join('-'));//aa-bb-cc-dd原创 2017-08-30 19:20:28 · 3333 阅读 · 0 评论 -
字符串操作总结
var str = '百度-www.baidu.com';str.charAt(1);//度 根据子字符串的下标返回字符串从0数str.charCodeAt(0);//24230 根据子字符串的下标返回字符编码String.fromCharCode(30334,24230);//'百度' 根据编码返回字符串str.indexOf('b',1);//7 字符串查找 从左到右查b,原创 2017-09-01 21:47:44 · 297 阅读 · 0 评论 -
json
json非常适合服务器和js中间进行数据的交互;var json = {name:'张三',age:18};//定义jsonalert(json.name); // 访问jsonvar arrUrl = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'];var arrTxt = ['海上帆船','小台灯','椰子树','照相机'];原创 2017-09-01 21:48:13 · 492 阅读 · 0 评论 -
全文查找匹配字符
html:"text">"button" value="查找">计算机(computer)俗称电脑,是现代一种用于高速计算的电子计算机器...量子计算机等。css:p {width: 200px;height: 350px;border: 4px solid #ccc;padding: 10px;}span {background-color: yellow;}//用于匹配的文字原创 2017-09-01 21:49:11 · 740 阅读 · 1 评论 -
全文替换字符
html:"text">"button" value="查找">计算机(computer)俗称电脑,是现代一种用于高速计算的电子计算机器...量子计算机等。css:p {width: 520px;height: 110px;border: 4px solid #ccc;padding: 10px;}span {background-color: yellow;}//用于匹原创 2017-09-01 21:49:43 · 921 阅读 · 0 评论 -
数组 — 方法
快速清空数组方法:方法一:arr.length = 0;//直接让数组的长度为0来清空数组alert(arr);//什么都不显示方法二:var arr = [];//直接定义一个新数组也是清空数组(推荐这个,效率高)alert(arr);//什么都不显示设定数组长度:var arr = ['aa',2,3];alert(arr.length);//3arr.leng原创 2017-09-01 21:50:02 · 686 阅读 · 0 评论 -
数组去重
var arr = [1,2,2,3,5,2,4,6];// 循环遍历数组for(var i = 0;i<arr.length;i++){ for(var j = i+1;j<arr.length;j++){ if(arr[i] == arr[j]){// 第一位和第二位进行比较 arr.splice(j,1);//干掉第j个,干掉1个原创 2017-09-01 21:50:23 · 372 阅读 · 0 评论 -
数组排序
字符排序:var arr = ['c','a','d','b'];arr.sort();alert(arr);//a,b,c,d数字排序: 数字排序不能直接使用sort( )方法,因为它是直接先比较第一位数字var arr1 = [1,5,3,8,56,23,2];arr1.sort();alert(arr1);//1,2,23,3,,5,56,8应该在sort( )方法原创 2017-09-01 21:50:42 · 397 阅读 · 0 评论 -
随机函数(随机取数)
Math.random( )是随机函数:随机取0~1之间的任意数;1、四舍五入函数如果是一位整数,那么就要用到四舍五入函数:Math.round( ); 例如:alert(Math.round(3.4));//3alert(Math.round(3.5));//42、随机0和1alert(Math.round(Math.random()));//随机取0或1原创 2017-09-01 21:50:58 · 8962 阅读 · 0 评论 -
字母大小写转化
var str = 'www.baidu.com';alert(str.toUpperCase());//WWW.BAIDU.COM 转成大写字母alert(str.toLowerCase());//www.baidu.com 转成小写字母原创 2017-08-30 19:19:49 · 450 阅读 · 0 评论 -
文字收缩、展开(默认展开)
html:p>span>JavaScript 是属于网络的脚本语言!JavaScript被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies,以及更多的应用。JavaScript是因特网上最流行的脚本语言。JavaScript 很容易使用!你一定会喜欢它的!span>......a href="javascript:;">>>收缩a>p>js:这里写代码片原创 2017-08-30 19:19:25 · 2555 阅读 · 0 评论 -
抖动函数封装
js:function shake(obj,attr,endFn){//obj谁来抖动,attr是哪个元素值进行改变(横着抖,竖着抖),endFn回调函数(就是抖完之后干嘛) // 先获得图片原来left值,在此基础上进行抖动;parseInt()是把300px的单位去掉只留数字 var pos = parseInt(getStyle(obj,attr)); var原创 2017-08-24 06:54:29 · 630 阅读 · 0 评论 -
左右抖动之后上下抖动
html:img src="./img/19.jpg" alt="" id="img1">css:img { position: absolute; top: 200px; left: 300px;}js:script src="doMove.js">script>script> window.onload = function(){原创 2017-08-24 06:55:04 · 964 阅读 · 2 评论