BOM对象案例

最新推荐文章于 2024-08-16 17:01:48 发布

晚枫~

最新推荐文章于 2024-08-16 17:01:48 发布

阅读量221

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js练习文章标签： elementui vue.js javascript

本文链接：https://blog.youkuaiyun.com/IT913913/article/details/123066046

js练习专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何使用JavaScript实现1.5秒后自动跳转页面的倒计时效果，并详细展示了如何在两个页面间通过URL参数传递数据。在text1页面中，用户输入的数据通过表单GET方式提交到text2页面。text2页面接收到参数后，将其显示在页面上，实现了数据的跨页面传递。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.5秒钟之后自动跳转页面

（利用定时器做倒计时效果；使用location.href实现页面跳转，封装函数并调用函数防止第一次刷新页面有空白。）

<div></div>
    <script>
        var div = document.querySelector('div');
        var timer = 5;
        coun();
        setInterval(coun,1000);
        function coun(){
            if(timer == 0){
                location.href = "http://asdf.cn";
            }else{
                div.innerHTML = '您将在'+timer+'秒钟之后跳转到首页';
                timer --;
            }
        }
    </script>

2.获取URL参数传递（练习数据在不同页面的传递）

（登录页面，action提交到text2.html页面，text2页面，可以使用第一个页面的参数）

text1页面主要代码

    <form action="text2.html">     <!--表单域-->
        <!-- 默认是get提交 -->
        用户名： <input type="text" name="uname">
        <input type="submit" value="登录">
    </form>

text2页面主要代码

<div></div>
    <script>
        console.log(location.search); // ?uname=111
        // 1.先去掉？  substr('起始的位置'，截取几个字符);
        var params = location.search.substr(1); // uname=111
        console.log(params);
        // 2. 利用=把字符串分割为数组 split('=');
        var arr = params.split('=');
        console.log(arr); // ["uname", "111"]
        var div = document.querySelector('div');
        // 3.把数据写入div中
        div.innerHTML = arr[1] + '，欢迎你来到我的博客';
    </script>