【JavaWeb】Javascript经典案例

Javascript经典案例
注意:该文章是参考b站<20个JS经典案例>进行学习的,没有CSS的组成。
在慢慢更新中…哈哈哈哈,太慢了

文章目录

    • 1.支付定时器
    • 2.验证码生成及校验


1.支付定时器

代码实现:

confirm.html

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>确认title>
head>
<body>
<div>

        <p>商品:Web前端课程p>
        <p>原价:1980元p>
        <p>现价:1.98元p>
        <p>内容:HTML,CSS,JSp>
        <p>地址:北京朝阳区p>
        <p>
            <button>取消button>
            <button>支付button>
        p>

div>
<script>
    //逻辑:点击支付,出现确认框
    document.getElementsByTagName("button")[1].onclick=function (){
        let res=window.confirm('您确定要支付嘛?');
        if(res){
            location.href='succ.html'
        }
    }
script>

body>
html>

succ,.html

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>成功的页面title>
head>
<body>
<div>
    <h2>恭喜您,支付成功h2>
    <span id="jumpTo">10span>秒后自动返回首页
    <p><button>立即返回button>p>
div>
<script>
    //逻辑:加载页面时,应该触发定时器10s
    window.onload=function(){
        let timer=10;
        setInterval(()=>{
            timer--;
            document.getElementById("jumpTo").innerText= timer;
            if(timer==0){
                location.href='confirm.html'
            }
        },1000)
        document.getElementsByTagName('button')[0].onclick=function(){
            location.href='confirm.html'
        }
    }
script>
body>
html>

案例结果:
【JavaWeb】Javascript经典案例_第1张图片
【JavaWeb】Javascript经典案例_第2张图片

2.验证码生成及校验

你可能感兴趣的:(javascript,开发语言,ecmascript)