项目"/>
Javascript 01：支付项目
1 、点击事件οnclick=function(){}
2、确认框 window.confirm()
3、页面跳转 location.href （ ./当前目录下）
<script>//1: 获取鼠标的点击事件document.getElementById("paymoney").onclick=function(){//2: 确认框let result=window.confirm("您确实要支付吗？");if(result){//3:页面跳转 ./当前目录下location.href='./01-success.html';}}</script>
4、定时器
<script>//1.加载此页面的时候(window.onload)，触发定时器window.onload=function(){let timer=10;setInterval(()=>{timer--;document.getElementById("jumpTo").innerText=timer;if(timer==0){//页面跳转location.href="/";}},1000);}}</script>
总代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>支付页面</title></head><body><div id="pay"><!-- 头部 --><div id="content" ><p><label>商品:</label><label>Web前端课程</label></p><p><label>原价:</label><label>1980元</label></p><p><label>现价:</label><label>1.98元</label></p><p><label>内容:</label><label>HTML、CSS、JS</label></p><p><label>地址:</label><label>北京市朝阳区</label></p></div><!-- 尾部 --><div id="footer"><button class="btn" id="cancel">取消</button><button class="btn" id="paymoney" >支付</button></div></div></body><script>//1: 获取鼠标的点击事件document.getElementById("paymoney").onclick=function(){//2: 确认框let result=window.confirm("您确实要支付吗？");if(result){//3:页面跳转 ./当前目录下location.href='./01-success.html';}}</script></html>
<style>*{padding: 0px;margin: 0px;}#pay{width: 350px;height: 350px;background-color: gainsboro;margin: 0 auto; //0 auto，表示上下边界为0，左右则根据宽度自适应相同值（即居中）}p{padding-top: 20px; }#content{/* border: 1px solid red; */width: 80%;height: 250px;margin: 0 auto;}#footer{width: 80%;height: 40px;margin: 0 auto;
/* border: 1px solid black; */}.btn{width: 50px;height: 35px; margin-left: 45px;}
</style>
01.success.html
<body><div id="success"><div id="content"><p style=" font-weight: bold; font-size: 20px;">恭喜你,支付成功</p><p> <label id="jumpTo">10</label><label >秒后自动返回首页</label></p><p><button id="cancel">立即返回</button></p></div></div><script>//1.加载此页面的时候(window.onload)，触发定时器window.onload=function(){let timer=10;setInterval(()=>{timer--;document.getElementById("jumpTo").innerText=timer;if(timer==0){//页面跳转location.href="/";}},1000);}//2.点击取消时，页面跳转document.getElementById("cancel").onclick=function(){//页面跳转location.href="/";}</script></body>
</html>
<style>*{margin: 0px;padding: 0px;}#success{width: 300px;height: 200px;/* border: 2px solid red; */margin: 0 100px;}#content>p {padding-top: 20px; //内边距 }</style>
更多推荐
Javascript 01：支付项目
发布评论