一、需要掌握的知识
- location.href?location.search?
- navigator
- history.back()?history.forword()?
- sqil()?
- substr()?
二、思路
一个提交表单,主页面,一个接收search,分割字符串,innerHTML赋值,接着一个倒计时跳转百度location.href,再接着一个前进后退功能forword(),back();
1.login
代码如下(示例):
<form action="index.html">
用户名:<input type="text" name="uname">
<input type="submit" value="提交">
</form>
2.index
代码如下(示例):
<div style="width: 200px; height: 200px;"></div>
<button>百度</button>
<a href="Details.html">详情页哦</a><button>去往</button>
<script>
var parm=location.search.substr(1);
var arr=parm.split('=');
var div=document.querySelector('div');
var btn=document.querySelectorAll('button');
div.innerHTML='欢迎你'+arr[1];
var flag=5;
btn[0].addEventListener('click',function(){
setInterval(function(){
if(flag==-1){
location.href='http://www.baidu.com';
}
else{
div.innerHTML='还剩下'+flag+'秒就要跳转了';
flag--;
}
},1000);
});
btn[1].addEventListener('click',function(){
history.forward();
})
</script>
3.Details
代码如下(示例):
<a href="index.html">去主页面哦</a>
<button>后退</button>
<script>
var btn=document.querySelector('button');
btn.addEventListener('click',function(){
history.back();
})
</script>
结果
QQ录屏20221219234313
总结
一点一滴,总有一天水滴会石穿,量变到质变,加油