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

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)

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

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注