[英]Display thank you message and redirect to another page
Currently, I managed to create alert pop-up "Thanks" after on-click event.目前,我设法在点击事件后创建警报弹出窗口“谢谢”。 It works for 1 second and redirect to https://www.w3schools.com .
它工作 1 秒并重定向到https://www.w3schools.com 。
How to create not pop-up alert, but a kind of temporary blank page with "Thanks" for 3-4 seconds in the middle?如何创建不是弹出式警报,而是一种中间有 3-4 秒“谢谢”的临时空白页?
After this I want to be redirected to https://www.w3schools.com .在此之后,我想被重定向到https://www.w3schools.com 。
function two() { alert('Thanks'); window.location.href = 'https://www.w3schools.com'; }
<input type="button" onclick="two();" value="Submit">
You could create a splash page that gets displayed above the current content and then use a timeout to redirect the user.您可以创建一个显示在当前内容上方的启动页面,然后使用超时来重定向用户。
Edit: Moved the text to the CSS rule.编辑:将文本移动到 CSS 规则。 If you do not want this, add the text inside the
<div class="thanks">
tag and remove the :after
CSS rule.如果您不想这样做,请在
<div class="thanks">
标签内添加文本并删除:after
CSS 规则。
function redirect() { document.querySelector('.thanks').classList.remove('thanks-hidden'); setTimeout(() => { window.location.href = 'https://www.w3schools.com/'; }, 3000); // Wait 3 seconds and then redirect. }
.thanks { display: flex; position: absolute; top: 0; left: 0; z-index: 999; width: 100%; height: 100%; background: #FFF; justify-content: center; align-items: center; font-size: 2em; } .thanks:after { content: "Thanks"; } .thanks-hidden { display: none; }
<input type="button" onclick="redirect()" value="Submit"> <div class="thanks thanks-hidden"></div>
You can use setTimeout您可以使用 setTimeout
function two() {
alert('Thanks');
setTimeout(function() {
window.location.href = 'https://www.w3schools.com';
}, 4000 /* ms to delay for*/);
}
You can use setTimeout
to set a timer for a specific function.您可以使用
setTimeout
为特定功能设置计时器。 You can use innerHTML to clear the content of the body.您可以使用innerHTML来清除正文的内容。
function two() { alert('Thanks'); document.body.innerHTML = ''; setTimeout(() => { window.location.href = 'https://www.w3schools.com'; },4000); }
<input type="button" onclick="two();" value="Submit">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.