[武汉|结业弟子]JS-徐恒|2017年04月17日的日报-技能树.IT修真院

发表于： 2017-04-17 21:11:50

1 641

今天完成的事情：

javascript的DOM操作就5个3+2

------------------------------------------------------

onload

实例

页面加载之后立即执行一段 JavaScript函数xx()：

语法

-----------------------------------------------------------------

定义和用法

onclick 事件会在对象被点击时发生。

请注意， onclick 与 onmousedown 不同。单击事件是在同一元素上发生了鼠标按下事件之后又发生了鼠标放开事件时才发生的。

onmousedown是鼠标按下就发生onmouseup是鼠标放开才发生。

onclick就是onmousedown+onmouseup

------------------------------------------

javascript修改CSS属性

var div1 = document.getElementById('div1');

div1.style.backgroundColor="black";

用style然后加css的样式改，后面要加引号"",还有就是与CSS不同是css的background-color但js中去掉了-并且c大写。同理其他样式也是。

实例

var div9 = document.getElementsByClassName("yellow");

---------------------------------

JavaScript Math 对象

Math 对象

Math 对象用于执行数学任务。

使用 Math 的属性和方法的语法：

var pi_value=Math.PI; 这个是属性

var sqrt_value=Math.sqrt(15); 这个事方法

注释：Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，像 Math.sin() 这样的函数只是函数，不是某个对象的方法。您无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法

ceil(x) 对数进行上舍入。

floor(x) 对数进行下舍入。

round(x) 把数四舍五入为最接近的整数

random()返回 0 ~ 1 之间的随机数,可能为0，但总是小于1，[0,1)

实例

// 选出0-8之间的数存好

div3[i] = Math.floor(Math.random()*9);

本文讲解如何使用js生成n到m间的随机数字，主要目的是为后期的js生成验证码做准备。http://www.jb51.net/article/56019.htm

Math.random()函数返回0和1之间的伪随机数，可能为0，但总是小于1，[0,1)

生成n-m，包含n但不包含m的整数：

第一步算出 m-n的值，假设等于w

第二步Math.random()*w

第三步Math.random()*w+n

第四步parseInt(Math.random()*w+n, 10)

生成n-m，不包含n但包含m的整数：

第一步算出 m-n的值，假设等于w

第二步Math.random()*w

第三步Math.random()*w+n

第四步Math.floor(Math.random()*w+n) + 1

生成n-m，不包含n和m的整数：

第一步算出 m-n-2的值，假设等于w

第二步Math.random()*w

第三步Math.random()*w+n +1

第四步Math.round(Math.random()*w+n+1) 或者 Math.ceil(Math.random()*w+n+1)

生成n-m，包含n和m的随机数：

第一步算出 m-n的值，假设等于w

第二步Math.random()*w

第三步Math.random()*w+n

第四步Math.round(Math.random()*w+n) 或者 Math.ceil(Math.random()*w+n)

----------------------------------------------------------------------

参考链接

http://www.jb51.net/article/102109.htm

http://www.cnblogs.com/li-han/p/5964463.html

JS随机生成颜色方法

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<button id="btn1">调用第一种</button>

<button id="bnt2">调用第二种</button>

<button id="btn3">调用第三种</button>

var btn1=document.getElementById('btn1');

btn1.onclick=function(){

document.body.style.background=bg1()

};

var btn2=document.getElementById('bnt2');

btn2.onclick=function(){

document.body.style.background=bg2();

};

var btn3=document.getElementById('btn3');

btn3.onclick=function(){

document.body.style.background=bg3();

};

function bg1(){

return '#'+Math.floor(Math.random()*256).toString(10);

}

function bg2(){

return '#'+Math.floor(Math.random()*0xffffff).toString(16);

}

function bg3(){

var r=Math.floor(Math.random()*256);

var g=Math.floor(Math.random()*256);

var b=Math.floor(Math.random()*256);

return "rgb("+r+','+g+','+b+")";//所有方法的拼接都可以用ES6新特性`其他字符串{$变量名}`替换

}

</script>

</body>

</html>

toString(16);是转换成16进制

我用了第二种

colorLess = Math.floor(Math.random()*0xffffff).toString(16);

--------------------------------------------

定义和用法

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。所以要注意如果用setInterval()的时候要clearInterval()清除上一次循环，防止两次计时。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

语法

setInterval(code,millisec[,"lang"])

明天计划的事情：多次执行代码，发现bug并改正

遇到的问题：虽然解决了颜色的生成，但有时候颜色太接近背景色也不行，要把所有黄色都去掉也不可取，如何做到不取相近颜色。

收获：以上

成果链接http://119.10.57.69:880/jnshu3938/JS/js/task1/task1.html

代码链接https://github.com/xuoutput/js/blob/master/task1/task1.html