黑马程序员--Window对象的属性

最新推荐文章于 2022-11-16 18:15:12 发布

u011411356

最新推荐文章于 2022-11-16 18:15:12 发布

阅读量681

点赞数

分类专栏： JavaScript 文章标签：对象的属性

本文链接：https://blog.csdn.net/u011411356/article/details/9383029

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

---------------------- ASP.Net+Android+IOS开发、.Net培训、期待与您交流！ ----------------------

承接上文：Window对象的属性4

▶ 3、（*）getElementsByName，根据元素的name获得对象，由于页面中元素的name可以重复，比如多个RadioButton的name一样，因此getElementsByName返回值是对象数组

▶ 4、（*）getElementBysTagName，获得指定标签名称的元素数组，比如getElementBysTagName(“p”)可以获得所有的<p>标签

▶ 点击一个按钮，被点击的按钮显示”呜呜”，其他按钮显示”哈哈”

<script type="text/javascript">
        function initEvent() {
            var inputs = document.getElementsByTagName("input");
            for (var i = 0; i < inputs.length; i++)
            {
                var input = inputs[i];
                // 给元素动态设事件 onClick 
                input.onclick = btnClick;
            }
        }
        function btnClick() {
            var inputs = document.getElementsByTagName("input");
            for (var i = 0; i < inputs.length; i++) {
                var input = inputs[i];
                // window.event.srcElement,  取得引发事件的控件
                if (input == window.event.srcElement) {
                    input.value = "呜呜";
                }
                else {
                    input.value = "哈哈";
                }
            }
        }
    </script> <body οnlοad="initEvent()">
    <input type="button" value="哈哈哈" />
    <input type="button" value="hahaha" />
    <input type="button" value="哈哈哈" />
    <input type="button" value="哈哈哈" />
    <input type="button" value="哈哈哈" />
    <input type="button" value="hahaha" />
    <input type="button" value="哈哈哈" />
    <input type="button" value="哈哈哈" /></body>

▶ 案例：加法计算器

代码如下：

<script type="text/javascript">
       function calcClick() {
           var value1 = document.getElementById("txt1").value;
           var value2 = document.getElementById("txt2").value;
           value1 = parseInt(value1, 10); // Js是弱类型的
           value2 = parseInt(value2, 10);

           document.getElementById("txtResult").value = value1 + value2;    //文本1的值加上文本2的值所得结果

       }

   </script>

</script>
<body>
    <input type="text" id="txt1" />+<input type="text" id="txt2" />
    <input type="button" value="=" οnclick="calcClick()" /> <input type="text" id="txtResult" readonly="readonly" />结果文本设置为只读。本来就是相加得到的，不是填的

</body>

▶ 案例：十秒钟后协议文本框下的注册按钮才能点击 (btn.disabled=true)

思路：

1、注册按钮初始状态为不可用，disabled

2、启动定时器，setInterval，一秒钟运行一次CountDown方法，设定一个初始值为10的全局变量，在CountDown方法中对全局变量倒数，然后将倒数的值写到注册按钮上(请仔细阅读协议（还剩8秒）)

3、直到全局变量值为<=0，就让注册按钮可用，将按钮的文本设置为“同意”

代码：

<script type="text/javascript" >
        var leftSeconds = 10;
        var intervalId;
        function CountDown() {
            var btnReg = document.getElementById("btnReg");
            if (btnReg) {  // 如果网页速度非常慢的话，可能定时器运行的时候控件还没有加载 
                if (leftSeconds <= 0) {
                    btnReg.value = "同意";
                    btnReg.disabled = "";  //btnReg.disabled=false;这也可以
                    clearInterval(intervalId); // 停止定时器 
                 }
                else {
                    btnReg.value = "请仔细阅读协议（还剩" + leftSeconds + "）";
                    leftSeconds--;

                }
            }
        }
        intervalId = setInterval("CountDown()", 1000);
 </script>
<body>
    <textarea></textarea>
    <input id="btnReg" type="button" value="同意" disabled="disabled" />

</body>

▶ 练习：美女时钟

<script type="text/javascript">
        function fill2Len(i) {
            if (i < 10) {
                return "0" + i;   // 每到1-9分钟时都在十位上填充个0
            } else {
                return i;
            }
        }
        function Refresh() {
            var imgMM = document.getElementById("imgMM");
            if (!imgMM) {
                return;
            }
            var now = new Date(); // “网上有模仿C#的format函数实现"yyyy-MM--dd"效果  搜：javascript  format”
            var filename = fill2Len(now.getHours()) + "_" + fill2Len(now.getSeconds()) + ".jpg";
            // filename="D:/www/mm/00_00.jpg";  //不要这么写<img id="imgMM" src="filename" />
          //  浏览器会去尝试加载一个文件名叫做filename的图片 
            imgMM.src = "mm/" + filename;
        }
        setInterval("Refresh()", 1000);
    </script>
</head>

 <body οnlοad="Refresh()">
    <img id="imgMM" src="" />
</body>

---------------------- ASP.Net+Android+IOS开发、.Net培训、期待与您交流！ ----------------------

详细请查看：<ahref="http://edu.csdn.net" target="blank">http://edu.csdn.net</a>

u011411356

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
黑马程序员--Window对象的属性

承接上文：Window对象的属性4▶ 3、（*）getElementsByName，根据元素的name获得对象，由于页面中元素的name可以重复，比如多个RadioButton的name一样，因此getElementsByName返回值是对象数组 ▶ 4、（*）getElementBysTagName，获得指定标签名称的元素数组，比如getElementBysTagName(“p”)可以获
复制链接

扫一扫

专栏目录