JavaScript案例学习2

来源：互联网发布：链式编程编辑：程序博客网时间：2024/06/05 05:56

原文地址：http://baiyuming.top/2016/06/11/JavaScript%E6%A1%88%E4%BE%8B%E5%AD%A6%E4%B9%A02/

JavaScript 案例4

改文字,点击按钮更改input的value 和 title

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>改文字</title>    <script>        function changeText() {            document.getElementById("text1").value = "abcdefghijklmn";            document.getElementById("text1").title = "abcdefghijklmn";        }    </script></head><body><input type="text" id="text1" value="111" title="222"><input type="button" value="改文字" onclick="changeText()"></body></html>

JavaScript 案例5

点击显示隐藏，类似toggle效果

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>if语句</title>    <style>        #div1 {            width: 10px;height: 10px;            display: none;        }    </style></head><body><input type="button" value="显示隐藏" onclick="showHide()"><div id="div1">    测试数据</div><script>    function showHide() {        var oDiv = document.getElementById("div1");        if (oDiv.style.display == "block"){            oDiv.style.display = "none";        }else {            oDiv.style.display = "block";        }    }</script></body></html>

JavaScript 案例6

点击按钮改变div 的颜色

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>函数传参</title>    <style>        #div1{            width: 100px;height: 100px;background: red;        }    </style></head><body><input type="button" onclick="changeColor('green')" value="变绿"><input type="button" onclick="changeColor('yellow')" value="变黄"><input type="button" onclick="changeColor('black')" value="变黑"><div id="div1"></div><script>    function changeColor(color) {        var oDiv = document.getElementById("div1");        oDiv.style.background = color;    }    /**     * 函数传参     * 参数就相当于占位符     * 什么时候用传参---函数里定不下来的东西*/</script></body></html>

0 0