JavaScript 第六天
1.1 BOM 操作
称之为 浏览器对象模型
其实就是操作js中内置的window对象 对浏览器窗口以及内容进行操作(操作包括浏览器各种信息的增删改查)
这个是前端学习的重点内容,对我们java的来说这节课不重要 只需要记住一句代码
1.2 BOM 中的地址栏对象
总结: 浏览器窗口 要显示某个网页的时候 可以怎样操作
A 在地址栏手动输入网址
B a标签 <a href="http://www.taobao.com">haha</a>
C form表单 <form action="http://www.taobao.com" >
D js代码跳转到指定网址
<body>
<button onclick="jump()" >哈哈</button>
<script type="text/javascript">
function jump(){
//window.location.href = "http://www.taobao.com";
//window.location.replace( "http://www.taobao.com" );
window.location.reload();
}
</script>
</body>
1.3 定时器
js中功能函数,可以在设定的时间间隔之内重复调用某个函数。
<script type="text/javascript">
/* 匿名函数 */
setInterval( function(){
console.log(666);
} , 1000 );
</script>
1.4 特效 1-- 时钟
当前时间:
<div id="foo"></div>
<script type="text/javascript">
setInterval( function(){
/* 获取当前时间对象 */
var a = new Date();
var y = a.getFullYear();
var m = a.getMonth();
//var d1 = a.getDay();
var d2 = a.getDate();
var h = a.getHours();
var m1 = a.getMinutes();
var s = a.getSeconds();
foo.innerHTML = y+"年"+ (m+1)+"月"+ d2 +"日" + h + ":" + m1 + ":" + s;
} , 1000 );
</script>
1.5 特效2 帧动画
<img src="img/pie_0.jpg" width="400" id="tom">
<button onclick="pie()">丢球</button>
<script type="text/javascript">
function pie() {
var i = 1;
setInterval( function(){
tom.src = "img/pie_"+i%24+".jpg";
i++;
} ,100 );
}
</script>
A 一组动画完成的时候 需要停止动画
B 一组动画没有完成的时候 重复点击没有效果
<body>
<img src="img/pie_0.jpg" width="400" id="tom">
<button onclick="pie()">丢球</button>
<script type="text/javascript">
var t = null;
function pie() {
/* 判断是否有定时器在执行 */
if(t == null){
var i = 1;
t