web_设置四个按键1,2,3,4 ；另外四个按键1，2，3，4；当按1，2，3，4时，对应数字变色

最新推荐文章于 2024-02-24 01:06:05 发布

二师弟&

最新推荐文章于 2024-02-24 01:06:05 发布

阅读量443

点赞数 1

分类专栏： web_html5

本文链接：https://blog.csdn.net/zhu_fangyuan/article/details/107799989

版权

web_html5 专栏收录该内容

32 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
    	/*
    	 * 创建方法f1()
    	 * 将id为a的按键赋给变量a1
    	 * 将id为A的按键赋给变量a2
    	 * 设置按键颜色
    	 * 
    	 * 设置a1的点击事件,即调用color1设置为a2的颜色
    	 *
    	 */
        function f1() {
            var a1 = document.getElementById("a");
            var a2 = document.getElementById("A");
            var color1 = "darkgoldenrod" ;
            
            a1.onclick = function () {
                a2.style.background = color1 ;
            }
        }
        
        /*
    	 * 创建方法f2()
    	 * 将id为b的按键赋给变量b1
    	 * 将id为B的按键赋给变量b2
    	 * 设置按键颜色
    	 * 
    	 * 设置b1的点击事件,即调用color2设置为b2的颜色
    	 *
    	 */
        
        function f2() {
            var b1 = document.getElementById("b");
            var b2 = document.getElementById("B");
            var color2 = "blueviolet" ;
            
            b1.onclick = function () {
                b2.style.background = color2 ;
            }

        }
        /*
         * 创建方法f3()
         */
        function f3() {
            var c1 = document.getElementById("c");
            var c2 = document.getElementById("C");
            var color3 = "cyan" ;
            c1.onclick = function () {
                c2.style.background = color3 ;
            }

        }
        function f4() {
            var d1 = document.getElementById("d");
            var d2 = document.getElementById("D");
            var color4 = "grey" ;
            d1.onclick = function () {
                d2.style.background = color4 ;
            }

        }
    </script>
</head>
<body>
	
<!--
	作者：zhu
	时间：2020-07-31
	描述：设置按键1、2、3、4并设置id为a、b、c、d，并调用f1()、f2()...方法
-->
	
<button id="a" onclick="f1()">1</button>
<button id="b" onclick="f2()">2</button>
<button id="c" onclick="f3()">3</button>
<button id="d" onclick="f4()">4</button>

<br>

<!--
	作者：zhu
	时间：2020-07-31
	描述：设置按键1、2、3、4并设置id为A、B、C、D
-->
<button id="D">4</button>
<button id="B">2</button>
<button id="A">1</button>
<button id="C">3</button>

</body>
</html>

界面展示效果

二师弟&

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web_设置四个按键1,2,3,4 ；另外四个按键1，2，3，4；当按1，2，3，4时，对应数字变色

<!DOCTYPE html><head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* * 创建方法f1() * 将id为a的按键赋给变量a1 * 将id为A的按键赋给变量a2 * 设置按键颜色 * * 设置a1的点击事件,即
复制链接

扫一扫