js学习总结----字符串和Math综合应用-验证码(4位)

具体代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body,div,ul,li{
            margin:0;
            padding: 0;
            font-family: Arial;
            font-size:12px;
            -webkit-user-select:none;
        }
        #code{
            width:100px;
            height:50px;
            line-height: 50px;
            text-align:center;
            border:1px solid #ff0000;
            cursor:pointer;
            top:50%;
            left:50%;
            position:absolute;
            margin-left:-50px;
            margin-top:-25px;
            letter-spacing: 3px
        }

    </style>
</head>
<body>
    <div id=‘code‘>xf2d</div>

    <script type=‘text/javascript‘>
        //设置随机获取的范围
        var codeStr = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
        //0-61索引,我只需要随机生成4个索引,然后通过charAt就可以获取到字符了
        var oDiv = document.getElementById(‘code‘);
        //获取随机数
        function getRandom(n,m){
            n = Number(n);
            m = Number(m);
            if(isNaN(n) || isNaN(m)){
                return Math.random()
            }
            if(n>m){
                var temp = n;
                n = m;
                m = temp
            }

            return Math.round(Math.random()*(m-n)+n)
        }
        //获取验证码
        function getCode(){
            var str = ""
            for(var i = 0;i<4;i++){
                var ran = getRandom(0,61)
                str +=codeStr.charAt(ran);
            }
            oDiv.innerHTML = str;
        }

        getCode();
        oDiv.onclick = function(){
            getCode();
        }
    </script>
</body>
</html>
时间: 2024-10-24 09:56:24

js学习总结----字符串和Math综合应用-验证码(4位)的相关文章

JS学习笔记10之Math对象

-->Math对象 常用属性和方法-->使用Math对象制作相应的效果 Math对象用于执行数学任务 一.Math对象的属性: 二.Math对象的方法: 三.常用属性和方法: Math.PI ----------------返回圆周率3.14 ...Math.ceil(x) ------------对数值x进行向上取整Math.floor(x) -----------对数值x进行向下取整Math.round(x) ----------对数值x进行四舍五入Math.min(a,b,c...) -

JS学习之字符串截取函数substr()与substring()的区别

比较简单,直接上代码 1 var testString="-1-2-3-4-5-6-7-"; 2 //从(第一个参数+1)的位置开始的长度为第二个参数的字符串 3 var result= testString.substr(2,4); 4 alert(result); //输出结果为:-2-3 5 //从(第一个参数+1)的位置直到第二个参数的位置的元素的字符串 6 var result1=testString.substring(1,6); 7 //alert(result1); /

【Knockout.js 学习体验之旅】(3)模板绑定

本文是[Knockout.js 学习体验之旅]系列文章的第3篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knockout.js 学习体验之旅](1)ko初体验 [Knockout.js 学习体验之旅](2)花式捆绑 [Knockout.js 学习体验之旅](3)模板绑定 模板引擎 页面是由数据和HTML组件构成的,如何将数据嵌入到HTML组件里面呢?一个比较好的选择是使用模板技术. 回顾下第一篇([Knock

个人对php,js,css字符串截取的办法汇总

下面的是个人对php,js,css字符串截取的办法汇总,对大神来说可能没什么含量,求少喷哦,当然可以学习教程增强自己的编程能力. 首先是PHP版本的. 其实只用mb_strimwidth一个函数就可以了,该函数的说明如下: mb_strimwidth -  获取按指定宽度截断的字符串 string mb_strimwidth ( string $str , int $start , int $width [,  string $trimmarker = "" [, string $en

Ext JS学习第五天 Ext_window组件(一)

此文来记录学习笔记 •第一个组件:Ext.window.Window.对于组件,也就是Ext最吸引开发者的地方,那么我们要真正的使用Ext的组件,首先必须学会阅读API文档. –xtype:组件的别名 –Hierarchy 层次结构 –Inherited mixins 混入的类 –Requires 该组件需要使用的类 –configs:组件的配置信息 –properties:组件的属性 –methods:组件的方法 –events:组件的事件 •window组件常用属性和方法讲解: •confi

Ext JS学习第二天 我们所熟悉的javascript(一)

此文用来记录学习笔记: •ExtJS是一个强大的javascript框架,如果想真正的掌握ExtJS,那么我们必须要对javascript有一定的认识,所以很有必要静下心来,抱着一本javascript书籍,恶补一番.推荐书籍<javascript高级程序设计>.<javascript设计模式>. •在这里我们学习一下可能你从未接触过的javascript,这些javascript知识是我们要学好ExtJS这个框架非常有必要的.必备的知识.我们需要掌握的内容有: –javascri

Angular JS 学习笔记

特定领域语言 编译器:遍历DOM来查找和它相关的属性, 分为编译和链接两个阶段, 指令:当关联的HTML结构进入编译阶段时应该执行的操作,可以写在名称里,属性里,css类名里:本质上是函数 稳定的DOM:绑定了数据模型的DOM元素的实例不会在绑定的生命周期发生改变 作用域:用来检测模型的改变和为表达式提供执行上下文的 AngularJS 和其它模板系统不同,它使用的是DOM而不是字符串 指令: 由某个属性.元素名称.css类名出现而导致的行为,或者说是DOM的变化 Filter过滤器:扮演着数据

js学习笔记(一)

1.数组实用方法大全 1 //给数组添加个方法,返回数组中的最大值 2 Array.prototype.max = function() { 3 return Math.max.apply(null,this); 4 } 5 [1,2,3,4].max(); //4 6 7 //给数组添加个方法,给数组去重 8 Array.prototype.unique = function() { 9 return this.filter((item, index, arr) => arr.indexOf(

每日js学习笔记2014.5.4

<script language="javascript">var mystring = "这是第一个正则表达式的例子";var myregex = new RegExp("这是"); //创建正则表达式if (myregex.test(mystring)) //test的功能是查找字符串中是否有匹配项,有则返回true,没有则返回false{ document.write ("找到了指定的模式");}else{