[知了堂学习笔记] javascript DOM练习案例

最新推荐文章于 2023-05-28 00:26:55 发布
最新推荐文章于 2023-05-28 00:26:55 发布
阅读量328 收藏
点赞数
分类专栏： javascript学习笔记 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/doudou_boss/article/details/78753841
版权

随机验证码的实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #image{
                height: 40px;
                width: 90px;
                border: 2px solid darkgray;
                margin-left: 10px;
                text-align: center;
                font-size: larger;
                line-height: 40px;
            }
            .fl{
                float: left;
            }
            #in{
                margin-top: 5px;
                height: 30px;
            }
            #change{
                position: relative;
                top: 20px;
                left: 5px;
                text-decoration: none;

            }
            #button{
                margin-top: 20px;
                margin-left: 10px;
            }
        </style>
    </head>
    <body>
        <span class="fl"><input type="text" placeholder="请输入图片中的验证码"  id="in"/></span>
        <span class="fl"><div id="image"></div></span>
        <span class="fl"><a href="#" id="change" onclick="createCode()">换一张</a></span>
        <span><button id="button" onclick="checkCode()">提交</button></span>
        <div id="tishi"></div>
    </body>
    <script>
        /**
         * 思路：
         * 1.定义验证码
         * 2.找到验证码放在html的位置
         * 3.定义随机验证码位数(4位)
         * 4.定义数组 存放随机数
         * 5.循环产生四位数
         * 6.通过Math.floor(Math.random()*XX)产生随机索引值
         * 7.将随机索引值对应的内容加在随机数上
         */
        var code;//全局定义验证码
        function createCode(){//页面加载时生成随机验证码
            code = "";//初始化为字符串

            var codeLength = 4;//随机数个数
            //定义随机数数组
            var randomCode = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z");
            for(var i = 0;i < codeLength;i++){
                var randomNumber = Math.floor(Math.random()*36);//随机索引
                code += randomCode[randomNumber];
            }
                //把随机数放到页面
                //找到位置createCode();
                /**
                 * 出现一个错误  document.getElementById("image").innerText(code);不是一个函数 
                 */
                document.getElementById("image").innerText=code;


        }

        //页面加载时产生验证码
        window.onload = function(){
            createCode();
        }


        //验证输入验证码与产生的验证码是否相符
        /**
         * 1.得到当前验证码框里的值
         * 2.得到输入框中的值
         * 3.比较两个值是否相同
         * 4.根据比较结果返回不同的值
         */
        function checkCode(){
            //验证框中的值
            var codeNow = code;//code是全局变量 ，可以直接获得
            alert(codeNow);
            //输入框中的值
            var inputNow = document.getElementById("in").value;
            alert(inputNow);
            if(codeNow == inputNow){
                document.getElementById("tishi").innerHTML = "<p style='color: lawngreen;'>√验证正确</p>";

            }else{
                document.getElementById("tishi").innerHTML = "<p style='color: red;'>×验证失败</p>";
            }
        }


    </script>
</html>

实现验证码的验证功能

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #image{
                height: 40px;
                width: 90px;
                border: 2px solid darkgray;
                margin-left: 10px;
                text-align: center;
                font-size: larger;
                line-height: 40px;
            }
            .fl{
                float: left;
            }
            #in{
                margin-top: 5px;
                height: 30px;
            }
            #change{
                position: relative;
                top: 20px;
                left: 5px;
                text-decoration: none;

            }
            #button{
                margin-top: 20px;
                margin-left: 10px;
            }
        </style>
    </head>
    <body>
        <span class="fl"><input type="text" placeholder="请输入图片中的验证码"  id="in"/></span>
        <span class="fl"><div id="image"></div></span>
        <span class="fl"><a href="#" id="change" onclick="createCode()">换一张</a></span>
        <span><button id="button" onclick="checkCode()">提交</button></span>
        <div id="tishi"></div>
    </body>
    <script>
        /**
         * 思路：
         * 1.定义验证码
         * 2.找到验证码放在html的位置
         * 3.定义随机验证码位数(4位)
         * 4.定义数组 存放随机数
         * 5.循环产生四位数
         * 6.通过Math.floor(Math.random()*XX)产生随机索引值
         * 7.将随机索引值对应的内容加在随机数上
         */
        var code;//全局定义验证码
        function createCode(){//页面加载时生成随机验证码
            code = "";//初始化为字符串

            var codeLength = 4;//随机数个数
            //定义随机数数组
            var randomCode = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z");
            for(var i = 0;i < codeLength;i++){
                var randomNumber = Math.floor(Math.random()*36);//随机索引
                code += randomCode[randomNumber];
            }
                //把随机数放到页面
                //找到位置createCode();
                /**
                 * 出现一个错误  document.getElementById("image").innerText(code);不是一个函数 
                 */
                document.getElementById("image").innerText=code;


        }

        //页面加载时产生验证码
        window.onload = function(){
            createCode();
        }


        //验证输入验证码与产生的验证码是否相符
        /**
         * 1.得到当前验证码框里的值
         * 2.得到输入框中的值
         * 3.比较两个值是否相同
         * 4.根据比较结果返回不同的值
         */
        function checkCode(){
            //验证框中的值
            var codeNow = code;//code是全局变量 ，可以直接获得
            alert(codeNow);
            //输入框中的值
            var inputNow = document.getElementById("in").value;
            alert(inputNow);
            if(codeNow == inputNow){
                document.getElementById("tishi").innerHTML = "<p style='color: lawngreen;'>√验证正确</p>";

            }else{
                document.getElementById("tishi").innerHTML = "<p style='color: red;'>×验证失败</p>";
            }
        }


    </script>
</html>

ATM机案例

  • 登录：要求用户输入卡号和密码。如果三次之内可以重复输入；三次输入错误，则退出系统
  • 登录成功后，显示主界面。要求用户输入所需操作，然后调用相应的函数，实现操作。操作完成后，再回到主界面，继续要求用户输入所需的操作
  • 存款：要求用户输入存款金额，完成存款操作
  • 取款：如果超支，不允许取款，并给予提示（在原来金额基础上减上存款金额）
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #login{
                border: 2px solid black;
                border-radius: 10px;
                height: 240px;
                width: 400px;
            }
            .lo{
                height: 50px;
                width: 400px;
                text-align: center;
                font-family: "微软雅黑";
            }
            #title{
                margin-top: 5%;
            }
            .shu{
                width: 200px;
                border-color: coral;
                margin-left: 10px;
            }
            .butt{
                background-color: greenyellow;
                height: 30px;
                width: 60px;
                border: 2px solid darkgray;
            }
            #main{
                border: 2px solid black;
                border-radius: 10px;
                height: 200px;
                width: 450px;
                margin-top: 10%;
                display: none;
            }

            #cun{
                margin-top: 10%;
            }
            #qu{
                margin-top: 10%;
            }
            #exit{
                margin-top: 10%;
                background-color: greenyellow;
                height: 30px;
                width: 60px;
                border: 2px solid darkgray;
            }

        </style>
    </head>
    <body>
        <div id="login">
            <div id="title" class="lo">ATM机</div>
            <div id="number" class="lo">卡号:<input type="text" id="cardNumber"  class="shu"/></div>
            <div id="password" class="lo">密码:<input type="password" id="cardPassword"  class="shu"/></div>
            <div id="button" class="lo"><button id="but" onclick="login()"  class="butt">登录</button></div>
        </div>

        <div id="main">
            <div class="lo">请输入存款金额：<input type="text" class="shu" id="cun"/><button onclick="saveMoney()">存款</button></div>
            <div class="lo">请输入取款金额：<input type="text" class="shu" id="qu"/><button onclick="getMoney()">取款</button></div>
            <div id="button" class="lo"><button  onclick="exit()" id="exit">退出</button></div>
        </div>
    </body>
    <script type="text/javascript">
        /**
         * 登录验证
         * 1.判断卡号是否为空
         * 2.判断密码是否为空
         * 3.判断卡号和密码是否匹配
         * 4.三次输错则弹出提示框，退出系统
         */
        var num = 0;//登录错误次数
        var money = 10000;//当前账户总金额
        //登录
        function login(){
            //得到卡号值
            var  cardNumber = document.getElementById("cardNumber").value;  
            //得到密码值
            var cardPassword = document.getElementById("cardPassword").value;
            //判断卡号是否为空
            if(cardNumber =="" || cardNumber == null){
                alert("卡号为空！请输入卡号！");
            }
            if(cardPassword == "" || cardPassword == null){
                alert("密码为空！请输入密码！");
            }
            if(cardNumber != "" && cardNumber != null && cardPassword != "" && cardPassword != null){
                    if(cardNumber.length != 11){//设置卡号长度
                        alert("非法卡号，请重新输入！");
                    }else{
                    if(cardPassword != "123456789"){//判断密码
                        alert("密码错误！请重新输入!");
                        num++;
                        if(num == 3){
                            alert("您已经连续三次输错密码！退出系统！");
                            var divLogin = document.getElementById("login");
                            divLogin.style.display="none";
                        }
                    }else{
                        //显示主界面
                        //隐藏登录界面div 显示主界面div
                        document.getElementById("login").style.display="none";
                        document.getElementById("main").style.display ="block";

                    }
                }
                }

            }



        //存款操作
        function saveMoney(){
            //得到存款金额
            var saveMoney = parseInt(document.getElementById("cun").value);
            money = money + saveMoney;
            alert("您已经成功存入:￥"+saveMoney);
            alert(money);
        }

        //取款操作
        function getMoney(){
            //得到取款金额
            var getMoney = parseInt(document.getElementById("qu").value);
            if(money < getMoney){
                alert("当前余额不足，请重新输入取款金额！");
            }else{
                money = money - getMoney;
                alert("您已经成功去处:￥"+getMoney);
                alert(money);
            }

        }

        //退出操作
        function exit(){
            document.getElementById("login").style.display="block";
            document.getElementById("main").style.display ="none";

        }

    </script>

</html>

请关注“知了堂学习社区”，地址：http://www.zhiliaotang.com/portal.php

mili_dou
关注
专栏目录
JS DOM练习例子02
一虹的博客
09-27 278
JS DOM练习例子021.1 实现一亮其他暗效果1.2 tab栏切换1.3 事件流使用1.4 图片随鼠标移动 1.1 实现一亮其他暗效果 利用排他思想实现 效果 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button>1</butto
JS DOM练习例子01
一虹的博客
09-23 380
JS dom练习例子1.1 新浪注册登记验证1.2 淘宝关闭二维码 1.1 新浪注册登记验证 不包含正则，只涉及输入长度 效果 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> p { display: inline-block; } .wrong{ col
JavaScript-DOM练习
weixin_45515107的博客
03-18 4107
1、手风琴，实现页面切换，背景也随着切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g
JavaScript之DOM案例练习
十三阿哥的博客
05-28 603
JavaScript之DOM案例练习
JavaScript基础DOM操作小练习（一）
欢迎来到长风沛雨的博客
11-15 1915
整一些可以练着玩的熟悉语法的DOM小例子
【知了堂学习笔记】JFreeChart
Jack0c的博客
09-09 359
JFreeChart是JAVA平台上的一个开放的图表绘制类库，利用它可以帮我们制作饼图，柱状图，时序图等。如何使用它来制作报表呢？ 首先我们需要去www.jfree.org/jfreechart/下载两个jar包 jfreechart-1.0.19.jar，jcommon-1.0.23.jar。 这两个东东包含了JFreeChart的核心组件，制作报表全靠它俩了。 接下来我们开始干活了，制作报
【知了堂学习笔记】SQL查询总结（2）
Godah的博客
10-23 392
继续上篇博客没总结完的 3.4 外连接 3.4.1 左外链接 左表数据全部显示，如何能连接上就显示连上的数据，如果连接不上，则为空 select 字段 from 表名A left outer join 表名B on A.Aid = B.AID; 指返回A和B表的所有都拥有的记录，加上A剩下的所有记录 3.4.2  右连接 右表数据全部显示，如何能连接上就显示连上的数据，如果连接不上，则
【知了堂学习笔记】利用ajax实现web中的批量删除
T_Texture的博客
09-17 656
利用ajax实现批量删除
【知了堂学习笔记】Model1、Model2和MVC架构模式
T_Texture的博客
09-24 2970
Model1、Model2和MVC架构模式
【知了堂学习笔记】css3 transform 3d制作字母开门3D效果
JALex0的博客
09-01 836
通过css3选择器:hover及一些过渡效果来实现鼠标移入字母往左边开门的效果。    ：hover是一个伪类，是鼠标指针移到元素的上面     transition是css3里面的过渡效果，是一种样式变化成另一种效果     transform是对内容进行旋转，旋转分为2D和3D的，旋转可以沿着X轴或Y轴及Z轴进行旋转。     transform:rotateY(-40deg)
原生JS经典小项目-DOM练习
05-18
原生JS经典小项目-DOM练习
HTML DOM的练习
06-15
html当中DOM知识的小练习。 节点练习。 html当中DOM知识的小练习。 html当中DOM知识的小练习。 html当中DOM知识的小练习。 html当中DOM知识的小练习。html当中DOM知识的小练习。
js_HTML_Dom操作练习
10-15
js_HTML_Dom操作练习，比较基础的
DOM练习
小鱼干儿的博客
02-21 321
dom增删改 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> .
DOM案例练习-推荐几个DOM小案例练习有示例代码
m0_71485750的博客
06-04 690
说明: 做一个消息提示, 让消息的内容跟随数据动态发生改变示例代码:CSS部分 HTML结构 JS代码 案例二: 关闭删除消息 说明: 点击叉号将对应导航栏删除示例代码:CSS代码 HTML结构: JS代码: 案例三: 侧边栏的展示 说明: 鼠标经过添加动画将宽度调高-, 案例中的图片使用同一张精灵图, 且精灵图位置是有规律的, 我们选择通过js动态设置background-position示例代码:CSS代码 HTML结构 JS代码 案例四: 登录框
保安日记：JavaScript学习第八篇之DOM基础案例练习
Zhuo_De的博客
10-17 223
以下都是案例 百度换肤案例（点击哪种图片更换此背景） <style> li { list-style: none; } li img { float: left; width: 100px; margin-left: 3px; margin-top: 5px; margin-bottom: 5px; } .box { mar
javascript DOM练习
anzhang5248的博客
07-09 160
一、定时器 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text"...
Javascript中DOM的练习
weixin_30693683的博客
01-04 151
第一个题：html计时器 方法一： <body onLoad="show()" > <div id="b"></div> </body> </html> <script type="text/javascript"> function show() {var d=new Date(); var no...
DOM操作练习
阿甘正传
09-12 1678
DOM操作练习 举例1：点击按钮时，显示和隐藏盒子。 代码实现： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> button { ...
flask论坛实战知了传课
最新发布
01-07
Flask论坛实战知了传课是一门实践性很强的课程，旨在帮助学生学习和掌握使用Flask框架开发一个完整、功能完备的论坛应用。 Flask是一个轻量级的Python Web框架，开发人员可以快速构建Web应用程序。知了传课采用实战...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值