Bom和Dom编程以及js中prototype的详解

2022-09-19 20:27:29

一.Bom编程：

1.事件练习：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<script>

        function getCurrentTime(){

        var date = new Date();

        var timeInfo = date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日"+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();

        //alert(timeInfo);

        var spanobj = document.getElementById("time");

        spanobj.innerHTML = timeInfo.fontcolor("red");

        }

        function showTime(){

            getCurrentTime();

            //window.setInterval("getCurrentTime()",1000);

        }

        function hideTime(){

            var spanobj = document.getElementById("time");

            spanobj.innerHTML = "";

        }

        function clickTest(){

            alert("单击");

        }

        function dblclick(){

            alert("双击");

        }

        function showInfo(){

            var usename=document.getElementById("username");

            usename.innerHTML="请输入账号".fontcolor("red");

        }

        function hideInfo(){

            var usename=document.getElementById("username");

            usename.innerHTML="";

        }

        //onchange

        function showURL(){

            alert(location.href);

        }

        function download(){

            location.href="http://handsomecui.top";

        }

        function refresh(){

            location.reload();

        }

        //setInterval("refresh()",1000);

        document.write("获取系统屏幕的工作区域高度："+screen.availHeight+"<br/>");

        document.write("获取系统屏幕的工作区域宽度："+screen.availWidth+"<br/>");

        document.write("获取屏幕的垂直分辨率："+screen.height+"<br/>");

        document.write("获取屏幕的水平分辨率："+screen.width+"<br/>");

</script>

</head>

<body onload="showTime()">

    <span onmousemove="showTime()" onmouseout="hideTime()">显示当前系统时间。。。</span><span id="time"></span>

    <input type="button" onclick="clickTest()" ondblclick="dblclick()"  value="点击" />

    <br/>

    username:<input type="text" onfocus="showInfo()" onblur="hideInfo()" /><span id="username"></span>

    <input type="button" onclick="showURL()" value="显示地址栏" />

    <span onclick="download()">下载电影</span>

</body>

</html>

2.循环打开窗口以及浏览器的大小位置设置练习：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>BOM练习</title>

<script>

    function showAd(){

        window.open("http://baidu.com","_blank","height=400px,width=400px,toobar=no,location=no,top=200px");

    }

    function small(){

        window.resizeTo(300,200);

    }

    var id = setInterval("showAd()", 2000);

    function clearTask(){

        clearInterval(id);

    }

    //setTimeout

</script>

</head>

<body>

    <input type="Button" onclick="showAd()" value="下载电影"/>

    <input type="Button" onclick="small()" value="变小">

    <input type="Button" onclick="clearTask()", value="取消任务"/>

</body>

</html>

二. Dom编程：

1.几种找dom树节点方法的简单练习：

getElementById();

getElementsByName();

getElementsByTagName();

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<script>

    function showText(){

        var input=document.getElementById("inputtest");

        input.value="设置好了";

    }

    function showImg(){

        var images = document.getElementsByTagName("img");

        for(var i=0;i<images.length;i++){

            images[i].src="../data/1.jpg";

            images[i].width=200;

            images[i].height=200;

        }

    }

    function showdiv(){

        var mydivs=document.getElementsByName("mydiv");

        //alert(mydivs.length);

        for(var i=0;i<mydivs.length;i++){

            mydivs[i].innerHTML="哈哈哈哈".fontcolor("red");

        }

    }

</script>

</head>

<body>

    <input type="text" value="请输入内容" id="inputtest" />

    <input type="button" value="显示内容" id="button" onclick="showText()" />

    <img src=""/>

    <img src=""/>

    <img src=""/>

    <input type="button" value="显示图像"  onclick="showImg()" />

    <div name="mydiv"></div>

    <div name="mydiv"></div>

    <div name="mydiv"></div>

    <input type="button" value="显示div"  onclick="showdiv()" />

</body>

</html>

2.通过复选框求商品价格的小练习：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>求商品价格</title>

<script>

    function allSelect(ap){

        var p=document.getElementsByName("product");

        for(var i = 0; i < p.length; i++){

            if(ap.checked == 1)

                p[i].checked = 1;

            else

                p[i].checked = 0;

        }

    }

    function count(bt){

        var p=document.getElementsByName("product");

        var sum=0;

        for(var i = 0; i < p.length;i++){

            if(p[i].checked)

                sum += parseInt(p[i].value);

        }

        bt.value="总金额为";

        var money=document.getElementsByTagName("span")[0];

        money.innerHTML=("&nbsp;&nbsp;&nbsp;&yen;"+sum).fontcolor("green");

    }

</script>

</head>

<body>

    商品列表：<br/>

    <input type="checkBox" name="product" value="2800" id="product1"/>笔记本电脑2800元<br/>

    <input type="checkBox" name="product" value="2600" id="product2"/>笔记本电脑2600元<br/>

    <input type="checkBox" name="product" value="3800" id="product3"/>笔记本电脑3800元<br/>

    <input type="checkBox" name="product" value="3600" id="product4"/>笔记本电脑3600元<br/>

    <input type="checkBox" name="product" value="2700" id="product5"/>笔记本电脑2700元<br/>

    <input type="checkBox" name="product" value="2900" id="product6"/>笔记本电脑2900元<br/>

    <input type="checkBox" name="product" value="3700" id="product7"/>笔记本电脑3700元<br/>

    <input type="checkBox" name="product" value="3900" id="product8"/>笔记本电脑3900元<br/>

    <input type="checkBox" id="allproduct" onclick="allSelect(this)" />全选<br/>

    <input type="button" onclick="count(this)" value="总金额：" />

    <span></span>

</body>

</html>

3.通过关系找标签，创建添加删除标签的练习以及实现在表格中添加删除多个文件，实现一个日期选择的联动框：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>通过关系找标签</title>

<script>

    /*

        通过关系(父子关系、兄弟关系)找标签。

        parentNode    获取当前元素的父节点。

        childNodes    获取当前元素的所有下一级子元素。

        firstChild    获取当前节点的第一个子节点。

        lastChild    获取当前节点的最后一个子节点。

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

        nextSibling        获取当前节点的下一个节点。（兄节点）

        previousSibling    获取当前节点的上一个节点。（弟节点)

        我们可以通过标签的类型进行判断筛选：

        文本节点的类型： 3

        注释的节点类型： 8

        标签节点的类型： 1

        创建字节入插入节点、设置节点的属性。

        document.createElement("标签名")        创建新元素节点

        elt.setAttribute("属性名", "属性值")    设置属性

        elt.appendChild(e)                        添加元素到elt中最后的位置

        elt.insertBefore(newNode,oldNode);

    */

    function isRun(y){

        if(y%400==0 || (y%4==0&&y%100!=0))

            return 1;

        else

            return 0;

    }

    function start(){

        var s="";

        var bodyNode = document.getElementsByTagName("body")[0];

        s = s + "body的父节点：" + bodyNode.parentNode.nodeName + "<br/>";

        var showText = document.getElementsByTagName("span")[0];

        var children = bodyNode.childNodes;

        s = s + "body子节点是：" + "<br/>";

        for(var i = 0; i < children.length; i++){

            s = s + children[i].nodeName + "   对象类型是: " + children[i].nodeType +"<br/>";

        }

        s = s + "span的下一个兄弟节点是：" + showText.nextSibling.nodeName + "<br/>";

        s = s + "span的上一个兄弟节点是：" + showText.previousSibling.nodeName + "<br/>";

        showText.innerHTML = s.fontcolor("red");

        var m=[0,31,28,31,30,31,30,31,31,30,31,30,31];

        var selectNodeYear = document.getElementsByTagName("select")[0];

        var selectNodeMonth = document.getElementsByTagName("select")[1];

        var selectNodeDay = document.getElementsByTagName("select")[2];

        var curDate = new Date();

        //alert(curDate.getYear());

        //初始化年

        for(var i=1900; i<=curDate.getFullYear(); i++){

            var newOption = document.createElement("option");

            newOption.innerHTML = i;

            if(i == curDate.getFullYear()){

                newOption.setAttribute("selected","selected");

            }

            selectNodeYear.appendChild(newOption);

        }

        //初始化月

        for(var i=1; i<=12; i++){

            var newOption = document.createElement("option");

            newOption.innerHTML = i;

            if(i == curDate.getMonth()+1){

                newOption.setAttribute("selected","selected");

            }

            selectNodeMonth.appendChild(newOption);

        }

        //初始化日

        if(isRun(curDate.getFullYear()))

            m[2] = 29;

        else

            m[2] = 28;

        //alert(m[2]);

        //alert(curDate.getDay());注意getDay是获取星期几的；

        for(var i = 1; i <= m[curDate.getMonth()+1]; i++){

            var newOption = document.createElement("option");

            newOption.innerHTML = i;

            if(i == curDate.getDate()){

                newOption.setAttribute("selected","selected");

            }

            selectNodeDay.appendChild(newOption);

        }

    }

    var num=1;

    function add(){

        var inputNode = document.createElement("input");

        inputNode.setAttribute("type", "button");

        inputNode.setAttribute("value", "新按钮"+(num++));

        var bodyNode = document.getElementsByTagName("body")[0];

        bodyNode.appendChild(inputNode);

    }

    function addfile(inputNode){

        var tbodyNode=document.getElementsByTagName("tbody")[0];

        var newtr = document.createElement("tr");

        var newtd1 = document.createElement("td");

        var newtd2 = document.createElement("td");

        newtd1.innerHTML = "<input type='file'/>";

        newtd2.innerHTML = "<a href='#' onclick='deletefile(this)'>删除附件</a>";

        newtr.appendChild(newtd1);

        newtr.appendChild(newtd2);

        //tableNode.appendChild(newtr);

        //alert(inputNode.parentNode.nodeName);

        tbodyNode.insertBefore(newtr,inputNode.parentNode.parentNode);//注意必须是tr的直接父节点，所以是tbody

    }

    function deletefile(deleteNode){

        var tbodyNode=document.getElementsByTagName("tbody")[0];

        tbodyNode.removeChild(deleteNode.parentNode.parentNode);

    }

    //月改变对应修改日的范围

    function addDay(){

        var m=[0,31,28,31,30,31,30,31,31,30,31,30,31];

        var selectNodeYear = document.getElementsByTagName("select")[0];

        var selectNodeMonth = document.getElementsByTagName("select")[1];

        var selectNodeDay = document.getElementsByTagName("select")[2];

        selectNodeDay.length = 0;

        /*

            if(selectNodeMonth[i].getAttribute("selected") == "selected"){

                alert(i);

            }

            这样只会找到默认显示的位置假设今天是10月那么只会找到9

            可以直接用selectedIndex属性来得到选中的月份

        */

        if(isRun(selectNodeYear.selectedIndex + 1900))

            m[2] = 29;

        else

            m[2] = 28;

        //alert(m[2]);

        //alert(curDate.getDay());注意getDay是获取星期几的；

        for(var i = 1; i <= m[selectNodeMonth.selectedIndex + 1]; i++){

            var newOption = document.createElement("option");

            newOption.innerHTML = i;

            selectNodeDay.appendChild(newOption);

        }

    }

</script>

</head>

<body onload="start()">

    <!-- gasfa -->

    <span></span>

    <input type="button" onclick="add()" value="点我" />

    <table>

    <tr>

    <td><input type="file"/></td> <td><a href="#" onclick="deletefile(this)">删除附件</a></td>

    </tr>

    <tr>

    <td><input type="button" value="添加附件" onclick="addfile(this)"/></td>

    </tr>

    </table>

    年<select onchange="addDay()"></select>

    月<select onchange="addDay()"></select>

    日<select></select>

</body>

</html>

4.通过css的操作，实现一个验证码；以及正则表达式判定一个表单

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

</head>

<script>

/*

    正则表达式的创建方式：

            ""    

        方式1：

            /正则表达式/模式

        方式2：

            new RegExp("正则表达式",模式);

    正则表达式对象常用的方法：

         test()  使用正则对象去匹配字符串  如果匹配成功返回ture，否则返回false.

         exec()  根据正则表达式去查找字符串符合规则的内容。

    模式：

        g （全文查找出现的所有 pattern）

        i （忽略大小写）

*/

    function createCode(){

        var d = ['1', '2', '你', '好', 'A', 'B'];

        var str="";

        for(var i = 0; i < 4; i++){

            //alert(Math.random()*6);

            str += d[Math.floor(Math.random()*d.length)];

        }

        var spanNode = document.getElementById("code");

        spanNode.innerHTML = str;

        spanNode.style.fontSize = '16pt';

        spanNode.style.fontStyle = 'italic';

        spanNode.style.backgroundColor = 'gray';

        spanNode.style.textDecoration = 'line-through';

        spanNode.style.color = 'green';

    }

    function searchStr(){

        var strNode = document.getElementsByTagName("input")[0];

        var str = strNode.value;

        var reg = /^[A-Z0-9]+$/i;

        var spanNode = document.getElementById("test");

        spanNode.innerHTML = '匹配吗？' + reg.test(str) + '<br/>';

        reg = /\b[a-z]{3}\b/gi;

        var line="";

        spanNode.innerHTML = '';

        while((line=reg.exec(str)) != null){

            spanNode.innerHTML = spanNode.innerHTML + line + '<br/>';

        }

    }

    function checkName(){

        var inputNode = document.getElementById("userName");

        var spanNode = document.getElementById("userId");

        var content = inputNode.value;

        var reg = /^[a-z][a-z0-9]{5}$/i;

        if(reg.test(content)){

            spanNode.innerHTML = "正确".fontcolor("green");

            return true;

        }

        else{

            spanNode.innerHTML = "错误".fontcolor("red");

            return false;

        }

    }

    function checkPass(){

    }

    function ensurepass(){

        var pwd1Node = document.getElementById("pwd");

        var pwd2Node = document.getElementById("ensurepwd");

        var pwd1 = pwd1Node.value, pwd2 = pwd2Node.value;

        var spanNode = document.getElementById("ensure");

        if(pwd1 == pwd2){

            spanNode.innerHTML = "正确".fontcolor("green");

            return true;

        }

        else{

            spanNode.innerHTML = "错误".fontcolor("red");

            return false;

        }

    }

    function checkEmail(){

        var email = document.getElementById("email").value;

        var spanNode = document.getElementById("emailspan");

        var reg = /^[a-z0-9]\w+@[a-z0-9]+(\.[a-z]{2,3}){1,2}$/i;

        if(reg.test(email)){

            spanNode.innerHTML = "正确".fontcolor("green");

            return true;

        }

        else{

            spanNode.innerHTML = "错误".fontcolor("red");

            return false;

        }

    }

    function checkAll(){

        var userName = checkName();

        var email = checkEmail();

        var ensure = ensurepass();

        if(userName&&email&&ensure){

            return true;

        }else{

            return false;

        }

    }

</script>

<body>

    <span id="code"></span><a href="#" onclick="createCode()">看不清，换一个</a>

    <br/>

    <input type="text" /><input type="button" value='查询' onclick='searchStr()'/>

    <br/>

    <span id='test'></span>

    <form action="success.html" method="get" onsubmit="return checkAll()" > <!--如果表单提交时候触发的方法返回是false,那么该表单不允许提交，如果返回的是true允许提交 -->

            <table border="1px" width="50%" align="center" cellspacing="0px" cellpadding="3px">

                <tr>

                    <td width="25%">姓名:</td>

                    <td>

                        <input type="text" name="userName" id="userName" onblur="checkName()"/>

                        <span id="userId"></span>

                    </td>

                </tr>

                <tr>

                    <td >密码:</td><td>

                        <input type="password"  name="pwd" id="pwd" onblur="checkPass()"/>

                        <span id="passId"></span>

                    </td>

                </tr>

                <tr>

                    <td>确认密码:</td><td>

                <input type="password" name="ensurepwd" id="ensurepwd" onblur="ensurepass()" />                        <span id="ensure"></span>

                    </td>

                </tr>

                <tr>

                    <td>邮箱</td><td>

                        <input type="text" name="email" id="email" onblur="checkEmail()"/>

                        <span id="emailspan"></span>

                    </td>

                </tr>

                <tr>

                    <td>性别</td><td>

                        <input type="radio" checked="ture" name="gender" id="male" value="male"/>

                    男

                        <input type="radio" name="gender" value="female"/>

                    女</td>

                </tr>

                <tr>

                    <td>爱好:</td><td>

                        <input type="checkbox"  name="like" />

                    eat

                        <input type="checkbox" name="like" />

                    sleep

                        <input type="checkbox" name="like"/>

                    play

                    <span id="hobbySpan"></span>

                    </td>

                </tr>

                <tr>

                    <td>城市</td><td>

                    <select name="city" id="city">

                        <option value=""> 请选择</option>

                        <option value="bj"> 北京 </option>

                        <option value="gz"> 广州 </option>

                        <option value="sh"> 上海 </option>

                    </select>

                    </td>

                </tr>

                <tr>

                    <td>自我介绍</td><td>                    <textarea cols="15" rows="5"  name="myInfo" id="myInfo"></textarea></td>

                </tr>

                <tr align="center">

                    <td colspan="2"><!--提交按钮-->

                    <input type="submit"/>

                    </td>

                </tr>

            </table>

        </form>

</body>

</html>

三. prototype：

1.js中的简单练习以及完成查询对应月份的日期、通过prorotype完成字符串翻转，显示系统时间：

<html>

    <head>

        <meta charset="gb2312"/>

        <title>JavaScript Exercise</title>

        <script>

            function add(a, b){

                with(document){

                    write("a + b = " + (a+b) + "<br/>");

                    for(var index in arguments){

                        write("第" + index + "个元素是：" + arguments[index] + "<br/>");

                    }

                }

            }

            add(1, 2);

            function showday(){

                var m=[0,31,28,31,30,31,30,31,31,30,31,30,31];

                var inputobj = document.getElementById("month");

                alert(inputobj.value + "月的天数是：" + m[parseInt(inputobj.value)]);//这里不要parseint也可以，会自动转

            }

        </script>

    </head>

    <body>

    <script>

        var arr=new Array(17,25,10,18,1,110);

        arr.reverse();

        arr.sort(cmp);

        arr = arr.join(",");

        for(var i=0; i <arr.length; i++){

            document.write(arr[i]);

        }

        function cmp(num1,num2){

            return num1-num2;

        }

    </script>

    <script>

        function Person(id, name){

            this.id = id;

            this.name = name;

            this.say = function(){

                alert(name + "呵呵");

            }

        }

        var p = new Person(110,"张三");

        p.say();

        var tool = new ArrayTool();

        function ArrayTool(){

            this.Max = function(arr){

                var max = arr[0];

                for(var i = 1; i < arr.length; i++){

                    if(arr[i] > max){

                        max = arr[i];

                    }

                }

                return max;

            }

            this.searchEle = function(arr, Ele){

                for(var i = 0; i < arr.length; i++){

                    if(arr[i] == Ele)

                        return i;

                }

                return -1;

            }

        }

        Max = function(){

            var max = this[0];

            for(var i = 1; i < this.length; i++){

                if(this[i] > max){

                    max = this[i];

                }

            }

            return max;

        }

        //prototype

        Array.prototype.getMax = Max;

        Array.prototype.getindex = function(Ele){

            for(var i = 0; i < this.length; i++){

                if(this[i] == Ele)

                    return i;

            }

            return -1;

        }

        var arr = [25,12,110,26,21];

        document.write("最大值是：" + tool.Max(arr) + "     26的索引是：" + tool.searchEle(arr,26) + "<br/>");

        document.write("哈哈最大值： " + arr.getMax() + "  哈哈12的索引是：" + arr.getindex(12) + "<br/>");

    </script>

        月份：<input id="month" type="text" /><input type="button" value="查询" onClick="showday()"/>

        <br/>

        当前系统时间：<span id="time"></span>

        <script src="reverse.js" type="text/javascript"></script>

    </body>

    <script>

        function getCurrentTime(){

        var date = new Date();

        var timeInfo = date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日"+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();

        var spanobj = document.getElementById("time");

        spanobj.innerHTML = timeInfo.fontcolor("red");

        }

        getCurrentTime();

        window.setInterval("getCurrentTime()",1000);

    </script>

</html>

reverse.js:

    String.prototype.tocharArray = function(){

        var arr = new Array();

        for(var i = 0; i < this.length; i++){

            arr[i] = this.charAt(i);

        }

        return arr;

    }

    var str = "你们好屌啊";

    var arr = str.tocharArray();

    document.write("<br/>转化成字符数组后：" + arr.join(","));

    /*

    for(i in arr){

        document.write(arr[i]);

    }

    */

    String.prototype.reverse = function(){

        var arr = this.tocharArray();

        arr.reverse();

        return arr.join("");

    }

    arr = str.reverse();

    document.write("<br/> 翻转后：" + arr);

欢迎访问handsomecui的blog地址：

http://www.cnblogs.com/handsomecui/

网站：handsomecui.top

码农公寓

相关文章