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

Posted 2020-08-16 handsomecui

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Bom和Dom编程以及js中prototype的详解相关的知识，希望对你有一定的参考价值。

一.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>
    /*js之BOM和DOM
 [JS DOM&BOM]Web API
 JS中的BOM以及DOM操作
 js面试题-----DOM操作和BOM操作
 DOM和BOM
 JavaScript DOM编程艺术简略笔记