javascript学习

动态改变按钮文字

 <script>
        window.onload = function () {
            //为每个按钮注册单击事件
            var inputs = document.getElementsByTagName('input');
            for (var i = 0; i < inputs.length; i++) {
                if (inputs[i].type == "button") {//判断是否为按钮
                    inputs[i].onclick = function () {
                        //在每个按钮的单击事件中，让所有的都变成哈哈，同时被点击的按钮编程呜呜

                        //设置所有的按钮都为哈哈
                        for (var e = 0; e < inputs.length; e++) {
                            if (inputs[e].type == "button") {
                                inputs[e].value = "哈哈";
                            }
                        }
                        //设置当前被点击按钮为呜呜

                        this.value = "呜呜";
                    }
                }
            }
           
        }
    </script>
</head>
<body>
    <input type="button" name="name" value="哈哈" />
    <input type="button" name="name" value="哈哈" />
    <input type="button" name="name" value="哈哈" />
    <input type="button" name="name" value="哈哈" />
    <input type="button" name="name" value="哈哈" />
    <input type="button" name="name" value="哈哈" />
    <input type="button" name="name" value="哈哈" />
</body>

<script type="text/javascript">
        window.onload = function () {
            //获取所有input按钮
            var inputs = document.getElementsByTagName('input');
            //遍历
            for (var i = 0; i < inputs.length; i++) {
                //input是button的
                if(inputs[i].type=='button'){
                    inputs[i].onclick = function () {
                        //动态赋值赋值其他按钮的值为哈哈
                    for (var e = 0; e < inputs.length; e++) {
                        if (inputs[e].type == 'button') {
                            inputs[e].value = "哈哈";
                }
                    }
                        //自身变为呜呜
                    this.value = "呜呜";
                }
                }

        }
        }
    </script>
</head>
<body>
    <input type="button" name="name" value="哈哈" />
    <input type="button" name="name" value="哈哈" />
    <input type="button" name="name" value="哈哈" />
    <input type="button" name="name" value="哈哈" />
    <input type="button" name="name" value="哈哈" />
    <input type="button" name="name" value="哈哈" />
    <input type="button" name="name" value="哈哈" />
    <input type="button" name="name" value="哈哈" />
    <input type="button" name="name" value="哈哈" />
</body>

倒计时

<script type="text/javascript">
        window.onload = function () {
            //获取所有input按钮
            var inputs = document.getElementsByTagName('input');
            //遍历
            for (var i = 0; i < inputs.length; i++) {
                //input是button的
                if(inputs[i].type=='button'){
                    inputs[i].onclick = function () {
                        //动态赋值赋值其他按钮的值为哈哈
                    for (var e = 0; e < inputs.length; e++) {
                        if (inputs[e].type == 'button') {
                            inputs[e].value = "哈哈";
                }
                    }
                        //自身变为呜呜
                    this.value = "呜呜";
                }
                }

        }
        }
    </script>
</head>
<body>
    <input type="button" name="name" value="哈哈" />
    <input type="button" name="name" value="哈哈" />
    <input type="button" name="name" value="哈哈" />
    <input type="button" name="name" value="哈哈" />
    <input type="button" name="name" value="哈哈" />
    <input type="button" name="name" value="哈哈" />
    <input type="button" name="name" value="哈哈" />
    <input type="button" name="name" value="哈哈" />
    <input type="button" name="name" value="哈哈" />
</body>

计算器

 <script type="text/javascript">
        window.onload = function () {
            document.getElementById('btn').onclick = function () {
                //设置为数字
                document.getElementById('txt3').value = parseInt( document.getElementById('txt1').value) + parseInt( document.getElementById('txt2').value);
                
            }
        }
    </script>
</head>
<body>
    <input  type="text" name="name"value=""id="txt1"/>+<input type="text" name="name" value="" id="txt2" /><input type="button" name="name" value="="id="btn" /><input type="text" name="name" value="" id="txt3" />
</body>

美女时钟

<script type="text/javascript">
        window.onload = function () {
            setInterval(function () {
                //获取当前时间
                var d = new Date();
                //获取时间的小时部分和分钟部分
                var hh = d.getHours();
                var ss = d.getSeconds();
                hh = hh < 10 ? '0' + hh : hh;
                ss = ss < 10 ? '0' + ss : ss;
                //根据获取的时间动态拼接一个图片路劲
                var imgUrl='Images/'+hh+'_'+ss+'.jpg';
                //赋给新的img
                document.getElementById('newImgUrl').src = imgUrl;
            },1000)
        }
    </script>
</head>
<body>
    <img id="newImgUrl"  src="Images/00_00.jpg"  alt="Alternate Text" />
</body>

javascript css html jquery bootstrap vue webpack es6