JavaScript（三十四）——date时间、BOM浏览器对象模型、DOM节点分类

Date时间

BOM浏览器对象模型

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>

运行结果：

一起学习，一起进步 -.- ，如有错误，可以发评论