Day04 实现一个简单的随机点名页面和Day01更换验证码的功能

最新推荐文章于 2024-08-25 21:41:11 发布

李柯柯柯南

最新推荐文章于 2024-08-25 21:41:11 发布

阅读量206

点赞数

分类专栏： web作业题文章标签： js css html

本文链接：https://blog.csdn.net/m0_48277818/article/details/107367707

版权

web作业题专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1. 实现一个简单的随机点名页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>nightmare</title>
    <style>
       .bbb{
            width: 150px;
            height: 30px;
            border: 1px black solid;
            color: black;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="aaa" class="bbb" >点到的名字为...</div>
<script>
    var list=["张三","李四","王二","麻子","杜十娘","西门吹雪","叶孤城"]
    function nightMare() {
        var div =document.getElementById("aaa")
        if (list.length<1){
            alert("没有同学可供选择")
            return
        } else{
            var num=Math.floor(Math.random()*list.length)
            div.innerText=list[num]
            list.splice(num,1)
        }
    }
</script>
    <button onclick="nightMare()">点名</button>
</body>
</html>

思路:
利用js将点名按钮触发实现点名
创建一个div标签供名字的出现,利用dom获取元素结点,
然后将点名的函数利用一个数组将名字存放,随机产生一个索引
最后将div的元素内容替换为数组中对应下标的内容.
(其中为了防止一个名字出现两次,将被点到名字的同学从数组中删除).

结果如图所示:
在这里插入图片描述

2. 实现Day01注册页面的相关功能(1,看不清换一张功能, 2,验证码判断)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>function</title>
</head>
<body>
<table cellspacing="10px">
    <tr>
        <td>注册邮箱:</td>
        <td><input></td>
    </tr>
    <tr>
        <td></td>
        <td>你还可以使用手机注册</td>
    </tr>
    <tr>
        <td>创建密码:</td>
        <td><input></td>
    </tr>
    <tr>
        <td>真实姓名:</td>
        <td><input></td>
    </tr>
    <tr>
        <td align="right">性别:</td>
        <td><input type="radio" name="aaa" value="1">男<input type="radio" name="aaa" value="2">女</td>
    </tr>
    <tr>
        <td align="right">生日:</td>
        <td>
            <select><option value="2000">2000</option>
                <option value="2001">2001</option>
                <option value="2002">2002</option>
            </select>年
            <select><option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>月
            <select><option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>日
        </td>
    </tr>
    <tr>
        <td align="right">我正在:</td>
        <td><select>
            <option value="1">学习</option>
            <option value="2">睡觉</option>
            <option value="3">打游戏</option>
        </select></td>
    </tr>
    <tr>
        <td></td>
        <td>
            <img id="img1" src="verycode.gif"><zidingyi onclick="Change()">看不清,换一张?</zidingyi>
        </td>
    </tr>
    <tr>
        <td align="right">验证码:</td>
        <td><input id="inputStr"></td>
    </tr>
    <tr>
        <td></td>
        <td><img src="btn_reg.gif" onclick="Go()"></td>
    </tr>
</table>
<script>
    var listUrl=["1111.png","1234.png","2222.png","3333.png",]
    var listNum=["1111","1234","2222","3333"]
    var midTag=-1
    function Change() {
        var node=document.getElementById("img1")
        var bool=true
        while(bool){
            var num=Math.floor(Math.random()*listUrl.length)
            if (num!=midTag){//防止重复出现相同的图片
                bool=false
                midTag=num
            }
        }
        node.src=listUrl[midTag]
    }
    function Go() {
        var inputStr=document.getElementById("inputStr")
        if (midTag==-1){
            if (inputStr.value=="bnksu"){
                alert("验证码正确")
            } else{
                alert("验证码错误")
            }
        }
        var str=listNum[midTag]
        if (inputStr.value==str){
            alert("验证码正确")
        } else{
            alert("验证码错误")
        }
    }
</script>
</body>
</html>

思路:
实现方式和上面的点名差不多,只是多了一些判断的条件
创建两个数组一个存放验证码图片的地址,一个存放验证码上的内容,且下标相对应
更换验证码是随机的,且不能连续两次出现相同的验证码.
确认验证码的关键在于第一个图片的内容要单独进行判断.

李柯柯柯南

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Day04 实现一个简单的随机点名页面和Day01更换验证码的功能

1. 实现一个简单的随机点名页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>nightmare</title> <style> .bbb{ width: 150px; height: 30px; border: 1px
复制链接

扫一扫

专栏目录