内置对象
内置对象： 内置对象就是指这个语言自带的一些对象，供开发者使用，这些对象提供了一些常用的或是最基本而必要的功能。
手机买来就能发短信 就能打电话
日期函数 ( Date() )
这个函数 （对象） 可以设置我们本地 日期。 年月日 时分秒
声明日期
var date = new Date();
创造声明一个新的日期函数 赋值给了 date
var arr = new Array();
使用函数
得到 毫秒数 ms s m h
从 1970 年1 月1号 unix 32位 68年
2038 千年虫 64 位
栗子：
var date = new Date();
date.getTime();
date.valueOf(); 得到 距离 1970年的毫秒数
var date = new Date(); // 声明
console.log(date.getTime()); // 提倡使用的
console.log(date.valueOf());
// 直接使用
console.log(Date.now());//获取当前时间的时间戳
console.log(+new Date());//获取当前时间的时间戳`在这里插入代码片`
常用的日期的方法
获取日期和时间
getDate() 获取日 1-31
getDay () 获取星期 0-6
getMonth () 获取月 0-11
getFullYear () 获取完整年份（浏览器都支持）
getHours () 获取小时 0-23
getMinutes () 获取分钟 0-59
getSeconds () 获取秒 0-59
getMilliseconds () 获取当前的毫秒
getTime () 返回累计毫秒数(从1970/1/1午夜)
定时器
很多情况下，一些操作不需要人工干预， 代码自己会不断的去执行 。
而且 会有 时间的绑定 。 比如每隔 5秒钟就去执行一次事件。
我们可以设定时间 让某个动作不断的去执行 。 这个我们再js 里面用定时器来表示。
window.setInterval(执行的函数,间隔时间)
正确的写法:
setInterval(fun, 1000); 1000 ms 毫秒
每隔1秒钟，就去执行一次 fun 这个函数.
setInterval( function(){} , 1000 )
setInterval(“fun()”,1000) 错误的
setInterval(fun(),1000) 错误的
定时器 特别的像 for 循环，但是我 的定时器最大的特点在于， 自动，可以设定时间。
倒计时
好比，今年你多大了 ？
2019 - 1995 24
我们要计算的 倒计时
有一个最终时间 12月12日
有一个现在时间 11月 13日
倒计时 = 用 将来的时间 - 现在的时间
问题： 用 毫秒减去 现在距离 1970年1
将来时间 距离 1970 毫秒数
用将来的毫秒数 - 现在的毫秒数 不断转换就可以了
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
font-size:30px;
text-align: center;
color:red;
}
</style>
<script>
window.onload = function(){
var demo = document.getElementById("demo");
var endTime = new Date("2015/12/12 17:30:00"); // 最终时间
setInterval(clock,1000); // 开启定时器
function clock(){
var nowTime = new Date(); // 一定是要获取最新的时间
// console.log(nowTime.getTime()); 获得自己的毫秒
var second = parseInt((endTime.getTime() - nowTime.getTime()) / 1000);
// 用将来的时间毫秒 - 现在的毫秒 / 1000 得到的 还剩下的秒 可能处不断 取整
// console.log(second);
// 一小时 3600 秒
// second / 3600 一共的小时数 /24 天数
var d = parseInt(second / 3600 / 24); //天数
//console.log(d);
var h = parseInt(second / 3600 % 24) // 小时
// console.log(h);
var m = parseInt(second / 60 % 60);
//console.log(m);
var s = parseInt(second % 60); // 当前的秒
console.log(s);
/* if(d<10)
{
d = "0" + d;
}*/
d<10 ? d="0"+d : d;
h<10 ? h="0"+h : h;
m<10 ? m="0"+m : m;
s<10 ? s="0"+s : s;
demo.innerHTML = "距离抢购时间还剩: "+d+"天 "+h+"小时 "+m+"分钟 "+s+"秒";
}
}
</script>
</head>
<body>
<div id="demo"></div>
</body>
</html>
JavaScript之事件概念和监听事件
1、事件的概念：
JavaScript使我们有能力创建动态页面，网页中的每一个元素都可以产生某些触发JavaScript函数的事件。我们可以认为事件是可以被JavaScript侦测到的一种行为。
2、事件流：
事件流主要分为冒泡型事件和捕获型事件。IE浏览器目前只支持冒泡型事件，而支持标准DOM的浏览器比如火狐、Chrome等两者都支持。
3、使用返回值改变HTML元素的默认行为：
HTML元素大都包含了自己的默认行为，例如：超链接、提交按钮等。我们可以通过在绑定事件中加上"return false"来阻止它的默认行为。
<input type="submit" onclick="return false">//提交表单的默认功能，在事件上写一个return false来阻止它的默认行为
4、通用性的事件监听方法：
（1）绑定HTML元素属性：
<input type="button" value="clickMe" onclick="check(this)">
（2）绑定DOM对象属性：
document.getElementById(“xxx”).οnclick=test;
事件参考：
onabort 图像加载被中断
onblur 元素失去焦点
onchange 用户改变域的内容
onclick 鼠标点击某个对象
ondblclick 鼠标双击某个对象
onerror 当加载文档或图像时发生某个错误
onfocus 元素获得焦点
onkeydown 某个键盘的键被按下
onkeypress 某个键盘的键被按下或按住
onkeyup 某个键盘的键被松开
onload 某个页面或图像被完成加载
onmousedown 某个鼠标按键被按下
onmousemove 鼠标被移动
onmouseout 鼠标从某元素移开
onmouseover 鼠标被移到某元素之上
onmouseup 某个鼠标按键被松开
onreset 重置按钮被点击
onresize 窗口或框架被调整尺寸
onselect 文本被选定
onsubmit 提交按钮被点击
onunload 用户退出页面
例子
<!DOCTYPE html>
<html>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)"
style="background-color: green; width: 120px; height: 20px; padding: 40px; color: #ffffff;">把鼠标移到上面</div>
<script>
function mOver(obj) {
obj.innerHTML = "谢谢"
}
function mOut(obj) {
obj.innerHTML = "把鼠标移到上面"
}
</script>
</body>
</html>
例子2
<!DOCTYPE html>
<html>
<body>
<div onmousedown="mDown(this)" onmouseup="mUp(this)"
style="background-color: green; color: #ffffff; width: 90px; height: 20px; padding: 40px; font-size: 12px;">请点击这里</div>
<script>
function mDown(obj) {
obj.style.backgroundColor = "#1ec5e5";
obj.innerHTML = "请释放鼠标按钮"
}
function mUp(obj) {
obj.style.backgroundColor = "green";
obj.innerHTML = "请按下鼠标按钮"
}
</script>
</body>
</html>
例子3
<!DOCTYPE html>
<html>
<body>
<div onclick="clickMeEvent(this)"
style="background-color: green; color: #ffffff; width: 90px; height: 20px; padding: 40px; font-size: 12px;">点击这里</div>
<script>
function clickMeEvent(obj) {
if (obj.innerHTML == "再见") {
obj.style.display = "none";
} else if (obj.innerHTML == "谢谢") {
obj.innerHTML = "再见";
} else if (obj.innerHTML == "点击这里<br>再次点击这里<br>再点一次") {
obj.innerHTML = "谢谢";
} else if (obj.innerHTML == "点击这里<br>再次点击这里") {
obj.innerHTML = obj.innerHTML + "<br>再点一次";
} else {
obj.innerHTML = obj.innerHTML + "<br>再次点击这里";
}
}
</script>
</body>
</html>
不常用的事件监听：
IE中的监听方法：
5.1.1 [object].attachEvent("事件类型","处理函数");//添加监听
5.1.2 [object].detachEvent("事件类型","处理函数");//取消监听
标准DOM中的事件监听方法：
5.2.1 [object].addEventListener("事件类型","处理函数","冒泡事件或捕获事件");
5.2.2 [object].removeEventListener("事件类型","处理函数","冒泡事件或捕获事件");
//若为false则是冒泡事件
//若为true则是捕获事件
提示：IE监听方法中事件类型和标准DOM监听方法中的事件类型写法有点不同，前者事件类型用“on”开头，
比如：“onclick”、“onmousemove”等，而后者不需要“on”，就是“click”、“mousemove”等。
标准事件流：
6.1 举个例子：冒泡事件（从内至外）
6.2 冒泡事件和捕获事件的比较//捕获事件，即由外到内
访问事件对象：
事件对象封装了事件发生的详细信息，尤其是鼠标、键盘事件。如鼠标事件发生的位置、键盘事件的键盘键等。
IE中的事件对象：
IE中的事件对象是一个隐式可用的全局对象：event，它是window对象的一个属性。
标准DOM的事件对象：
在标准DOM浏览器检测发生了某个事件时，将自动创建一个Event对象，并隐式地将该对象作为事件处理函数的第一个参数传入
//IE中得到事件对象
op.onclick=function(){
var oEvent=window.event;
}
//标准DOM中得到事件对象
op.onclick=function(oEvent){
//作为参数传进来
}
经验之谈：为了兼容不同的浏览器，通常采用下面的方法得到事件对象。
op.onclick=function(oEvent){
if(window.event){
oEvent=window.event;
}
}
1.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
/* var date = new Date();
//毫秒数
console.log(date.getTime());
console.log(date.valueOf());
console.log(date.getFullYear()); //年份
console.log(date.getMonth() + 1); //月份
console.log(date.getDate());
console.log(date.getDay()); //星期几 0是星期天
console.log(date.getHours());
console.log(date.getMinutes());
console.log(date.getSeconds());
*/
//定时器 window.setInterval
window.setInterval(function() {
var date = new Date();
console.log(date.getFullYear() + "-" + (date.getMonth() + 1 + "-" + date.getDate() + " " + date.getHours() + ":" +
date.getMinutes() +
":" + date.getSeconds()))
}, 2000)
</script>
</body>
</html>
2.html:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
font-size: 30px;
text-align: center;
color: red;
}
</style>
<script>
window.onload = function() {
var demo = document.getElementById("demo");
var endTime = new Date("2020/05/17 17:30:00"); // 最终时间
setInterval(clock, 1000); // 开启定时器
//拿到最终时间前去当前时间，用秒数转为 天，时，分，秒
function clock() {
var nowTime = new Date(); // 一定是要获取最新的时间
// console.log(nowTime.getTime()); 获得自己的毫秒
var second = parseInt((endTime.getTime() - nowTime.getTime()) / 1000);
// 用将来的时间毫秒 - 现在的毫秒 / 1000 得到的 还剩下的秒 可能处不断 取整
// console.log(second);
// 一小时 3600 秒
// second / 3600 一共的小时数 /24 天数
var d = parseInt(second / 3600 / 24); //天数
//console.log(d);
var h = parseInt(second / 3600 % 24) // 小时
// console.log(h);
var m = parseInt(second / 60 % 60);
//console.log(m);
var s = parseInt(second % 60); // 当前的秒
console.log(s);
/* if(d<10)
{
d = "0" + d;
}*/
d < 10 ? d = "0" + d : d;
h < 10 ? h = "0" + h : h;
m < 10 ? m = "0" + m : m;
s < 10 ? s = "0" + s : s;
demo.innerHTML = "距离抢购时间还剩: " + d + "天 " + h + "小时 " + m + "分钟 " + s + "秒";
}
}
</script>
</head>
<body>
<div id="demo"></div>
</body>
</html>
3.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body style="width: 100%;height: 1000px;">
<form action="#">
<input type="submit" value="提交按钮" onclick="return false" /><!-- onclick 就是我们的一个事件，点击事件，return false 就是取消默认事件 -->
</form>
<input type="button" id="" value="点击我" onclick="dianjiwo()" />
<input type="button" id="dwa" value="点我啊" />
<input type="text" onchange="xiugai(this)" />
<img id="imgid" src="https://image.diyiyou.com/game/201908/26/1566785951_9.jpg" style="width: 100px;float: none;position: absolute;" />
<div id="div1">div1
<div id="div2">div2
<div id="div3">
div3
</div>
</div>
</div>
</body>
<script>
function dianjiwo() {
alert("点击我")
}
function xiugai(obj) {
console.log("我被修改了，修改的内容是" + obj.value);
}
window.onload = function() {
document.getElementById("dwa").onclick = function() {
alert("点我啊")
};
}
/* var imgid = document.getElementById("imgid");
document.body.onmousemove = function(obj) {
imgid.style.left = obj.pageX + "px";
imgid.style.top = obj.pageY + "px";
}
*/
//绑定事件
document.getElementById("div1").addEventListener("click",function(){
console.log("我是div1");
},true);
//false是冒泡事件,从里面到外按触发 事件
/* 我是div3
我是div2
我是div1 */
//true是捕获事件，从外面到里面触发事件
/* 我是div1
我是div2
我是div3 */
document.getElementById("div2").addEventListener("click",function(){
console.log("我是div2");
},true);
document.getElementById("div3").addEventListener("click",function(){
console.log("我是div3");
},true);
</script>
</html>
1044
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
