Javascript练习

1、时钟

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Javascript时钟</title>
    <script type="text/javascript">
        function currenttime(){
            setInterval(function (){
                var now = new Date();
                var str ='';
                str += now.getYear()+1900+'年';
                str += now.getMonth()+1+'月';
                str += now.getDate()+'日';
                str += now.getHours()+'时';
                str += now.getMinutes()+'分';
                str += now.getSeconds()+'秒';
                document.getElementById('left').innerHTML=str;
            },1000);
        }
    </script>
</head>
<body>
    <p>
        <input type="button" value="当前时间" onclick="currenttime();"/>
    </p>
    <h2 id="left"></h2>
</body>
</html>

此处出现Cannot set property 'innerHTML' of null 错误，原因是设置的编号与实际的编号不符，少了单引号。

2、创建动态样式

使用DOM样式对象创建一个允许控制页面文本颜色的页面。

style.js

function changehead(){
    i=document.form1.heading.selectedIndex;
    headcolor = document.form1.heading.options[i].value;
    document.getElementById("head1").style.color=headcolor;
}

function changebody(){
    i=document.form1.body.selectedIndex;
    doccolor = document.form1.body.options[i].value;
    document.getElementById("p1").style.color=doccolor;
}

注意：在函数内声明创建一个外围变量名相同的变量时，必须使用var关键字

ControlStyle.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Controlling Styles with JavaScript</title>
    <script type="text/javascript" src="styles.js"></script>
</head>
<body>
<h1 id="head1">Controlling Styles with JavaScript</h1>
<hr>
<p id="p1">
    Select the color for paragrahs and heading using the form below.
    The colors you specified will be dynamically changed in this document.
    The change occurs as soon as you changge  the value iof either of the  drop-down lists in the form.
</p>

<form name="form1">
    <b>Heading color:</b>
    <select name="heading" onchange="changehead();">
        <option value="black">Black</option>
        <option value="red">Red</option>
        <option value="blue">Blue</option>
        <option value="green">Green</option>
        <option value="yellow">Yellow</option>
    </select>
    <br>
    <b>Body text color:</b>
    <select name="body" onchange="changebody();">
        <option value="black">Black</option>
        <option value="red">Red</option>
        <option value="blue">Blue</option>
        <option value="green">Green</option>
        <option value="yellow">Yellow</option>
    </select>
</form>
</body>
</html>

3、冒泡排序

var a=[5,-6,0,124,123,45,98];
var flag=false;
for(var i=0;i< a.length-1;i++){
    for(var j=0;j< a.length-1-i;j++){
        if(a[j]>a[j+1]){
            var temp=a[j];
                    a[j]=a[j+1];
                    a[j+1]=temp;
                    flag=true;
                }
            }
            if(flag)
                flag=false;
            else
                break;
        }
        for(var i=0;i< a.length;i++){
    document.writeln(a[i]+"&nbsp;");
        }

4、二分查找

<script type="text/javascript">
        var arr = [1,4,53,343,1234];
        function binarySearch(arr,findVal,leftIndex,rightIndex){
             //前提 防止无穷递归
            if(leftIndex>rightIndex){
                document.writeln("找不到");
                return;
            }
             //找到中间值
            var midIndex=Math.floor((leftIndex+rightIndex)/2);
            var midVal=arr[midIndex];
            if(midVal>findVal){
                //左边找
                binarySearch(arr,findVal,leftIndex,midIndex-1);
            }else if(midVal<findVal){
                binarySearch(arr,findVal,midIndex+1,rightIndex);
            }else{
                document.writeln("找到下标为"+midVal);
                return;
            }
        }
        binarySearch(arr,4,0,arr.length-1);
    </script>

5、简单的在方框内移动，要求能用按钮移动，碰到边界停下

Mario.html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="Mario.css" type="text/css"/>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        function Mario(){
            this.x=0;
            this.y=0;

            this.move=function(direct){
              switch (direct){
                  case "up":
                      var mymario = document.getElementById('mymario');
                      var top= mymario.style.top;
                      top=parseInt(top.substr(0,top.length-2));
                      if(top>0)
                            mymario.style.top=(top-10)+"px";
                      break;
                  case "left":
                      var mymario = document.getElementById('mymario');
                      var left= mymario.style.left;
                      left=parseInt(left.substr(0,left.length-2));
                      if(left>0)
                         mymario.style.left=(left-10)+"px";
                   break;
                  case "down":
                      var mymario = document.getElementById('mymario');
                      var top= mymario.style.top;
                      top=parseInt(top.substr(0,top.length-2));
                      if(top<360)
                        mymario.style.top=(top+10)+"px";
                      break;
                  case "right":
                      var mymario = document.getElementById('mymario');
                      var left= mymario.style.left;
                      left=parseInt(left.substr(0,left.length-2));
                      if(left<450)
                        mymario.style.left=(left+10)+"px";
                      break;
              }
            }
        }

        var mario=new Mario();
        function Mariomove(direct){
            switch (direct){
                case "up":
                    mario.move("up"); break;
                case "left":
                    mario.move("left"); break;
                case "down":
                    mario.move("down"); break;
                case "right":
                    mario.move("right"); break;
            }
        }
    </script>
</head>
<body oncontextmenu="return false" onselectstart="return false">
<div class="gamediv">
    <img id="mymario" style="width: 50px; left:450px; top:340px; position:absolute;" src="my.jpg"  alt=""/>
</div>
<table class="control">
    <tr>
        <td colspan="3">游戏键盘</td>
    </tr>
    <tr>
        <td></td>
        <td><input type="button" value="up" onclick="Mariomove('up')"/></td>
        <td></td>
    </tr>
    <tr>
        <td><input type="button" value="left" onclick="Mariomove('left')"/></td>
        <td></td>
        <td><input type="button" value="right" onclick="Mariomove('right')"/></td>
    </tr>
    <tr>
        <td></td>
        <td><input type="button" value="down" onclick="Mariomove('down')"/></td>
        <td></td>
    </tr>

</table>
</body>
</html>

Mario.css

.gamediv{
    width: 500px;
    height: 400px;
    background-color: silver;
    position: relative;
}
.control{
    width: 200px;
    height: 200px;
    border: none;
}

6、正则验证email格式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>正则验证Email格式</title>
    <script type="text/javascript">
        function validateInput(){
            var myText = document.getElementById("myText");
            var email=myText.value;
            var emailReg=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
            if(emailReg.test(email)){
                alert("success!");
            }else{
                alert("检验失败！");
            }
        }
    </script>
</head>
<body style="text-align: center">
<input type="text" value="" id="myText" /> <br/><br/>
<input type="button" value="提交" id="myBtn" onclick="validateInput();"/>
</body>
</html>