前端之javascript2
Posted yifchan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端之javascript2相关的知识，希望对你有一定的参考价值。
js组成和标签获取元素
javascript组成
1、ECMAscript javascript的语法（变量、函数、循环语句等语法）
2、DOM 文档对象模型 操作html和css的方法(比如通过id或者标签来获取元素并赋予颜色之类的样式)
3、BOM 浏览器对象模型 操作浏览器的一些方法(比如控制浏览器弹出窗口或者控制台打印数据)
标签获取元素
获取元素的第二种方法
document.getElementsByTagName(‘‘),获取的是一个选择集，不是数组，但是可以用下标的方式操作选择集里面的dom元素。
关于性能，如果在循环时，有一个固定的值每次都要去查询一次，应该将那个固定的值先在外面定义好；
标签获取元素示例-各行换色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>通过标签获取元素</title> <script type="text/javascript"> window.onload = function () // 通过标签名称获取li元素，生成一个选择集，赋值给aLi var aLi = document.getElementsByTagName(‘li‘); // 读取选择集内元素的个数 //alert(aLi.length); // 弹出13 var iLen = aLi.length; //给一个li设置背景色 //aLi[0].style.backgroundColor = ‘gold‘; // 不能给选择集设置样式属性 //aLi.style.backgroundColor = ‘gold‘; /* 同时给所有的li加背景色 for(var i=0;i<iLen;i++) aLi[i].style.backgroundColor = ‘gold‘; */ var oUl = document.getElementById(‘list1‘); var aLi2 = oUl.getElementsByTagName(‘li‘); var iLen2 = aLi2.length; for (var i = 0; i < iLen2; i++) if (i % 2 == 0) aLi2[i].style.backgroundColor = ‘gold‘; </script> </head> <body> <ul id="list1"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> <ul id="list2"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </body> </html>
字符串操作方法
js操作数据的能力还是没有后端强，所以一般是由后端处理好数据后，再传给前端，但前端有时候也会需要自己处理数据；
字符串处理方法
- 1、字符串合并操作：“ + ”
- 2、parseInt() 将数字字符串转化为整数
- 3、parseFloat() 将数字字符串转化为小数
- 4、split() 把一个字符串分隔成字符串组成的数组
- 5、charAt() 获取字符串中的某一个字符
- 6、indexOf() 查找字符串是否含有某字符
- 7、substring() 截取字符串 用法： substring(start,end)（不包括end）
- 8、toUpperCase() 字符串转大写
- 9、toLowerCase() 字符串转小写
字符串反转
var str = ‘asdfj12jlsdkf098‘; var str2 = str.split(‘‘).reverse().join(‘‘); alert(str2);
字符串操作方法实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字符串的处理方法</title> <script type="text/javascript"> var iNum01 = 12; var sNum02 = ‘24‘; var sTr = ‘abc‘; // 数字和字符串相加等同于字符串拼接 //alert(iNum01+sNum02); // 弹出 1224 //alert(sNum02+sTr); // 弹出 24abc var sTr02 = ‘12.35‘; //将字符串的小数转化成整数 //alert(parseInt(sTr02)); // 弹出12 //将字符串的小数转化成小数 //alert(parseFloat(sTr02)); var sTr03 = ‘2017-4-22‘; var aRr = sTr03.split("-"); //alert(aRr); // 弹出[‘2017‘,‘4‘,‘22‘]; var aRr2 = sTr03.split(""); //alert(aRr2); // 弹出[‘2‘,‘0‘,‘1‘,‘7‘,‘-‘,‘4‘,‘-‘,‘2‘,‘2‘] var sTr04 = ‘#div‘; var sTr05 = sTr04.charAt(0); // alert(sTr05); 弹出 # var sTr06 = ‘abcdef microsoft asldjfl‘; var iNum03 = sTr06.indexOf(‘microsoft‘); var iNum04 = sTr06.indexOf(‘yahei‘); //alert(iNum03); // 存在 弹出字符串对应的索引值 7 //alert(iNum04); // 不存在 弹出 -1 var sTr07 = ‘abcdef123456edfg‘; var sTr08 = sTr07.substring(6, 12); var sTr09 = sTr04.substring(1); //alert(sTr08); //alert(sTr09); var sTr10 = ‘abcdef‘; var sTr11 = sTr10.toUpperCase(); alert(sTr11); var sTr12 = ‘1234j3290850ljdlsjlfajdlkskdfj‘; var sTr13 = sTr12.split(‘‘).reverse().join(‘‘); alert(sTr13); </script> </head> <body> </body> </html>
定时器
定时器在javascript中的作用
- 1、制作动画
- 2、异步操作
- 3、函数缓冲与节流
定时器类型及语法
/*
定时器：
setTimeout 只执行一次的定时器
clearTimeout 关闭只执行一次的定时器
setInterval 反复执行的定时器
clearInterval 关闭反复执行的定时器
*/
var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);
/*
clearTimeout(time1);
clearInterval(time2);
*/
function myalert()
alert(‘ok!‘);
定时器简单实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> function myalert() alert(‘hello world!‘); // 只执行一次的定时器,第一个参数是函数名，或者是匿名函数，第二个参数是时间，单位是毫秒，不写单位 //var timer01 = setTimeout(myalert,2000); // 关闭只执行一次的定时器 //clearTimeout(timer01); // 反复执行的定时器 //var timer02 = setInterval(myalert,1000); 改成下面匿名函数的写法： var timer02 = setInterval(function() alert(‘hello world!‘); ,1000) //关闭反复执行的定时器 //clearInterval(timer02); </script> </head> <body> </body> </html>
定时器盒子移动实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload = function() var oDiv = document.getElementById(‘div1‘); var iLeft = 0; /* var timer = setInterval(moving,30); function moving() iLeft += 3; oDiv.style.left = iLeft + ‘px‘; */ var timer = setInterval(function() iLeft += 3; oDiv.style.left = iLeft + ‘px‘; if(iLeft>700) clearInterval(timer); ,30); </script> <style type="text/css"> .box width:200px; height:200px; background-color:gold; position:absolute; left:0; top:100px; </style> </head> <body> <div id="div1" class="box"></div> </body> </html>
盒子往复运动动画示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload = function () var oDiv = document.getElementById(‘div1‘); var iLeft = 0; var iSpeed = 3; /* var timer = setInterval(moving,30); function moving() iLeft += 3; oDiv.style.left = iLeft + ‘px‘; */ var timer = setInterval(function () iLeft += iSpeed; oDiv.style.left = iLeft + ‘px‘; if (iLeft > 700) iSpeed = -3; if (iLeft < 0) iSpeed = 3; , 20); </script> <style type="text/css"> .box width: 200px; height: 200px; background-color: gold; position: absolute; left: 0; top: 100px; </style> </head> <body> <div id="div1" class="box"></div> </body> </html>
无缝滚动示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝滚动</title> <style type="text/css"> * margin: 0; padding: 0; .list_con width: 1000px; height: 200px; border: 1px solid #000; margin: 10px auto 0; background-color: #f0f0f0; position: relative; overflow: hidden; .list_con ul list-style: none; width: 2000px; height: 200px; position: absolute; left: 0; top: 0; .list_con li width: 180px; height: 180px; float: left; margin: 10px; .btns_con width: 1000px; height: 30px; margin: 50px auto 0; position: relative; .left, .right width: 30px; height: 30px; background-color: gold; position: absolute; left: -40px; top: 124px; font-size: 30px; line-height: 30px; color: #000; font-family: ‘Arial‘; text-align: center; cursor: pointer; border-radius: 15px; opacity: 0.5; .right left: 1010px; top: 124px; </style> <script type="text/javascript"> window.onload = function () var oDiv = document.getElementById(‘slide‘); var oBtn01 = document.getElementById(‘btn01‘); var oBtn02 = document.getElementById(‘btn02‘); //通过标签获取元素，获取的是选择集，加上下标才能获取到元素 var oUl = oDiv.getElementsByTagName(‘ul‘)[0]; var iLeft = 0; var iSpeed = -2; var iNowspeed = 0; //将ul里面的内容复制一份，整个ul里面就包含了10个li oUl.innerHTML = oUl.innerHTML + oUl.innerHTML; function moving() iLeft += iSpeed; // 当ul向左滚动到第5个li时，瞬间将整个ul拉回到初始位置 if (iLeft < -1000) iLeft = 0; //当ul在起始位置往右滚动时候，瞬间将整个ul拉回到往左的第5个li的位置 if (iLeft > 0) iLeft = -1000; oUl.style.left = iLeft + ‘px‘; var timer = setInterval(moving, 30); oBtn01.onclick = function () iSpeed = -2; ; oBtn02.onclick = function () iSpeed = 2; ; // 当鼠标移入的时候 oDiv.onmouseover = function () iNowspeed = iSpeed; iSpeed = 0; ; // 当鼠标移出的时候 oDiv.onmouseout = function () iSpeed = iNowspeed; </script> </head> <body> <div class="btns_con"> <div class="left" id="btn01"><</div> <div class="right" id="btn02">></div> </div> <div class="list_con" id="slide"> <ul> <li><a href=""><img src="images/goods001.jpg" alt="商品图片"></a></li> <li><a href=""><img src="images/goods002.jpg" alt="商品图片"></a></li> <li><a href=""><img src="images/goods003.jpg" alt="商品图片"></a></li> <li><a href=""><img src="images/goods004.jpg" alt="商品图片"></a></li> <li><a href=""><img src="images/goods005.jpg" alt="商品图片"></a></li> </ul> </div> </body> </html>
定时器制作时钟示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload = function () var oDiv = document.getElementById(‘div1‘); function fnTimego() var sNow = new Date(); // 获取年份 var iYear = sNow.getFullYear(); // 获取月份，月份是从0到11，0表示一月，11表示十二月 var iMonth = sNow.getMonth() + 1; var iDate = sNow.getDate(); // 星期是从0到6,0表示星期天 var iWeek = sNow.getDay(); var iHour = sNow.getHours(); var iMinute = sNow.getMinutes(); var iSecond = sNow.getSeconds(); var sTr = ‘当前时间是：‘ + iYear + ‘年‘ + iMonth + ‘月‘ + iDate + ‘日 ‘ + fnToweek(iWeek) + ‘ ‘ + fnTodou(iHour) + ‘:‘ + fnTodou(iMinute) + ‘:‘ + fnTodou(iSecond); oDiv.innerHTML = sTr; // 刚开始调用一次，解决刚开始1秒钟空白的问题 fnTimego(); setInterval(fnTimego, 1000); function fnToweek(n) if (n == 0) return ‘星期日‘; else if (n == 1) return ‘星期一‘; else if (n == 2) return ‘星期二‘; else if (n == 3) return ‘星期三‘; else if (n == 4) return ‘星期四‘; else if (n == 5) return ‘星期五‘; else return ‘星期六‘; function fnTodou(n) if (n < 10) return ‘0‘ + n; else return n; </script> <style type="text/css"> div text-align: center; font-size: 30px; color: red; </style> </head> <body> <div id="div1"></div> </body> </html>
定时器制作倒计时示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload = function () var oDiv = document.getElementById(‘div1‘); function fnTimeleft() //实际开发中需要读取后台的时间，可以通过ajax来读取 var sNow = new Date(); // 未来时间：4月30日晚24点 var sFuture = new Date(2017, 3, 30, 24, 0, 0); //计算还有多少秒 var sLeft = parseInt((sFuture - sNow) / 1000); //计算还剩多少天 var iDays = parseInt(sLeft / 86400); // 计算还剩多少小时 var iHours = parseInt((sLeft % 86400) / 3600); // 计算还剩多少分 var iMinutes = parseInt(((sLeft % 86400) % 3600) / 60); // 计算还剩多少秒 var iSeconds = sLeft % 60; var sTr = ‘距离5月1日还剩：‘ + iDays + ‘天‘ + fnTodou(iHours) + ‘时‘ + fnTodou(iMinutes) + ‘分‘ + fnTodou(iSeconds) + ‘秒‘; oDiv.innerHTML = sTr; fnTimeleft(); setInterval(fnTimeleft, 1000); function fnTodou(n) if (n < 10) return ‘0‘ + n; else return n; </script> </head> <style type="text/css"> div text-align: center; font-size: 30px; color: pink; </style> <body> <div id="div1"></div> </body> </html>
倒计时关闭弹框/丐版示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .menu height: 80px; background-color: gold; position: fixed; width: 960px; top: 0px; left: 50%; margin-left: -480px; p text-align: center; .popup width: 500px; height: 300px; border: 1px solid #000; background-color: #fff; position: fixed; left: 50%; margin-left: -251px; top: 50%; margin-top: -151px; z-index: 9999; .popup h2 background-color: gold; margin: 10px; height: 40px; .mask position: fixed; width: 100%; height: 100%; background-color: #000; left: 0; top: 0; opacity: 0.5; z-index: 9998; .pop_con display: none; </style> </head> <body> <div class="menu">菜单文字</div> <div class="pop_con" style="display: block"> <div class="popup"> <h2>弹框的标题</h2> <br> <br> <br> <p>还有5秒钟关闭弹框</p> </div> <div class="mask"></div> </div> <input type="button" name="" value="弹出弹框"> <p>网页文字</p> <br/> <br/> <br/> <br/> <br/> <br/> <br/> ... <p>网页文字</p> </body> </html>
变量作用域
变量作用域指的是变量的作用范围，javascript中的变量分为全局变量和局部变量。
- 1、全局变量：在函数之外定义的变量，为整个页面公用，函数内部外部都可以访问。
- 2、局部变量：在函数内部定义的变量，只能在定义该变量的函数内部访问，外部无法访问。
<script type="text/javascript">
//全局变量
var a = 12;
function myalert()
//局部变量
var b = 23;
alert(a);
alert(b);
myalert(); //弹出12和23
alert(a); //弹出12
alert(b); //出错
</script>
变量作用域示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> //函数外部定义的是全局变量，函数内部和外部都可以访问 var iNum01 = 12; // 重复定义，后面的会覆盖前面的值 //var iNum01 = 14; function myalert() //var iNum01 = 24; // 函数内部定义的是局部变量，函数内部可以访问，外部不能访问 var iNum02 = 36; alert(iNum01); iNum01 += 10; function myalert02() alert(iNum01); myalert(); // 弹出 12 myalert02(); // 弹出 22 //alert(iNum02); 出错！ </script> </head> <body> </body> </html>
封闭函数
封闭函数是javascript中匿名函数的另外一种写法，创建一个一开始就执行而不用命名的函数。
一般定义的函数和执行函数：
function changecolor()
var oDiv = document.getElementById(‘div1‘);
oDiv.style.color = ‘red‘;
changecolor();
封闭函数：
(function()
var oDiv = document.getElementById(‘div1‘);
oDiv.style.color = ‘red‘;
)();
还可以在函数定义前加上“~”和“!”等符号来定义匿名函数
!function()
var oDiv = document.getElementById(‘div1‘);
oDiv.style.color = ‘red‘;
()
封闭函数示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="js/main.js"></script> <script type="text/javascript"> /* function myalert() alert(‘hello world!‘); myalert(); 转换成封闭函数的写法： */ /*(function() alert(‘hello world!‘); )();*/ //封闭函数的第二种写法： /*!function() alert(‘hello world!‘); ();*/ ~function () alert(‘hello world!‘); (); var iNum01 = 12; function myalert02() alert(‘hello world!‘); // 在封闭函数前加一个“;” , 可以避免js压缩时候出错。 (function () var iNum01 = 24; function myalert02() alert(‘hello hello!‘); alert(iNum01); myalert02(); )(); alert(iNum01); myalert02(); </script> </head> <body> </body> </html>
闭包
什么是闭包
函数嵌套函数，内部函数可以引用外部函数的参数和变量，参数和变量不会被垃圾回收机制收回
function aaa(a) var b = 5; function bbb() a++; b++; alert(a); alert(b); return bbb; var ccc = aaa(2); ccc(); ccc();
改写成封闭函数的形式：
var ccc = (function(a) var b = 5; function bbb() a++; b++; alert(a); alert(b); return bbb; )(2); ccc(); ccc();
用处
1、将一个变量长期驻扎在内存当中，可用于循环中存索引值
<script type="text/javascript"> window.onload = function() var aLi = document.getElementsByTagName(‘li‘); for(var i=0;i<aLi.length;i++) (function(i) aLi[i].onclick = function() alert(i); )(i); </script> ...... <ul> <li>111</li> <li>222</li> <li>333</li> <li>444</li> <li>555</li> </ul>
2、私有变量计数器，外部无法访问，避免全局变量的污染
<script type="text/javascript"> var count = (function() var a = 0; function add() a++; return a; return add; )() count(); count(); var nowcount = count(); alert(nowcount); </script>
内置对象
1、document
document.grtElementById document.grtElementByTagName document.referrer //获取上一个跳转页面的地址(需要服务器环境)
2、location
window.location.href //获取或者重定url地址 window.location.search //获取地址参数部分 window.location.hash //获取页面锚点或者叫哈希值
3、Math
Math.random 获取0-1的随机数
Math.floor 向下取整
Math.ceil 向上取整
location的属性1示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload = function () // 存储上一个页面的地址： //var sUrl = document.referrer; var oBtn = document.getElementById(‘btn01‘); oBtn.onclick = function () //window.location.href = sUrl; window.location.href = "http://www.baidu.com"; </script> </head> <body> <input type="button" name="" value="跳转" id="btn01"> </body> </html>
location的属性2示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload = function () var oBody = document.getElementById(‘body01‘); var sData = window.location.search; alert(sData); var sHash = window.location.hash; alert(sHash); if (sData != ‘‘) var aRr = sData.split("="); var iNum = aRr[1]; if (iNum == 1) oBody.style.backgroundColor = ‘gold‘; else if (iNum == 2) oBody.style.backgroundColor = ‘green‘; else oBody.style.backgroundColor = ‘pink‘; </script> </head> <body id="body01"> <h1>007页面</h1> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <a href="007window-location的属性02.html">链接到007页面</a><br><br> <a href="007window-location的属性02.html?aa=1">链接到金色背景007页面</a><br><br> <a href="007window-location的属性02.html?aa=2">链接到绿色背景007页面</a> <br><br> <a href="007window-location的属性02.html?aa=3">链接到粉色背景007页面</a> <br><br> </body> </html>
math对象示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> var iPi = Math.PI; var arr = []; for (var i = 0; i < 100; i++) // Math.random 只能返回从0到1之间的随机数，不包括0，也不包括1 var iNum = Math.random(); arr.push(iNum); //alert(arr); console.log(arr); //向下取整，去掉小数部分 alert(Math.floor(5.6)); // 弹出5 //向上取整，去掉小数部分，整体加1 alert(Math.ceil(5.2)) // 10 - 20 之间的随机数 var iN01 = 10; var iN02 = 20; var arr2 = []; for (var i = 0; i < 40; i++) // 生成从10到20的随机数 var iNum02 = Math.floor((iN02 - iN01 + 1) * Math.random()) + iN01; arr2.push(iNum02); console.log(arr2); </script> </head> <body> </body> </html>
面向对象
面向过程与面向对象编程
1、面向过程：所有的工作都是现写现用。
2、面向对象：是一种编程思想，许多功能事先已经编写好了，在使用时，只需要关注功能的运用，而不需要这个功能的具体实现过程。
javascript对象
将相关的变量和函数组合成一个整体，这个整体叫做对象，对象中的变量叫做属性，变量中的函数叫做方法。javascript中的对象类似字典。
创建对象的方法
1、单体
<script type="text/javascript"> var Tom = name : ‘tom‘, age : 18, showname : function() alert(‘我的名字叫‘+this.name); , showage : function() alert(‘我今年‘+this.age+‘岁‘); </script>
2、工厂模式
<script type="text/javascript"> function Person(name,age,job) var o = new Object(); o.name = name; o.age = age; o.job = job; o.showname = function() alert(‘我的名字叫‘+this.name); ; o.showage = function() alert(‘我今年‘+this.age+‘岁‘); ; o.showjob = function() alert(‘我的工作是‘+this.job); ; return o; var tom = Person(‘tom‘,18,‘程序员‘); tom.showname(); </script>
2、构造函数
<script type="text/javascript">
function Person(name,age,job)
this.name = name;
this.age = age;
this.job = job;
this.showname = function()
alert(‘我的名字叫‘+this.name);
;
this.showage = function()
alert(‘我今年‘+this.age+‘岁‘);
;
this.showjob = function()
alert(‘我的工作是‘+this.job);
;
var tom = new Person(‘tom‘,18,‘程序员‘);
var jack = new Person(‘jack‘,19,‘销售‘);
alert(tom.showjob==jack.showjob);
</script>
3、原型模式
<script type="text/javascript">
function Person(name,age,job)
this.name = name;
this.age = age;
this.job = job;
Person.prototype.showname = function()
alert(‘我的名字叫‘+this.name);
;
Person.prototype.showage = function()
alert(‘我今年‘+this.age+‘岁‘);
;
Person.prototype.showjob = function()
alert(‘我的工作是‘+this.job);
;
var tom = new Person(‘tom‘,18,‘程序员‘);
var jack = new Person(‘jack‘,19,‘销售‘);
alert(tom.showjob==jack.showjob);
</script>
4、继承
<script type="text/javascript">
function fclass(name,age)
this.name = name;
this.age = age;
fclass.prototype.showname = function()
alert(this.name);
fclass.prototype.showage = function()
alert(this.age);
function sclass(name,age,job)
fclass.call(this,name,age);
this.job = job;
sclass.prototype = new fclass();
sclass.prototype.showjob = function()
alert(this.job);
var tom = new sclass(‘tom‘,19,‘全栈工程师‘);
tom.showname();
tom.showage();
tom.showjob();
</script>
调试程序的方法
1、alert
2、console.log
3、document.title
调试js方法示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload = function () var oBody = document.getElementById(‘body01‘); var iNum01 = 12; // alert 会阻止程序的运行 //alert(iNum01); console.log(iNum01); oBody.style.backgroundColor = ‘gold‘; var iNum02 = 24; var iNum03 = 36; //alert(iNum02); console.log(iNum02); setInterval(function () iNum03++; //console.log(iNum03); document.title = iNum03; , 100) </script> </head> <body id="body01"> </body> </html>
类型转换
1、直接转换 parseInt() 与 parseFloat()
alert(‘12‘+7); //弹出127 alert( parseInt(‘12‘) + 7 ); //弹出19 alert( parseInt(5.6)); // 弹出5 alert(‘5.6‘+2.3); // 弹出5.62.3 alert(parseFloat(‘5.6‘)+2.3); // 弹出7.8999999999999995 alert(0.1+0.2); //弹出 0.3000000000000004 alert((0.1*100+0.2*100)/100); //弹出0.3 alert((parseFloat(‘5.6‘)*100+2.3*100)/100); //弹出7.9
2、隐式转换 “==” 和 “-”
if(‘3‘==3) alert(‘相等‘); // 弹出‘相等‘ alert(‘10‘-3); // 弹出7
3、NaN 和 isNaN
alert( parseInt(‘123abc‘) ); // 弹出123 alert( parseInt(‘abc123‘) ); // 弹出NaN
以上是关于前端之javascript2的主要内容，如果未能解决你的问题，请参考以下文章