随机事件电子时钟验证码

Posted dk2557

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了随机事件电子时钟验证码相关的知识,希望对你有一定的参考价值。

Dom的运用:

1、电子时钟

时间:<input id="tt" type="text">//html中建立文本框显示时间
<script>
function dianziTime(name){
    var t = new Date(),//新建一个时间
        y = t.getFullYear(),//获取年
        m = (+t.getMonth()+1) >= 10 ? +t.getMonth()+1 : "0" +(+t.getMonth()+1),
//获取月份,月份下标是(0-11),与实际日期差1
//三目运算,如果是1位数,前面加0
        d = t.getDate(),//获取日
        h = t.getHours(),//获取小时
        f = t.getMinutes(),//获取分钟
        s = t.getSeconds();//获取秒
    var str = y+"-"+m+"-"+d+" "+h+":"+f+":"+s;//显示设置
    document.getElementById(‘tt‘).value = str;//将时间放在id="tt"中
}
</script>

注意:此时获取时间,只是当前刷新页面时的时间,是固定的,非动态的

JS获取日期当前时间日期及其他操作:

var myDate = new Date();
myDate.getYear();        //获取当前年份(2位)
myDate.getFullYear();    //获取完整的年份(4位,1970-????)
myDate.getMonth();       //获取当前月份(0-11,0代表1月)
myDate.getDate();        //获取当前日(1-31)
myDate.getDay();         //获取当前星期X(0-6,0代表星期天)
myDate.getTime();        //获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours();       //获取当前小时数(0-23)
myDate.getMinutes();     //获取当前分钟数(0-59)
myDate.getSeconds();     //获取当前秒数(0-59)
myDate.getMilliseconds();    //获取当前毫秒数(0-999)
myDate.toLocaleDateString();     //获取当前日期
var mytime=myDate.toLocaleTimeString();     //获取当前时间
myDate.toLocaleString( );        //获取日期与时间

建立动态时间:利用定时器,设置每秒运行一次“dianziTime(name)” 

window.onload = function(){
    setInterval(function(){
//建立定时器,每1秒运行一次
        dianziTime();
    },1000);
}

显示结果:

技术分享图片

2、随机事件

Math.random()方法返回大于等于 0 小于 1 的一个随机数。

随机点名:

var arr = ["温钊","高志伟","边秀通","李智伟","丁昆","张镇潇","刘庆亮","郭浩","李青","任星旭"];//新建数组
 var i = parseInt(Math.random()*10);
//Math.random()的返回值是在0-1之间的,因为有10个值,所以*10,并取整数,作为数组arr的下标
 console.log(i);
 console.log(arr[i]);

滚动抽奖:

html部分,两个按钮,及显示区域

<body>
    <button id="start">开始</button>//建立开始按钮 
    <button id="end">停止</button>//建立结束按钮
    <div id="dd" style="width: 300px; height: 50px;background: red;text-align: center; line-height: 50px;">
    </div>//设置一块区域,显示名字
</body>

js部分:设置定时器,循环显示内容,当清除定时器时,显示内容为抽中内容

var divDom = null, //显示div
    startDom = null, //开始按钮
    endDom = null;//结束按钮
window.onload = function(){
    divDom = document.getElementById(‘dd‘);//找到区域
    startDom = document.getElementById(‘start‘);//找到开始按钮
    endDom = document.getElementById(‘end‘);//找到结束按钮
}

function addEvent(){
    //开始事件
    startDom.onclick = function(){
    //点击运行方法
        setDom = setInterval(function(){
//建立一个定时器,每1毫秒显示一次
            divDom.innerHTML = arr[n];
//将arr[0]中的内容赋值给div
            n++;
            if(n >= 10){
                            n = 0;
                         } 
//当n=10时,运行完一边,设置n=0,再重新循环
           },1);
    }
    //结束事件
    endDom.onclick = function(){
        clearInterval(setDom);//清除定时器
    }
}                          

显示结果:

技术分享图片

 

3、获取验证码,并验证

html部分:在输入框输入验证码,验证是否一致,验证码没有时,显示“加载中...”

验证码:<input id="yzmVal" type="text">
    <span id="yzm">加载中...</span>
    <button id="yz">验证</button>

技术分享图片

var n = 0;//数组下标
function yzmFun(n=4){
//设置输出4个验证码
    var str = "0123456789";//建立字符串0-9
    var sjs = "";//设置输出内容
    for(var i =0;i<n;++i){
        sjs += str.substr(Math.random()*str.length,1);
//建立随机数,提取字符串内容,给sjs,共四次
    }
    document.getElementById(‘yzm‘).innerHTML= sjs;//将内容给<span>
}

str.substr(a,b);为截取字符串,a表示从下标为a的数开始,b表示截取长度。

验证:获取输入框内容,与验证码内容匹配

 var yanzDom = document.getElementById(‘yz‘);
var wbDom=document.getElementById(‘yzmVal‘);
var wbnr=wbDom.value;
yanzDom.onClick=function(){
    if(wbnr==sjs){
  alert("验证成功");
  }
    alert("验证失败");
}  

 

4、36个数选7 ,且数不重复

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

如果没有找到字符串,则返回-1.  

function buchong(){
    var num = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36];
    var jiguo = [];//定义数组jieguo
    for(var i =0;i<7;++i){
        var n = parseInt(Math.random()*num.length);
    //随机抽取数组num中的数
        if(jiguo.indexOf(num[n]) < 0 ){
//返回抽取数在jieguo数组的首次出现位置,没有返回-1
            jiguo.push(num[n]);
        }else{
            i--;
        }  
}

indexOf() 方法用法,

stringObject.indexOf(searchvalue,fromindex)

indexOf() 方法对大小写敏感!

searchvalue为必须的,为要查找的字符串,如果找到一个 searchvalue,则返回 searchvalue 的第一次出现的位置。

stringObject 中的字符位置是从 0 开始的。如果要检索的字符串值没有出现,则该方法返回 -1。

fromindex该整数值为在对象内开始查找的索引。

<script type="text/javascript">

var str="Hello world!"
document.write(str.indexOf("Hello") + "<br />")//搜索"Hello"+""
document.write(str.indexOf("World") + "<br />")//搜索"World"+""
document.write(str.indexOf("world"))//搜索"World"

</script>

结果为:

0
-1
6

 

 

以上是关于随机事件电子时钟验证码的主要内容,如果未能解决你的问题,请参考以下文章

JSP 设计教师与学生不同登陆界面(带验证码)

Java使用Hutool工具包生成二维码验证码随机数

代码实现PHP生成各种随机验证码

随机验证码生成代码 (转)

随机验证码图片验证码和邮箱发送用户验证码

登录验证随机验证码的实现