搜索下拉框+验证码

最新推荐文章于 2023-04-01 17:24:48 发布

FIND方式

最新推荐文章于 2023-04-01 17:24:48 发布

阅读量249

点赞数

分类专栏：作品 JavaScript

本文链接：https://blog.csdn.net/weixin_43091563/article/details/103538564

版权

JavaScript 同时被 2 个专栏收录

45 篇文章 0 订阅

订阅专栏

作品

9 篇文章 0 订阅

订阅专栏

JS验证码核实
 JS下拉框搜索

验证码

<input type="text" id="yzm1"/>
<span id="yzm2"></span>
<input type="button" class="yz"/>
<i class="con"></i>
<p>1.span内生成4个随机10以内整数，更换背景.点击span刷新验证码</p>
<p>2.将input数字与1比较</p>
<p>3.相等。验证成功，input内容消失</p>
<p>3.不相等。验证失败，重新验证</p>

function yzm(){
    var one=parseInt(Math.random()*10);
    var two=parseInt(Math.random()*10);
    var three=parseInt(Math.random()*10);
    var four=parseInt(Math.random()*10);
    document.getElementById("yzm2").innerHTML =one+""+two+""+three+""+four;
    document.getElementById("yzm2").style.background="url(i/yz"+one+".jpg)";
}yzm();document.getElementById("yzm2").onclick=yzm;
function yz() {
    var cons=document.getElementsByClassName("con")[0];
    var yzm1=document.getElementById("yzm1").value;
    var yzm2=document.getElementById("yzm2").innerHTML;
    if(yzm1==yzm2){
        cons.innerHTML="验证成功";
        document.getElementById("yzm1").value=null;
    }else{
        cons.innerHTML="验证失败，请重新输入验证码";
    }
}document.getElementsByClassName("yz")[0].onclick= yz;

搜索框显示

<body>
<div class="search">
    <p><span><input type="text" id="searchbox" placeholder="请输入搜索关键词"/><input type="button" value="搜索" id="searchbtn"/></span></p>
    <div id="show">
    </div>
</div>

<script>
    var datalist=["hello","welcome","china","huawei","internationl","west","linux","fighting"];//定义数据库数组
    var searchbox=document.getElementById("searchbox");//获取文本框
    var show=document.getElementById("show");//获取显示对象
    searchbox.onkeyup=function(){//文本框在键盘松开时触发
        var zhi=this.value;// 提取当前文本框中的内容
        var newdata=[];// 定义一个空数组
        show.style.visibility="visible";// 默认让显示对象内容显示
        show.innerHTML="";//默认情况下清空显示内容
        for(var x=0;x<datalist.length;x++){ //遍历数据库数组内容
            if(zhi.trim().length>0 && datalist[x].indexOf(zhi)>-1){ //判断当输入的值不为空且在数据库中能查找到时
                newdata.push(datalist[x]);//把对应的数据添加到新数组中
            }
        }
       // console.log(newdata.valueOf())
       /*显示数据*/

        for(var y=0;y<newdata.length;y++){  //遍历新数组
            var newp=document.createElement("p");//创建新元素p
            newp.innerHTML=newdata[y]; //把遍历对应的数组内容赋值给新元素 p中
            show.appendChild(newp); //把新元素内容添加到显示元素中
        }
//点击选中数据，并隐藏数据列表
        var ps=document.getElementById("show").children;  // 找到所有的显示元素中的子元素p
        for(var i=0;i<ps.length;i++){ //遍历所有子元素
            ps[i].onclick=function(){ //点击对应子元素时触发
                searchbox.value=this.innerHTML;// 将点击的元素内容添加到搜索文本中
                show.style.visibility="hidden";//把显示数据列表隐藏
            }
        }


    }
</script>

FIND方式

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
搜索下拉框+验证码

JS验证码核实JS下拉框搜索验证码<input type="text" id="yzm1"/><span id="yzm2"></span><input type="button" class="yz"/><i class="con"></i><p>1.span内生成4个随机10以内整数，更换背景.点...
复制链接

扫一扫

专栏目录