码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-06-01 14:08:01      阅读:61      评论:0      收藏:0      [点我收藏+]

标签:class   百度   inner   element   alert   定时   打印   document   输入   

弹框的三种方式

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时跳转百度页面

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

标签:class   百度   inner   element   alert   定时   打印   document   输入   

原文地址:https://www.cnblogs.com/111wdh/p/13024671.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!