Asp.Net之JavaScript学习（二）

最新推荐文章于 2020-08-02 22:15:42 发布

挑战不可

最新推荐文章于 2020-08-02 22:15:42 发布

阅读量200

点赞数 1

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

本文链接：https://blog.csdn.net/qq_42612120/article/details/107738191

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.对话框

window:对话框（alert,confirm,prompt），
   setInterval(code,delay),
   setTimeOut(code,delay)
   location.href获取或设置当前窗口的地址

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>01对话框</title>
</head>
<body>
    <script>
              //  alert('123');//提示框  只有一个“确定”按钮

                //确认框   有“确定”按钮    “取消”按钮
                //点击确定返回true，点取消返回false
                //var result = confirm('确定要删除吗？');
                //alert(result);

        //输入框：有一个文本框，一个“确定”按钮，一个“取消”按钮
        //点击确定返回文本框中的值，点击取消返回null
        var result = prompt('请输入年龄', '10');
        alert(result);
    </script>
</body>
</html>

location:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>02location</title>
</head>
<body>
    <script>
        //将地址栏的url进行改写，效果是可以完成页面跳转
        location.href = '01对话框.html';
    </script>
</body>
</html>

2.document

获取元素get***
   事件：onclick,onload
   event：事件发生时，浏览器创建的一个对象，用于带有一些数据（鼠标的位置）
   动态操作节点：创建，追加，移除
   获取标签对的内容：innerHTML,innerText或textContent

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>03获取元素</title>
</head>
<body>
    <input type="button" name="btnShow" id="btnShow" value="显示" />
    <script>
        //根据id获取元素，因为id是唯一的，所以只返回一个dom对象
        var temp1 = document.getElementById('btnShow');
        //name是可以重复的，所以返回一个dom对象数组
        var temp2 = document.getElementsByName('btnShow');

        //访问属性
        temp1.value = '显示当前时间';
    </script>
</body>
</html>

3.事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>04事件</title>
    <script>
        //直接定义的方法，是属于window对象的成员
        function showValue() {
            alert(this.Value);
        }
    </script>
</head>
<body>
    在元素上注册事件
    <input type="button" id="btnShow1" value="显示1" onclick="alert(this.value);" />
    <br />
    动态注册：
    <input type="button" id="btnShow2" value="显示2" />
    <script>
          //推荐使用这种方式注册事件
        //代码分离（html与js）；可以使用this
        document.getElementById('btnShow2').onclick = function () {
            alert(this.value);
        }
    </script>
</body>
</html>

4.练习

加法计算器：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>06加法计算器</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="number" id="num1" />
    +
    <input type="number" id="num2" />
    <input type="button" id="btnAdd" value="=" />
    <input type="text" id="result" disabled="disabled" />
</body>
</html>

愤怒的小鸟：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>08愤怒的小鸟</title>
    <script>
        var index = 1;
        onload = function () {
            //定时器:间隔一段时间执行一次代码
            setInterval(birdFly1, 100);
            setInterval(walk1, 200);
        };
        function birdFly1() {
            //计算当前图片编号
            index++;
            if (index > 4) {
                index = 1;//只有4张图片，回到开始。
            }
            //找到小鸟图片对象
            var birdFly = document.getElementById('birdFly');
            //设置图片
            birdFly.src = 'images/bird' + index + '.png';
        }
        function walk1() {
            index++;
            if (index > 7) {
                index = 1;
            }
            var walk = document.getElementById('walk');
            walk.src = 'images/walk' + index + '.png';
        }

    </script>
</head>
<body>
    <img src="images/bird1.png" id="birdFly" />

    <hr />
    <img src="images/walk1.png" id="walk" />
</body>
</html>

5.动态元素操作

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>11动态操作元素</title>
    <script>
        onload = function () {
            //追加图片
            document.getElementById('btnImg').onclick = function () {
                //创建img对象
                var img = document.createElement('img');
                //属性赋值
                img.src = "images/bird1.png";
                //样式
                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>

6.内部内容

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>13内部内容</title>
    <script>
        onload = function () {
            document.getElementById('btnShowText').onclick = function () {
                //获取div内容
                alert(document.getElementById('div1').innerText);
            };

            document.getElementById('btnShowHTML').onclick = function () {
                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>

挑战不可

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Asp.Net之JavaScript学习（二）

1.对话框window:对话框（alert,confirm,prompt）， setInterval(code,delay), setTimeOut(code,delay) location.href获取或设置当前窗口的地址<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>01对话框</title></he...
复制链接

扫一扫