纯JavaScript实现一些小功能

时间:2022-08-24 18:20:34

题目链接:http://wenku.baidu.com/link?url=7Gbarr5q9X6h1QFRVAsHmfPp1xXagG209mvrJqBogseb4WLeRqbVKwxQieoh8SL0-BDawlYXYr4vY1TSxgxNtTJ2kRDGust7XVFSiKDbBZC

一、实时刷新(1秒)的时钟

需要注意的地方:

JavaScript代码放置的位置问题,如果放在body元素之前,可能会出现getElementById找不到id,这是可能容易忽略的地方。要是忽略了,可能会骂街。。

另外,注意一下setInterval函数的调用方法,怎么写是正确的,怎么写是错误的!!

其他的没什么,上代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>实时时钟显示</title>
    <style type="text/css">
 *{ margin:0px auto;
 padding:15px;
 color:#90F;
 text-align:center;}
    </style>
    <script type="text/javascript">
        
        var myDate=function() { var date=new Date(); var year=date.getFullYear(); var month=date.getMonth(); var day=date.getDate(); var hours=date.getHours(); var minutes=date.getMinutes(); var seconds=date.getSeconds(); var str=year+''+month+''+day+''+'   '+hours+''+minutes+''+seconds+''; var myClock=document.getElementById("clock"); myClock.innerHTML=str; }; var timeOut=function() { //这种写法错误 不能使用双引号
                    //window.setInterval("myDate()“,1000); //注意这里不是setTimeout函数 以毫秒为单位
                    //写法错误 函数的小括号不能省略
                    //window.setInterval('myDate',1000); //注意这里不是setTimeout函数 以毫秒为单位
                    //写法正确 注意使用的是单引号 
                    //window.setInterval('myDate()',1000); //注意这里不是setTimeout函数 以毫秒为单位
                    //下面的写法也可以 函数没有小括号
 window.setInterval(myDate,1000); //注意这里不是setTimeout函数 以毫秒为单位
                    //下面的写法也是可以的 
                    //不过据说这时myDate()函数会立即执行 这个待研究
                    //window.setInterval(myDate(),1000); //注意这里不是setTimeout函数 以毫秒为单位
 } window.onload=timeOut; </script>
    
</head>

<body>
    <h1>
 测试时间 <p id="clock">
         </p>
    </h1>  
</body>
</html>

运行截图:

纯JavaScript实现一些小功能

 

这里插一段循环计数的定时器代码:

<script type="text/javascript">
            function count(start, end) 
            {
                var time=null;
                var ct=start;
                this.s=function()
                {
        
                console.log(ct);
                ct+=1;
                if(ct>end)
                    {
                    ct=start;
                    }
                }
                s();
                   time=setInterval("s()",1000); 
       
                this.cancel=function()
                {
                    clearInterval(time);
                }
                return this;
            }
            var temp=count(1,5);
            //temp.cancel();    用于取消定时器
        </script>

纯JavaScript实现一些小功能

二、生成10个100-1000之间的随机整数数

需要用的函数Math.random(),以及Math.floor()函数

参考网址:http://www.111cn.net/wy/js-ajax/57062.htm

Math.random()函数,默认生成的是介于0-1之间的随机小数,那如果按照题目的意思,我们就应该使用(Math.random()*(1000-100+1)+100),然后再取整,这样就可以达到我们的要求了。

代码:

for(var i=0;i<10;i++)
        {
            var temp=Math.floor(Math.random()*901+100);
            console.log(temp);
            document.write(temp+'\t');
        }

运行截图:

纯JavaScript实现一些小功能

三、一个简单的登陆表单验证代码段

JavaScript代码:

var check=function()
                {
                    var log_name=document.getElementById("log_name");
                    if(!log_name.value)
                        {alert("请输入用户名");}
                    var log_pass=document.getElementById("log_password");
                    if(!log_pass.value)
                        {alert("请输入密码");}
                }

html代码(这里我们暂时忽略css代码,我这里也确实没有写CSS代码来控制样式,这里它不是重点):

<form>
        <label>用户名:</label>
        <input id="log_name" type="text" placeholder="请输入用户名">
        <label>&nbsp;&nbsp;码:</label>
        <input id="log_password" type="password" placeholder="请输入密码">
        <input type="submit" value="登陆" onClick="check()">
    </form>

运行截图,什么也不输入的时候,直接点击submit按钮:

纯JavaScript实现一些小功能

这里啰嗦几句:

那就是如何检测输入框 的内容为空,我们分别测试一下以下几种情况:

’,“”,null,undefined

经过测试,只有“”和‘,是可以成功检测的,当然按照刚刚上面的代码那样使用!符号测试也是可以的。

以下是测试代码,为了分别,我直接把代码也截到图里面了。

“”的情况:

纯JavaScript实现一些小功能

‘’的情况:

纯JavaScript实现一些小功能

null的情况(从截图中可以看出,用户名的输入框并没有被正确的检测出来):

纯JavaScript实现一些小功能

undefined的情况(同样没正确检测出来):

纯JavaScript实现一些小功能

四、cookie的使用(设置、获取以及有效期设置)

注意几点:

首先,cookie的设置和获取函数怎么实现的?

其次,有效期怎么设置(一个月)?

再次,使用正则表达式过滤字符串的空格时的注意事项。。。

代码:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <Script type="text/javascript">
    function save()
    {
        if((document.myForm.uname.value)&&(document.myForm.upass.value))
        {
            if(confirm("是否保存用户名密码?"))
            {
                saveUserName();
                saveUserPass();
            }
        }
        else if(!document.myForm.uname.value)
        {
            alert("用户名不能为空!");
            document.myForm.uname.focus();
            //document.myForm.uname.select();
            return false;    //这句话不可少  否则输入焦点将不能定位到输入框  确切的说是定位了然后又移开了(过程一闪而过)
        }
        else if(!document.myForm.upass.value)
        {
            alert("密码不能为空!");
            //document.myForm.upass.select();
            document.myForm.upass.focus();
            return false;    
        }
    }
    function saveUserName(){
        var userName ='';
        userName = document.myForm.uname.value;
        var exp=new Date();
        exp.setTime(exp.getTime()+30*24*60*60*1000);    //设置过期时间为一个月
        document.cookie="un="+userName+";expires=" + exp.toGMTString(); ;
    }
    function saveUserPass(){
        var userPass ='';
        userPass = document.myForm.upass.value;
        document.cookie="pwd="+userPass;
    }
    /*function getCookie(key,cookie){
        var r=new RegExp(key+'=([^;]+)','i')
        var m=r.exec(cookie);
        if(m)return m[1];
        return ''
    }*/
    
    function getCookie(key,cookie)
    {
        //var strCookie=document.cookie;    //获取cookie字符串 
        var arrCookie=cookie.split(";");    //将多cookie切割为多个名/值对
        for(var i=0;i<arrCookie.length;i++)
        {
            var arr=arrCookie[i].split("=");
            //注意这里一定要有str来接收返回值  这里的正则表达式是不会改变arr[0]的值的      切结!!!!!
            str=arr[0].replace(/(^\s*)|(\s*$)/g,"");//正则表达式去掉字符串头和尾的空格
            if((key==str))
            {
                    return arr[1];
            }
        }
        return "";
    }
    
    function show(){
        var strCookie = document.cookie;
        var userName ;
        var userPass ;
        if(strCookie == null){                //cookie为空
            document.myForm.uname.value="";
            document.myForm.upass.value="";
        }else{

            userName = getCookie('un',strCookie);
            userPass = getCookie('pwd',strCookie);
            //alert(userPass);
            document.myForm.uname.value = userName;
            document.myForm.upass.value = userPass;
        }
    }
    </Script>
    <style type="text/css">
        *{
            margin:0 auto;
            padding:15px;
            color:#90F;}
    </style>
    </head>
 
    <body>
         
        <form action="test1.html" name="myForm" method="post">
            用户名:<input type="text" name="uname" placeholder="请输入用户名"/>&nbsp码:
            <input type="text" name="upass" placeholder="请输入密码"/><!--这里为了看到密码,故没有设置隐藏密码-->
            <br />
            <br />
            <input type="submit" name="submit" value="提交" onclick="return save()"/>
            <input type="button" value="自动填充用户名密码" onClick="show()"/>
            <input type="reset" name="reset" value="重置"/>
 
        </form>
    </body>
</html>

运行截图(IE11可以正常运行,但是chrome不行,不知道为什么。。。):

纯JavaScript实现一些小功能

点击提交,会弹出保存密码对话框,选择确定,会跳转到另外一个页面。

纯JavaScript实现一些小功能

纯JavaScript实现一些小功能

顺便上一下另外一个页面的代码,便于实际测试运行(两个页面文件嬴荡放在同一目录下):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>测试字符串</title>
        <script type="text/javascript">
            var s = " asd ddd bbb sss "; 
            document.write(s.length+'\n');
            document.write(s+'\n');
            
            var reg = /\s/g;     //去掉所以的空格
            var ss = s.replace(reg, ""); 
            document.write(ss.length+'\n');
            document.write(ss+'\n');
            
            var reg=/(^\s*)|(\s*$)/g;    //去掉头尾的空格
            var ss = s.replace(reg, ""); 
            document.write(ss.length+'\n');
            document.write(ss+'\n');
            
        </script>
        <style type="text/css">
            *{
                margin:0 auto;
                padding:15px;
                color:#90C;
                text-align:center;}
        </style>
    </head>
    <body>
        
    </body>
</html>

五、滚动显示文字

实现一个文本输入框内的文字滚动显示,从右向左滚动

这里运用了一个string对象的substring方法

substring(<从位置>,<到位置>)——截取一个子字符串

代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>文字循环显示</title>
        <script type="text/javascript">
            var str="这是一串测试文字。你知道吗?我不知道。"
            var loopDisplay=function()
            {
                txt.value=str;
                str=str.substring(1,str.length)+str.substring(0,1);    //重新拼接字符串
                setTimeout(loopDisplay,500);    //定式刷新 产生滚动显示效果
            }
        </script>
        <style type="text/css">
            p input{
                display:block;
                margin:0 auto;
                margin-top:100px;
                width:300px;
                height:50px;
                font-size:20px;
                border:2px solid #666;
                border-radius:5px;
                box-shadow:0px 0px 10px #0000FF;}
        </style>
    </head>
    <body onLoad="loopDisplay()">
        <p><input id="txt" type="text"></p>
    </body>
</html>

截图如下:

纯JavaScript实现一些小功能

纯JavaScript实现一些小功能

以上是,从右往左滚动,那么,从左往右滚动呢?

很简单,上面的代码:改一句

str=str.substring(str.length-1,str.length)+str.substring(0,str.length-1);    //重新拼接字符串
改成上面这样就可以了。