JS笔记窗口事件定时器 Locatio对象 history对象

最新推荐文章于 2024-07-30 22:36:34 发布

yogur_father

最新推荐文章于 2024-07-30 22:36:34 发布

阅读量174

点赞数

分类专栏：入门学习文章标签： javascript js

本文链接：https://blog.csdn.net/yogur_father/article/details/110672402

版权

入门学习专栏收录该内容

156 篇文章 3 订阅

订阅专栏

一.页面加载

以前是先写HTML再写JS，但是我们如果使用window.onload = function() {}
或者window.addEventListener("load",function() { } )
这样就能把JS写在HTML之前了

如果使用document.addEventListener("DOMContentLoaded", function() {} ),这个是等标签加载完了（不加载图片等样式），就可以交互了

二.页面大小

window.addEventListener("resize", function() {} )
window.onresize = function() {}

三.定时器

使用定时器1
使用var timeoutID = setTimeout（function() {} , 2000）,其中2000是时间，单位毫秒
清除定时器
使用clearTimeout(timeoutID)
使用定时器2,这个是每过2秒，就调用一次函数，一直循环执行
使用var timeoutID = setInterval(function() {}, 2000)
清除定时器2
使用clearInterval(timeoutID)

倒计时实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 人物表格 </title>
    <link rel="stylesheet" href="style.css">

    
</head>

<body>
    <span class="hour">1</span>
    <span class="min">2</span>
    <span class="sec">3</span>

    <script>
        var hour = document.querySelector(".hour");
        var min = document.querySelector(".min");
        var sec = document.querySelector(".sec");
        var inputTime = +new Date('2021-12-4 21:18:00');  // 返回输入时间，也就是截止时间

        countDown();

        setInterval(countDown, 1000);

        function countDown() {
	        var nowTime = +new Date();             	// 当前时间总毫秒
	        var times = (inputTime - nowTime) / 1000;

            var h = parseInt(times / 60 / 60 % 24);
            h = h < 10 ? '0' + h : h;	
            hour.innerHTML = h;

            var m = parseInt(times / 60 % 60);
            m = m < 10 ? '0' + m : m;	
            min.innerHTML = m;

            var s = parseInt(times % 60);
            s = s < 10 ? '0' + s : s;
            sec.innerHTML = s;	

            console.log("sb");
        }	


    </script>

    

 </body>

 </html>

四.Location对象

这个对象主要用来返回当前页面的URL地址和参数

使用locatio.href来得到地址，也可以用来改变页面地址，实现页面的跳转
使用location.search得到的是前一个页面使用submit提交的数据，然而在表单form中我们要加一个参数action = “跳转页面”，这样才能将数据传输到第二个页面。然而search得到的字符串带“？”，我们要将这个问号截取掉，然后使用split截取掉=，这样就得到了对应name对应的值

第一个页面：
在这里插入图片描述
第二个页面：

使用location.assign(),参数是地址（带http的），这个 可以后退 到前一个页面
使用location.repla（），参数是地址（带http的），这个 不可以后退 到前一个页面
使用location.reload（），表示页面刷新。参数加一个true，表示强制刷新

五.history对象

history.forward()，页面前进
history.back(),页面后退
history.go，参数为1，表示前进一个页面，2就是前进两个页面，-1就是后退一个页面

yogur_father

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS笔记窗口事件定时器 Locatio对象 history对象

一.页面加载以前是先写HTML再写JS，但是我们如果使用window.onload = function() {}或者window.addEventListener("load",function() { } )这样就能把JS写在HTML之前了如果使用document.addEventListener("DOMContentLoaded", function() {} ),这个是等标签加载完了（不加载图片等样式），就可以交互了二.页面大小window.addEventListener("res
复制链接

扫一扫