javascript有趣,有意思的js代码

谈谈js点击之后发生了什么

    之所以突然想写这个文章，主要是之前看到一篇有意思的博文， 《探究点击事件在JavaScript事件循环中的表现》 ，有趣的地方在于JS点击事件加入回调的 并不是点击事件的回调方法 ，而是点击事件本身 (点击位置等描述点击的) 。

当我们连续点击 button.a 两次的时候，结果却是

明明是点击的 button.a ，为什么会触发 button.b 的事件？

    无论通过 onclick 还是 addEventListener 实现事件绑定，我怀疑绑定机制是一样的，因为在实际测试中，我发现 onclick 执行顺序和 addEventListener 是一样的，也就是什么时候绑定，那么就在第几个执行。

     addEventListener 和 onclick 不同，不是直接给 dom 绑定属性，并且我在 dom 节点上也没有看到任何相应的对象用于保存事件，可见 addEventListener 是不同的机制，参考 EventEmitter ，试着去实现一个 addEventListener

通过上面分析，总结一下

相关问答

Q1: 求js大牛解惑！一个很有趣的问题： "0.14"*100 = 14.000000000000002 " ， 而 0.13"*100 = 13；

这个问题挺复杂的，以前看过一次，但没太看懂，这次整理了一下。有兴趣的同学可以看看。

首先打印出0.14和0.14*100的二进制（程序见参考）：

0.14 : 0 01111111100 0001111010111000010100011110101110000101000111101100

0.14*100 : 0 10000000010 1100000000000000000000000000000000000000000000000001

14.0 : 0 10000000010 1100000000000000000000000000000000000000000000000000

我们可以看到0.14的小数部分出现循环，就像10/3 = 1.33333…一样，所以0.14是有精度丢失的，

比较0.14*100和14.0，0.14*100多了最后一位1。

Java遵循IEEE 754标准来支持浮点数的操作，结合浮点值0.14，我们来看一下，1) 0.14的二进制格式

0 01111111100 0001111010111000010100011110101110000101000111101100.

根据IEEE 754标准，

注：S：符号（0正1负），E，指数，M小数部分。

对0.14格式化后的结果是：

S（1位） E(11位) M (52位)

0 01111111100 0001111010111000010100011110101110000101000111101100

根据计算公式：

我们可以得到e = 01111111100 – 1023 = 1020 – 1023 = -3

m = 1 (隐藏位) + 0.0001111010111000010100011110101110000101000111101100 = 1 +

Long.valueOf("0001111010111000010100011110101110000101000111101100", 2)/ (Math.pow(2, 52) – 1)

= 1.12000000000000013

n = 1.12000000000000013 *2^-3= 1.12000000000000013/8 约 0.14

接下来，第二个问题，2)为什么0.14 * 100 输出14.000000000000002?

由上可知0.14是不精确的，乘100只会扩大这个不精确度。具体的计算过程如下：

100的浮点二进制：

0 10000000101 1001000000000000000000000000000000000000000000000000

跟据浮点乘法规则指数相加，小数相乘，得到

0.14 * 100 =

2^(6-3) //100的指数是6，0.14的指数是-3

*

(1. 1001000000000000000000000000000000000000000000000000*

1. 0001111010111000010100011110101110000101000111101100) //小数部分

= 2^(6-3) * (1 + 0.1001000000000000000000000000000000000000000000000000 +

0.0001111010111000010100011110101110000101000111101100 +

0. 1001000000000000000000000000000000000000000000000000 * 0. 0001111010111000010100011110101110000101000111101100

//方便计算，分解乘数（同1.1 * 1.1 = 1 + 0.1 * 1 + 1 * 0.1 + 0.1*0.1）

这部分我用计算器计算，貌似精度丢失更严重，但可以得知小数部分依然是循环，而不能精确表达。同时，通过查看JDK中Double.toString(d)方法，我们可以看到SUN实现的浮点输出方法。所以最后打印在页面的是14.000000000000002而不是14.0.

故，浮点是用有限二进位接近表达一个数值，不精确是常态，使用要慎重

参考（强烈推荐）

IEEE 754 浮点数的表示精度探讨

解读IEEE标准754：浮点数表示

浮点乘法计算

打印DOUBLE二进制方法：

public class DoubleTest {

@Test

public void test(){

System.out.println("0.5 : " + this.dumpDouble(0.5));

System.out.println("0.14 : " + this.dumpDouble(0.14));

System.out.println("0.14*100 : " + this.dumpDouble(0.14 * 100));

System.out.println("14.0 : " + this.dumpDouble(14.0));

System.out.println("100 : " + this.dumpDouble(100));

Assert.assertEquals("100.0%", getPercentage(0.9999, 2));

Assert.assertEquals("100%", getPercentage(0.9999, 1));

Assert.assertEquals("99.9%", getPercentage(0.999, 2));

Assert.assertEquals("10.1%", getPercentage(0.101, 2));

Assert.assertEquals("10.2%", getPercentage(0.1015, 2));

Assert.assertEquals("11.0%", getPercentage(0.1095, 2));

Assert.assertEquals("0.11%", getPercentage(0.0011, 3));

final int TOTAL = 100000;

double[] data = new double[TOTAL];

for(int i = 0; i TOTAL; i++ ){

data[i] = Math.random();

}

//通过FORMAT，获得百分比，忽略精度

DecimalFormat f = new DecimalFormat("0.##'.0'%");

long start = System.currentTimeMillis();

for(int i = 0; i TOTAL; i++ ){

f.format(data[i]);

}

long end = System.currentTimeMillis();

System.out.println("0 time: " + (end - start));

//基于字符计算百分比

start = System.currentTimeMillis();

for(int i = 0; i TOTAL; i++ ){

this.getPercentage(data[i], 2);

}

end = System.currentTimeMillis();

System.out.println("1 time: " + (end - start));

}

public String dumpDouble(double d) {

StringBuilder b = new StringBuilder();

String bString = Long.toBinaryString(Double.doubleToLongBits(d));

int fillZeros = 64 - bString.length();

for(int i = 0; i fillZeros ; i++){

if(i == 1){

b.append(' ');

}

b.append('0');

}

for(int i = 0; i bString.length(); i++ ){

if((i + fillZeros) == 1 || (i + fillZeros) == 12){

b.append(' ');

}

b.append(bString.charAt(i));

}

return b.toString();

}

char[] next = {'1', '2', '3', '4', '5', '6', '7', '8', '9', '0',};

public String getPercentage(double d, int precision){

StringBuilder b = new StringBuilder(Double.toString(d * 100));

int dot = b.indexOf(".");

if(dot 0 dot + precision b.length()){

char c = b.charAt(dot + precision);

//四舍五入

if(c '4'){

int j = dot + precision - 1;

if(j == dot) {

//跳过小数点

j --;

}

char n = next[b.charAt(j) - '0'];

b.setCharAt(j, n);

//向前进1

while(n == '0' j 0){

j --;

if(j == dot) {

//跳过小数点

j --;

}

//+1

n = next[b.charAt(j) - '0'];

b.setCharAt(j, n);

}

if(j == 0){

b.insert(0, 1);

dot++;

if(precision == 1){

b.setCharAt(dot, '%');

return b.substring(0, dot + 1);

}else{

b.setCharAt(dot + precision, '%');

return b.substring(0, dot + precision + 1);

}

}

}

b.setCharAt(dot + precision, '%');

return b.substring(0, dot + precision + 1);

}

b.append("%");

return b.toString();

}

Q2: JavaScript中的“面向对象”和Java语言中的“面向对象”有何不同？

面向对象三大特征：封装、继承、多态

基于封装，引出了js如何创建对象（class、function、原型+闭包创建私有变量等）。这个java和js都差不多

基于继承，引出了js继承的一些知识点，如extends、super、重写重载、abstract(typescript)、interface(typescript)。js主要是基于原型继承，而java主要是基于extends

多态存在的三个必要条件。重写（继承）、重载、向上转型：其中重写，js支持。重载js不支持，可以通过额外处理来支持向上转型，因为js是弱类型语言，不支持数据类型，ts支持（编译阶段）

也就是说对于多态的支持，目前js只支持一种。

总的来说 js的面向对象支持还没有java语言那么丰富严谨，正是因为这些宽松语法，也让js变得更加有趣。但是面向对象oop的思想是一致的。因为oop思想不是固定语言的特性，而是一种思想。随着js不断的更新迭代，相信其语法特性也更加丰富和严谨。

后话：js目前的发展趋势，好像不在跟随传统语言的oop，有点往函数式编程的路上转向

Q3: 如何用javascript写碰壁反弹效果

碰壁反弹这个效果真的是挺有趣的，看起来就比较的高大上，而且写碰壁反弹成功后，也就能做些网页小游戏了。虽然这么说，但其实这个效果并不难写。只是坑比较的多，很多工作多年的程序员都可能会陷进去。

废话不多说，我们写起来：

1.CSS文件：

style

body{

border-style: solid;

border-color: sliver;

border-width: 5px;

margin-left: 100px;

width:1000px;

height:800px;

}

#screen{

width:800px;

height:600px;

background-color:#272822;

position:relative;

left:100px;

top:100px;

}

#egg{

width:50px;

height:50px;

background-color:red;

position:relative;

}

/style

2.body内容：

body

div id="screen"

div id="egg"

/div

/div

/body

3.JavaScript脚本：

var eggX=0;

var eggY=0;

var directX=1;

var directY=1;

function test(){

eggX+=directX;

eggY+=directY;

egg.style.left=eggX+"px";

egg.style.top=eggY+"px";

if(eggX+egg.offsetWidth=document.getElementById("screen").clientWidth||eggX=0) {

directX=-directX;

}

if(eggY+egg.offsetHeight=document.getElementById("screen").clientHeight||eggY=0){

directY=-directY;

}

}

setInterval("test()",1);

说明：拷贝代码，我们就能看到一个碰壁反弹的方框了。当然如果想要换成图片，直接将div里的内容换掉就OK了。不过这样似乎太美水准了点，在这附上完整代码（有障碍物的）：

!DOCTYPE html

html

head

meta http-equiv="content-type" content="text/html; charset=UTF-8"

title碰壁反弹/title

style

body{

border-style: solid;

border-color: sliver;

border-width: 5px;

margin-left: 100px;

width:1000px;

height:800px;

}

#screen{

width:800px;

height:600px;

background-color:#272822;

position:relative;

left:100px;

top:100px;

}

#egg{

width:50px;

height:50px;

background-color:red;

position:relative;

}

#cock{

position:relative;

left:200px;

top:200px;

width:200px;

height:30px;

background-color: blue;

cursor: pointer;

}

/style

/head

body

div id="screen"

div id="egg"

/div

div id="cock" onmousedown="startDrag(this)" onmousemove="drag(this)" onmouseup="stopDrag(this)"

/div

/div

/body

script type="text/javascript"

var eggX=0;

var eggY=0;

var directX=1;

var directY=1;

function test(){

eggX+=directX;

eggY+=directY;

egg.style.left=eggX+"px";

egg.style.top=eggY+"px";

if(eggX+egg.offsetWidth=document.getElementById("screen").clientWidth||eggX=0) {

directX=-directX;

}

if(eggY+egg.offsetHeight=document.getElementById("screen").clientHeight||eggY=0){

directY=-directY;

}

if(eggY+egg.offsetHeight=document.getElementById("cock").offsetTop(eggX+egg.offsetWidth=200eggX+egg.offsetWidth=400)){

directY=-directY;

}

if((eggY-30)=document.getElementById("cock").offsetTop(eggX+egg.offsetWidth=200eggX+egg.offsetWidth=400)){

directY=-directY;

}

}

setInterval("test()",1);

/script

/html

Q4: 现在JavaScript可以做哪些有趣的事

你好！

JavaScript的诞生首先就是网页脚本

之后的html api让JavaScript有了操作DOM和渲染DOM的能力，于是可以生成整个网页

苹果又加了料，在webkit component里加入了canvas /，于是js可以绘图

后来微软提出的的ajax和新的H5脚本诞生了SPA的概念，于是有了网页应用

我能画画，我能交互，我要成为高达！于是基于JavaScript的网页游戏如雨后春笋

Ryan Dahl这个人想搞点大事情，“要有服务器”，于是有了 NodeJS

希望我的回答能帮助你！

望采纳谢谢?

祝生活愉快！