JavaScript对象

数组对象使用实例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Array数组应用示例</title>
    <script type="text/javascript">
        var fruit=new Array("苹果","梨子","橙子");
        var fruit1=new Array("pear1","apple","orange");
        with(document){
            //push()在数组尾部添加数组元素,splice(m,n)删除在m位置的n个元素
            write("<ol>");
            write("<li>",fruit);
            write("<li>",fruit.join());
            write("<li>",fruit.join(""));//将数组内各个元素以分隔符连接成一个字符串,默认按逗号连接
            write("<li>",fruit.reverse());//reverse倒序数组对象
            write("<li>",fruit.concat(fruit1));//concat()方法用于连接两个或多个数组
            write("<li>",fruit1.sort());//sort按字典顺序对数组元素重新排版
            write("</ol>");
        }
    </script>
</head>

<body>
</body>
</html>

运行结果:

 

 String对象使用实例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>String对象应用示例</title>
    <script type="text/javascript">
        var str=new String("This is a test String");
        var firstIndex=str.indexOf("s");
        var lastIndex=str.lastIndexOf("s");
        var arr=new Array();
        arr=str.split(" ");
        len=str.length;
        result="第一个's'的位置是:"+firstIndex+"<br>最后一个's'的位置是:"+lastIndex+"<br>字符串对象的长度是:"+len+"<br>数组arr中的各个元素为:"+"<br>"+arr[0]+"<br>"+arr[1]+"<br>"+arr[2]+"<br>"+arr[3]+"<br>"+arr[4];
        document.write(result);
        document.write("<br><br>字符串对象的字符颜色显示为'红色':"+str.fontcolor("red"));
    </script>
</head>

<body>
</body>
</html>

运行结果:

 

 Math对象使用实例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Math对象应用示例-随机排版图片</title>
    <style type="text/css">
    /*以下是自适应屏幕宽度*/
        div{float: left;height: 160px;width: 160px;margin: 5px;padding: 0}
        div img{border: 0;}
        div a{display: block;padding: 35px 12px}
        div.vbg a{display: block;padding: 10px 35px 15px;}
        div.dispcenter{position: relative;margin: 0 auto;width: 700px;padding: 0 50px 0 70px;background: none;float: none}
    </style>
    <script type="text/javascript" language="javascript">
        document.write("<div class='dispcenter'>");
        var picArr=new Array();
        var m=0;
        for(i=1;i<=20;i++){
            if(i<10)
                i="0"+i;
            picArr.push(i);
        }
        while(picArr.length>0){
            i=Math.floor(Math.random()*(picArr.length-1));
            if(picArr[i]=="03"||picArr[i]=="04"||picArr[i]=="06"||picArr[i]==11||picArr[i]==14||picArr[i]==17||picArr[i]==19||picArr[i]==20){
                document.write("<div class='vbg'><ahref='photo/"+picArr[i]+".jpg'><img srt='photo/thumb/"+picArr[i]+".jpg' /></a></div>");
            }
            picArr.splice(i,1);
        }
        document.write("</div>");
    </script>
</head>

<body>
</body>
</html>

运行结果:未插入图片,请看主要代码

Date对象使用实例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Date对象应用示例</title>
    <script type="text/javascript">
        var today=new Date();
        var year=today.getFullYear();
        var month=today.getMonth()+1;
        var date=today.getDate();
        var day=today.getDay();
        var dayName=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
        var hour=today.getHours();
        var minute=today.getMinutes();
        var second=today.getSeconds();
        hour=(hour<10)?"0"+hour:hour;
        minute=(minute<10)?"0"+minute:minute;
        second=(second<10)?"0"+second:second;
        var time=hour+":"+minute+":"+second;
        document.write("现在的时间是"+year+""+month+""+date+""+time+" "+dayName[day]);
    </script>
</head>

<body>
</body>
</html>

运行结果:

 

 -------------------------------------------------------------------------

以下为浏览器对象:

创建警告对话框

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>警告对话框创建示例</title>
    <script type="text/javascript">
        document.title="警告对话框创建示例";
        function fun(testObject){
            if(testObject.value.length<6)
                alert("密码长度不得小于6位!");
        }
    </script>
</head>

<body>
    <form>
        请输入密码:
        <input type="password" name="pwd" onBlur="fun(this);">
    </form>
</body>
</html>

运行结果:

 

 创建确认对话框

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>创建确认对话框示例</title>
    <script type="text/javascript">
        function isConfirm(){
            if(confirm("你确认删除此信息吗?"))
                alert("信息已成功删除!");
            else
                alert("你取消了删除!");
        }
    </script>
</head>

<body>
    <form method="post" name="form1">
        <input type="button" value="删除" onClick="isConfirm()">
    </form>
</body>
</html>

运行结果:

 

 创建信息提示对话框

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>创建信息提示对话框示例</title>
    <script type="text/javascript">
        var name=prompt("请输入你的姓名","刘先生");
        document.write("你的名字是:"+name);
    </script>
</head>

<body>
</body>
</html>

运行结果:

 

 使用open()打开窗口

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>打开指定窗口(使用open()打开窗口示例)</title>
    <script language="javascript">
        var newWin=window.opener("Date对象应用示例.html","temp","left=50,top=120,"+"width=360,heigth=100,resizable=1");
    </script>
</head>

<body>
</body>
</html>

运行结果:请看主要代码

setInterval定时器应用实例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>setInterval定时器应用示例</title>
    <script language="javascript">
        var sec=0;
        timerID=setInterval("count()",1000);
        function count(){
            num.innerHTML=sec++;
        }
    </script>
</head>

<body>
    停留时间:<font ID="num" face="impact" color="red" size="7">0</font>
    秒钟:<input type="button" value="停止" onClick="clearInterval(timerID)">
</body>
</html>

运行结果:

 

 setTimeout定时器使用

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>setTimeout定时器应用示例</title>
    <style type="text/css">
        div{font-size: 20px;font-weight: bold;font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";}
    </style>
    <script type="text/javascript">
        msg=new Array();//存放显示文字数组
        msg.push("______");
        msg.push("你知道吗?");
        msg.push("______");
        msg.push("金庸写的14本书可以连成一个对联:");
        msg.push("______");
        msg.push("“飞雪连天射白鹿,笑书神侠倚碧鸳”");
        msg.push("______");
        msg.push("J.K.罗琳写的7本书也可以连成一句话:");
        msg.push("______");
        msg.push("“哈哈哈哈哈哈哈”");
        for(i=0;i<msg.length/2;i++){
            document.write("<div></div>");
        }
        interval=100;//定时器运行时间
        seq=0;//显示文字的位置
        i=0;//文字数组下标
        j=0;//div数组下标
        function Scroll(){
            if(i%2==0)
                document.getElementsByTagName("div").item(j).innerHTML=msg[i].substring(seq,seq+1)
            else
                document.getElementsByTagName("div").item(j).innerHTML=msg[i].substring(0,seq+1);
            seq++;
            if(seq>=msg[i].length){
                seq=0;
                i++;
                if(i%2==0)
                    j++;//要显示文字才换行
                interval=900;
            }
            if(i>=msg.length){
                i=0;
                j=0;
                setTimeout("clearText()",2000);//文字全部显示后停2s再清空
                return;//退出Scroll()函数
            }
            timerScroll=setTimeout("Scroll()",interval);
            interval=100;
        }
        //清空文本
        function clearText(){
            for(k=0;k<(document.getElementsByTagName("div").length);k++){
                document.getElementsByTagName("div").item(k).innerHTML="";
            }
            interval=100;
            Scroll();
        }
        
        
    </script>
</head>

<body onLoad="Scroll()" style="margin: 0 80px">
</body>
</html>

运行结果:

 

 location对象应用实例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>location对象应用实例</title>
    <script type="text/javascript">
        function currLocation(){
            alert(window.location);
        }
        function newLocation(){
            window.location="setInterval定时器应用示例.html";
        }
    </script>
</head>

<body>
    <input type="button" onClick="currLocation()" value="显示当前的URL">
    <input type="button" onClick="newLocation()" value="改变URL">
</body>
</html>

运行结果:

 

 document对象应用实例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>document对象应用实例</title>
    <script>
        document.title="document对象应用示例";
        var update_date=document.lastModified;
        document.write("本网页最后更新的时间是:"+update_date);
    </script>
</head>

<body>
</body>
</html>

运行结果:

 

 使用image对象实现鼠标移入时更换显示图片

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用image对象实现鼠标移入移出时更换显示图片</title>
</head>

<body>
    <img name="myimage" src="350724200004263015.jpg";
         onMouseOver="document.myimage.src='file:///F:/DW/%E7%AB%99%E7%82%B9/350724200004263015.jpg';"
         onMouseOut="document.myimage.src='file:///F:/DW/%E7%AB%99%E7%82%B9/350724200004263015.jpg';">
</body>
</html>

运行结果:请看主要代码

form对象(使用表单对象创建注册页面)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用表单对象创建注册页面</title>
    <style type="text/css">
        .inSize{height: 120px;width: 600px;font-size: 36px;font-weight: bold}
    </style>
    <script type="text/javascript">
        function check(){
            obj=document.form1;
            name=obj.uName.value;
            if(name=="")
                return;
            if(obj.uSex.checked==true){
                sex="";
                document.getElementById("textInfo").style.cssText="background-color:#000;color:#FFF;";
            }
            else{
                sex="";
                document.getElementById("textInfo").style.cssText="background-color:#FF9900;color:#000;";
            }
            index=obj.city.selectedIndex;
            selCity=obj.city.options[index].text;
            ah=new Array();
            for(i=4;i<=8;i++){
                if(obj.elements[i].checked==true)
                    ah.push(obj.elements[i].value);
            }
            if(ah==""){
                alert("请选择一项爱好!");
                return;
            }
            str="您所填写的信息:\n";
            str+="您的姓名是:"+name;
            str+=", "+sex;
            str+=",居住在"+selCity;
            str+="。您喜欢"+ah+"";
            document.getElementById("textInfo").value=str;
        }
        function getElements(){
            num=document.forms[0].length;
            num="一共用了 "+num+" 个表单元素";
            alert(num);
        }
        function setFocus(){
            document.getElementById("uName").focus();
        }
    </script>
</head>

<body onLoad="setFocus()">
    请填写个人信息:<br /><br />
    <div style="border-style: solid;border-color: #f00;border-width: 1px;width: 600px">
        <form id="form1" name="form1" method="post" action="javascript:check()">
            <label>姓名:
                <input type="text" name="uName" id="uName" />
                <br /><br />
            </label>
            性别:
            <label>
                <input name="radio" type="radio" id="uSex" value="uSex" checked="checked" /></label>
            <label>
                <input type="radio" name="radio" id="uSex2" value="uSex" /></label>
            <br /><br />
            <label>居住城市:
                <select name="city" id="city">
                    <option>北京</option>
                    <option>上海</option>
                    <option selected="selected">广州</option>
                    <option>沈阳</option>
                    <option>长春</option>
                    <option>哈尔滨</option>
                </select>
            </label>
            <br /><br />
            爱好:
            <label>
                <input type="checkbox" name="zq" id="zq" value="足球" />
                足球
            </label>
            <label>
                <input type="checkbox" name="yy" id="yy" value="音乐" />
                音乐
            </label>
            <label>
                <input type="checkbox" name="ly" id="ly" value="旅游" />
                旅游
            </label>
            <label>
                <input type="checkbox" name="yx" id="yx" value="游戏" />
                游戏
                <input type="checkbox" name="qt" id="qt" value="其他" />
                其他<br /><br />
            </label>
            <input type="submit" name="button" id="button" value="提交" />
            <input type="reset" name="button2" id="button2" value="重置" />
        </form></div><br />
        <textarea name="textInfo" cols="50" rows="4" readonly="readonly" class="inSize" id="textInfo"></textarea>
        <br /><br />
        <input type="button" name="button3" id="button3" value="表单所用的元素个数" onClick="getElements()"/>
</body>
</html>

运行结果:

 

posted @ 2019-10-24 21:08  恶魔岛  阅读(...)  评论(...编辑  收藏