《前端》JavaScript二轮基础复习（三）--按钮特效

1、给button添加样式

（如背景色）如果很多很多btn设置不同颜色，不方便挨个添加，可以使用js添加。

核心代码为：btn对象.style.backgroundColor=颜色

<script type="text/javascript">
	var colorBtn = ["red", "yellow", "blue"];
	var arrBtn = document.getElementsByTagName("button");
	for(var i=0; i<arrBtn.length; i++) {
	    arrBtn[i].style.backgroundColor = colorBtn[i];
	}
</script>

2、避免回车键自动提交表单

<form name="formNoEnter" method="get" enctype="multipart/form-data" action="form-no-enter.php">
    <p>First Name:&nbsp;&nbsp;<input type="text" name="fname" id="id-fname" value="King"/></p>
    <p>Last Name:&nbsp;&nbsp;<input type="text" name="lname" id="id-lname" value="Wang"/></p>
    <button type="submit" id="id-submit">提交表单</button>
</form>
</body>
<script type="text/javascript">
    window.onload = function () {
        document.formNoEnter.onkeypress = function (ev) {
            var ev = window.event || ev;
            // 回车键ASCII-13
            if (ev.keyCode == 13 || ev.which == 13) {
                console.log("Info : press enter no submit.");
                return false;//返回false来屏蔽操作
            }
        }
    }
</script>

3、按钮点击后自动失效

核心知识点：对象.disabled=true;

<div>测试按钮:
		<button id="id-click-once">Click Once</button>
	</div>
	<div>重新激活:
		<button id="id-re-active">Re-Active</button>
	</div>
</body>
<script type="text/javascript">
	document.getElementById("id-click-once").onclick = function (e) {
		console.log("e"+e.target.value)
	    e.target.disabled = true;
	};
    document.getElementById("id-re-active").onclick = function (e) {
        document.getElementById("id-click-once").disabled = false;
    };
</script>

我后来这样尝试也可以：

    <div>测试按钮:
        <button id="button1" onclick="button1()">Click Once</button>
    </div>
    <div>重新激活:
        <button id="button2" onclick="button2()">Re-Active</button>
    </div>
    <script>
        function button1() {
            var btn1 = document.getElementById("button1")
                // console.log(btn1)
            btn1.disabled = true;
        }
        function bu