目录
Date时间
例子：获取当前时间，自己设置一个时间
//获取当前时间
var d1 = Date()
console.log(d1)
//设置一个时间，使用-来设置时间，小时没设置会默认为8点，中国属于东8区
var d2 = new Date("2013-10-03")
console.log(d2)
运行结果：
例子：设置时间 2016年1月5日14时30分
//设置一个时间
var d = new Date(2016,0,5,14,30)
console.log(d)
运行结果：
例子：时间模式
var d =new Date()
var d1 = d.toLocaleDateString()
var d2 = d.toLocaleString()
var d3 = d.toLocaleTimeString()
console.log(d1)
console.log(d2)
console.log(d3)
运行结果：
BOM浏览器对象模型
是一个用于访问浏览器和计算机屏幕对象的集合。我们可以通过全局对象window访问这些对象
window.document
页面文档集合
window.frames
浏览器内所有框架的集合
window.navigator
浏览器内的描述信息及其功能信息的对象
window.screen
提供浏览器以外的环境信息
window.location
- href属性 控制浏览器地址栏的内容
- reload( ) 刷新页面
- reload(true) 刷新页面，不带缓存
- assign( ) 加载新的页面
- replace() 加载新的页面（注意:不会再浏览器的历史记录表中留下记录)
window.history
浏览器的历史记录
window.history.length 获取历史记录的长度
back() 上一页
forward() 下一页
go(num) num<0时，跳转到自己后方的第num个记录。num>0时，跳转到自己前方的第num个记录。
例子：
//页面文档集合
console.log(window.document)
//浏览器内所有框架的集合
console.log(window.frames)
//浏览器内的描述信息及其功能信息的对象
console.log(window.navigator)
//提供浏览器以外的环境信息
console.log(window.screen)
console.log(window.location)
console.log(window.history)
运行结果：
例子：页面滚动
HTML:需要给body设置一个高度
<body style="height: 3000px;">
<div style="width: 100px;height: 100px; background-color: red;">
</div>
</body>
JavaScript：
window.onscroll = function(){
console.log('发生了滚动')
}
运行结果：
加载滚动高度
window.onscroll = function(){
console.log('发生了滚动')
var a = document.documentElement.scrollTop || document.body.scrollTop
console.log(a)
}
例子：定时器
每两秒执行一次
var time = window.setInterval(function(){
console.log('what happen after 2 minus')
},2000)
运行结果：
例子：清除定时器，定时器清除之后不能恢复
function fun(){
//清除定时器
window.clearInterval(time)
}
<body style="height: 3000px;">
<button onclick="fun()">清除</button>
</body>
运行结果：
DOM节点分类
例子：获取元素节点
<body style="height: 3000px;">
<input id="in" type="text" placeholder="请输入你的名字" />
<button onclick="fun()">改变</button>
<script type="text/javascript">
var jsinput = document.getElementById("in")
console.log(jsinput.placeholder)
function fun(){
jsinput.placeholder = 'your name is joker'
console.log(jsinput.placeholder)
}
</script>
</body>
运行结果：
例子：给节点增加一个属性或删除一个属性
<body style="height: 3000px;">
<input id="in" type="text" placeholder="请输入你的名字" />
<button onclick="fun()">改变</button>
<script type="text/javascript">
var jsinput = document.getElementById("in")
console.log(jsinput.placeholder)
function fun(){
//给input增加一个属性
jsinput.setAttribute('what','okok')
//给input移除一个属性
jsinput.removeAttribute('placeholder')
console.log(jsinput)
}
</script>
</body>
运行结果：
例子：移动的div
使用定时器和改变节点属性的方法
<body style="height: 3000px;position: relative;">
<div id="box" style="width: 100px;height: 100px;background-color: yellow;position: absolute;"></div>
<button onclick="move()" style="margin-top: 200px;"> 移动 </button>
<script type="text/javascript">
var div = document.getElementById('box')
function move(){
setInterval(function(){
var a = parseInt(window.getComputedStyle(div,null).left)
div.style.left = a + 15 + 'px'
},1000)
}
</script>
</body>
运行结果：
一起学习，一起进步 -.- ，如有错误，可以发评论
