个人网站搭建（Day 18）— Html + js 实现消息提示跳转页面

最新推荐文章于 2021-06-19 15:21:31 发布

Schnee_Cy

最新推荐文章于 2021-06-19 15:21:31 发布

阅读量440

点赞数 1

分类专栏：个人网站搭建

本文链接：https://blog.csdn.net/Empire_03/article/details/90812199

版权

个人网站搭建专栏收录该内容

20 篇文章 2 订阅

订阅专栏

emmm，这个页面是我的项目中的一个通用页面，主要功能是显示提示信息，在经过指定的时间后跳转到目标链接，前端代码如下所示。

<!DOCTYPE html> 

<html lang="zxx" class="no-js">

<body>
    <section class="project-area section-gap" id="project" style="padding-top: 50px">
        <div style="width: 650px; margin: 0 auto">
            <div class="title text-center">
                <h2 style="line-height:300%;">{{ message|safe }}</h2>
                <p>
                    <input type="text" style="border:none; width:1em" readonly="true" value="5" id="time"> 秒后跳转到 {{ next_page }}。
                </p>
            </div>
        </div>
    </section>
</body>

<script language="javascript">
    var t = {{ goto_time }};
    var time = document.getElementById("time");

    function fun() {
        t--;
        time.value = t;
        if (t <= 0) {
            location.href = "{{ goto_url }}"
            clearInterval(inter);
        }
    }
    var inter = setInterval("fun()", 1000);
</script>

</html>

后端代码调用示例：

response_data = {
    'message': "提示消息",
    'next_page': "下一页面名称",
    'goto_url': settings.CUR_HOST + 'chatroom/room_list/', 
    'goto_time': 5,
}
return render(request, 'users/message.html' , response_data)

该页面可以在多个模块中作为消息提示功能来使用。

Schnee_Cy

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
个人网站搭建（Day 18）— Html + js 实现消息提示跳转页面

emmm，这个页面是我的项目中的一个通用页面，主要功能是显示提示信息，在经过指定的时间后跳转到目标链接，前端代码如下所示。<!DOCTYPE html> <html lang="zxx" class="no-js"><body> <section class="project-area section-gap" id="project...
复制链接

扫一扫