弹框，滚动窗口，定时器，history对象

Posted 2020-12-07 111wdh

弹框的三种方式

window.alert("你好")；//警示弹框

提示输入框

var num=window.prompt("请输入一个数：");

document.write(num);

确定取消框

var kuang=window.confirm("你确定要退出吗")；

document.write(kuang);

if(kuang){              //kuang=true

window.close();    //关闭浏览器

}

滚动当前窗口的html文档：scrollBy，scrollTo

<input type="button" value="坐标移动by" onclick="myby()" />

<input type="button" value="坐标移动to" onclick="myto()" />

function myby(){

window.scrollBy(50,50);      //点击一下向下走50px

}

function myby(){

window.scrollTo(50,50);      //点击后滚动到指定坐标

}

定时器：设置定时器setInterval();（调用的方法名，每隔多少毫秒调用一次）

        删除定时器clearInterval();(需要清除的定时器的名字)；

var i=0;

var j=setInterval(function(){

document.write("hello"+i);

i++;

if(i==10){

clearInterval(j);

}

},1000)           每隔一秒钟打印一次hello1-9，当i=10时不再打印

 

设置自动更新时间

<div id="q"></div>

var dingshiqi=setInterval(function(){

var date=new Date();

var hour=date.getHours();

var min=date.getMinutes();

var sec=date.getSeconds();

var str=hour+":"+min+":"+sec;

document.getElementById("q").innerHTML=str;

},1000)；//自动刷新

 

history对象

back（）；     后退到上一个页面

forward（）；    前进到下一个页面

go（intValue）；     可制定前进后退多个页面，正则进，负则退

第一个页面
<a href="page2.html">第二个页面</a>
<a href="javascript:history.forward()">前进</a>    跳转下一个页面

第二个页面
<a href="page3.html">第三个页面</a>
<a href="javascript:history.go(1)">前进</a>     跳转到第三个
<a href="javascript:history.go(-1)">后退</a>     跳转到第一个

第三个页面

<a href="javascript:history.back()">后退</a>     返回到第二个页面

前进后退键

 

location对象href：文档所在地址的url地址

可用于任何标签，跳转别的页面

<div class="" onclick="jump()" style="width: 100px;height: 100px;background-color: aqua;cursor: pointer;"><!-- 鼠标放上变小手cursor: pointer; -->
跳转
</div>

function jump(){
location.href="https://www.baidu.com";
}                                        点击div时跳转百度页面