B/S学习之路—DOM(3)

最新推荐文章于 2024-09-22 11:17:00 发布

songyi160

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量295

点赞数

分类专栏： JavaScript 文章标签： javascript dom

本文链接：https://blog.csdn.net/songyi160/article/details/76573844

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

【06加法计算器】

代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script>
        //当页面加载完成后执行如下代码
        onload = function () {
            //找到按钮并注册点击事件
            document.getElementById('btnAdd').onclick = function() {
                //获取第一个数字
                var num1 = parseInt(document.getElementById('num1').value);
                //获取第二个数字
                var num2 = parseInt(document.getElementById('num2').value);
                //加法运算
                var result = num1 + num2;
                //显示到结果文本框
                document.getElementById('result').value = result;
            };
        };
    </script>
</head>
<body>
    <input type="text" id="num1"/>
    +
    <input type="text" id="num2"/>
    <input type="button" id="btnAdd" value="="/>
    <input type="text" id="result"/>
</body>
</html>

执行效果：

【07跑马灯】

代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        #msg {
            /*绝对定位*/
            position: absolute;
            border: 1px solid red;
            background-color: blue;
            color: white;
            width: 100px;
        }
    </style>
    <script>
        var left = 0;
        var direction = 1;
        onload = function () {
            //设置移动的定时器
            setInterval(run, 100);
        };

        function run() {
            //计算距离左侧的值
            left += 10*direction;
            
            //判断宽度:小于浏览器宽度
            if (left + 100 >= window.innerWidth) {
                //当到达最右侧时
                direction = -1;
            }
            if (left <= 0) {
                //当到达最左侧时
                direction = 1;
            }

            var msg = document.getElementById('msg');
            msg.style.left = left + 'px';
        }
    </script>
</head>
<body>
    <div id="msg">跑马灯文本</div>
</body>
</html>

执行效果：

上面“跑马灯文本”在浏览器上左右移动。

【08Event参数】

代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script>
        onload = function() {
            document.getElementById('btnShow').onclick = function(e) {
                //event在事件发生时，由浏览器创建出来的一个对象，包含了鼠标的位置等信息
                //alert(event);
                //对于早期ie浏览器，不支持参数e的形式
                //对于ff浏览器，不支持event保留关键字
                //对于最新的ie浏览器，两种方式都支持
                alert(e.clientX);
            };
        };
    </script>
</head>
<body>
    <input type="button" id="btnShow" value="显示"/>
</body>
</html>

执行效果：

【09动态操作元素】

代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script>
        onload = function() {
            //追加图片
            document.getElementById('btnImg').onclick = function() {
                //创建img对象
                var img = document.createElement('img');
                //通过属性src指定要显示的图片
                img.src = 'images/bird1.png';
                //在div中追加图片对象
                document.getElementById('divContainer').appendChild(img);
            };
            //追加文本框
            document.getElementById('btnText').onclick = function() {
                //创建input对象
                var input = document.createElement('input');
                //设置属性
                input.type = "text";
                //加入div中
                document.getElementById('divContainer').appendChild(input);
            };
            //追加超链接
            document.getElementById('btnA').onclick = function() {
                //创建a对象
                var a = document.createElement('a');
                //设置属性
                a.href = '10Event.html';
                a.innerHTML = '点击显示';
                //加入div中
                document.getElementById('divContainer').appendChild(a);
            };
            
            //删除所有元素
            document.getElementById('btnRemove').onclick = function() {
                //获取所有子元素
                var childs = document.getElementById('divContainer').childNodes;
                //遍历子元素，逐个删除
                for (var i = childs.length-1; i >=0; i--) {
                    document.getElementById('divContainer').removeChild(childs[i]);
                }
            };
        };
    </script>
</head>
<body>
    <input type="button" id="btnImg" value="图片"/>
    <input type="button" id="btnText" value="文本框"/>
    <input type="button" id="btnA" value="超链接"/>
    <input type="button" id="btnRemove" value="删除所有元素"/>
    <div id="divContainer">
        
    </div>
</body>
</html>

执行效果：

【10评分】

代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script>
        var clickIndex = -1;
        onload = function() {
            //获取所有的img标签
            var imgs = document.getElementsByTagName('img');
            //遍历所有的图片对象
            for (var index in imgs) {
                //为每个图片对象注册指向事件
                imgs[index].onmouseover = function() {
                    //将当前及之前的图片变黄，之后的图片变灰
                    var id = this.id;
                    for (var i = 0; i < imgs.length; i++) {
                        //当前元素及之前的元素
                        if (i <= id) {
                            imgs[i].src = 'images/star2.png';
                        } else {
                            //当前元素之后的元素
                            imgs[i].src = 'images/star1.png';
                        }
                    }
                };
                
                //为每个图片对象注册移开事件
                imgs[index].onmouseout = function() {
                    //被点击的项及之前的元素是黄色
                    for (var i = 0; i <= clickIndex; i++) {
                        imgs[i].src = 'images/star2.png';
                    }
                    //将点击的项之后的元素变成灰色
                    for (var i = clickIndex+1; i < imgs.length; i++) {
                        imgs[i].src = 'images/star1.png';
                    }
                };
                
                //为每个图片对象注册点击事件
                imgs[index].onclick = function () {
                    //记录下来被点的图片的编号，编号与索引对应
                    clickIndex = parseInt(this.id);
                };
            }
        };
    </script>
</head>
<body>
    <img id="0" src="images/star1.png"/>
    <img id="1" src="images/star1.png"/>
    <img id="2" src="images/star1.png"/>
    <img id="3" src="images/star1.png"/>
    <img id="4" src="images/star1.png"/>
</body>
</html>

执行效果：

【11内部内容】

代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script>
        onload = function() {
            document.getElementById('btnShowText').onclick = function() {
                //获取div内的文本
                alert(document.getElementById('div1').innerText);
            };
            document.getElementById('btnShowHTML').onclick = function() {
                //获取div内的html
                alert(document.getElementById('div1').innerHTML);
            };
        };
    </script>
</head>
    <body>
        <input type="button" id="btnShowText" value="显示text"/>
        <input type="button" id="btnShowHTML" value="显示html"/>
        <div id="div1"><h1>hello</h1></div>
        <hr/>
        特例：多行文本框，下拉列表框，通过value获取值
        <textarea></textarea>
        <select><option></option></select>
    </body>
</html>

执行效果：