JS回退上一个页面

标题 JS回退上一个页面的几种方式

当前的url下标为0,所以window.history.go(-1)就是要定位到相对当前页面下标为-1的页面,也就是之前刚刚访问的页面。

//返回上一页:
window.history.go(-1);

//返回两个页面:
window.history.go(-2);

history.back()和history.go(-1)都是返回之前页面,但是方法不同,所以是有区别的:

history.back(-1)//直接返回当前页的上一页,数据全部消息,是个新页面

history.go(-1)//也是返回当前页的上一页,不过表单里的数据全部还在

总结:


<input type=button value=刷新 onclick="window.location.reload()">
<input type=button value=前进 onclick="window.history.go(1)">
<input type=button value=后退 onclick="window.history.go(-1)">
<input type=button value=前进 onclick="window.history.forward()">
<input type=button value=后退 onclick="window.history.back()">//后退+刷新

在这里插入图片描述
注:仅个人观点,不足之处还请留言或微信相互学习交流!
在这里插入图片描述

以下是一个简单的会动的草莓熊的 HTML + CSS + JS 代码: ```html <!DOCTYPE html> <html> <head> <title>会动的草莓熊</title> <style> body { background-color: #f8f8f8; } .bear { position: absolute; width: 300px; height: 300px; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: bear 2s infinite; } .bear-head { position: absolute; width: 180px; height: 150px; top: 50px; left: 60px; background-color: #f5a9bc; border-radius: 50% 50% 0 0; transform: rotate(-20deg); animation: head 2s infinite; } .bear-eyes { position: absolute; width: 40px; height: 40px; top: 70px; left: 95px; background-color: #fff; border-radius: 50%; box-shadow: 0 0 5px #000; animation: eyes 2s infinite; } .bear-nose { position: absolute; width: 25px; height: 10px; top: 90px; left: 110px; background-color: #f00; border-radius: 50%; transform: rotate(-20deg); animation: nose 2s infinite; } .bear-ears { position: absolute; width: 60px; height: 60px; top: 10px; left: 50px; background-color: #f5a9bc; border-radius: 50%; transform: rotate(-40deg); animation: ears 2s infinite; } .bear-mouth { position: absolute; width: 80px; height: 30px; top: 120px; left: 75px; background-color: #f5a9bc; border-radius: 0 0 50% 50%; transform: rotate(-20deg); animation: mouth 2s infinite; } .bear-body { position: absolute; width: 200px; height: 200px; top: 110px; left: 50px; background-color: #f5a9bc; border-radius: 50%; animation: body 2s infinite; } .bear-legs { position: absolute; width: 20px; height: 80px; top: 200px; left: 110px; background-color: #f5a9bc; border-radius: 10px; transform: rotate(-20deg); animation: legs 2s infinite; } .bear-arms { position: absolute; width: 80px; height: 20px; top: 150px; left: 20px; background-color: #f5a9bc; border-radius: 10px; transform: rotate(20deg); animation: arms 2s infinite; } @keyframes bear { 0% { transform: translate(-50%, -50%) rotate(0deg); } 50% { transform: translate(-50%, -50%) rotate(10deg); } 100% { transform: translate(-50%, -50%) rotate(0deg); } } @keyframes head { 0% { transform: rotate(-20deg); } 50% { transform: rotate(-10deg); } 100% { transform: rotate(-20deg); } } @keyframes eyes { 0% { top: 70px; left: 95px; } 50% { top: 75px; left: 100px; } 100% { top: 70px; left: 95px; } } @keyframes nose { 0% { transform: rotate(-20deg); } 50% { transform: rotate(-10deg); } 100% { transform: rotate(-20deg); } } @keyframes ears { 0% { transform: rotate(-40deg); } 50% { transform: rotate(-30deg); } 100% { transform: rotate(-40deg); } } @keyframes mouth { 0% { transform: rotate(-20deg); } 50% { transform: rotate(-10deg); } 100% { transform: rotate(-20deg); } } @keyframes body { 0% { transform: scale(1); } 50% { transform: scale(0.9); } 100% { transform: scale(1); } } @keyframes legs { 0% { transform: rotate(-20deg); } 50% { transform: rotate(-10deg); } 100% { transform: rotate(-20deg); } } @keyframes arms { 0% { transform: rotate(20deg); } 50% { transform: rotate(10deg); } 100% { transform: rotate(20deg); } } </style> </head> <body> <div class="bear"> <div class="bear-head"></div> <div class="bear-eyes"></div> <div class="bear-nose"></div> <div class="bear-ears"></div> <div class="bear-mouth"></div> <div class="bear-body"></div> <div class="bear-legs"></div> <div class="bear-arms"></div> </div> </body> <script> alert("点击确定开始观看!"); </script> </html> ``` 草莓熊会在页面中心位置不断摇晃,眼睛、鼻子、耳朵、嘴巴、身体、手臂和腿都会动起来。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值