首页 > 前端开发 > 正文

web前端开发按钮区分颜色 js循环5个按钮,实现点击每个按钮弹出对应的颜色(红黄粉 绿蓝)

2023-09-23 01:19:09 | 我爱编程网

前端开发是很多朋友有关注的类型,那么web前端开发按钮区分颜色 js循环5个按钮,实现点击每个按钮弹出对应的颜色(红黄粉 绿蓝),我爱编程网为大家带来了相关文章,希望给大家提供参考。

web前端开发按钮区分颜色 js循环5个按钮,实现点击每个按钮弹出对应的颜色(红黄粉 绿蓝)

js循环5个按钮,实现点击每个按钮弹出对应的颜色(红黄粉 绿蓝)

<html>
<script type="text/javascript">
function f(n)
{
switch(n)
{
case 0:
alert("红");
break;
case 1:
alert("黄");
break;
case 2:
alert("粉");
break;
case 3:
alert("绿");
break;
case 4:
alert("蓝");
break;
}
}
</script>
<form>
<input type="button" value="红" onclick="f(0)" />
<input type="button" value="黄" onclick="f(1)" />
<input type="button" value="粉" onclick="f(2)" />
<input type="button" value="绿" onclick="f(3)" />
<input type="button" value="蓝" onclick="f(4)" />
</form>
</html>

web前端开发按钮区分颜色 js循环5个按钮,实现点击每个按钮弹出对应的颜色(红黄粉 绿蓝)我爱编程网

js实现五个按钮,点击每个按钮屏幕背景变成特定的每个颜色(红黄粉绿蓝)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button onclick="color('red')">red</button>
<button onclick="color('yellow')">yellow</button>
<button onclick="color('pink')">pink</button>
<button onclick="color('green')">green</button>
<button onclick="color('blue')">blue</button>
</body>
<script type="text/javascript">
function color (c) {
document.body.style.backgroundColor=c;
}
</script>
</html>

web前端开发按钮区分颜色 js循环5个按钮,实现点击每个按钮弹出对应的颜色(红黄粉 绿蓝)

用html设置两个按钮。分别是红蓝两种颜色。点击按钮来背景变成相应的颜色。求大神解答。在线等。很!

<html>
    <head>
        <title>demo page</title>
    </head>
    <body>
        <input type="button" value="red" onclick ="set_bg_red();" />
        <input type="button" value="blue"  onclick = "set_bg_blue();"/>
        <script>
            function set_bg_red(){
                document.bgColor="#ff0000;";
            }
            function set_bg_blue(){
                document.bgColor="#0000ff;";
            }
        </script>
    </body>
</html>

以上就是我爱编程网为大家带来的web前端开发按钮区分颜色 js循环5个按钮,实现点击每个按钮弹出对应的颜色(红黄粉 绿蓝),希望能帮助到大家,了解更多相关信息,敬请关注我爱编程网。
与“web前端开发按钮区分颜色 js循环5个按钮,实现点击每个按钮弹出对应的颜色(红黄粉 绿蓝)”相关推荐
web前端开发变色div html中点击按钮怎样改变div背景颜色
web前端开发变色div html中点击按钮怎样改变div背景颜色

前端开发中悬浮一个超链接怎么让自身整个盒子背景变色?样式部分:&lt;styletype="text/css"&gt;.box1:hover{background:#dfdfdf;}&lt;/style&gt;html部分:&lt;ahref=""class="box1"&gt;第一种情况,a标签就是作为一个整体的盒子。&lt;/a&gt;&lt;divid="bo

2023-09-21 16:34:59
php导航框架跳转 php中实现点击导航栏按钮,页面跳转,所点击的按钮变色 越简单越好!
php导航框架跳转 php中实现点击导航栏按钮,页面跳转,所点击的按钮变色 越简单越好!

php如何跳转新窗口php跳转新窗口的方法:1、使用【header()】函数将HTTP协议标头输出到浏览器;2、使用meta标签负责提供文档元信息标签,可以实现页面跳转;3、使用javascript使页面自动跳转到新的地址。php跳转新窗口的方法:第一种方式:header()header()函数的主要功能是将HTTP协议标头(header)输出到浏览器。语法:voidh

2023-09-08 23:52:14
web前端开发按钮 前端如何实现对游客隐藏按钮,登陆后才显示_html/css_WEB-ITnose
web前端开发按钮 前端如何实现对游客隐藏按钮,登陆后才显示_html/css_WEB-ITnose

怎样自学web前端开发?Web应用程序的开发过程现在特征已经弄清楚了,我们就可以开始定义开发一个web应用程序的整个过程了。当然,这依赖于工程的大小,过程中的某些步骤可能很小,在你的脑海里就能完成这种工作,但把事情整个的了解一下总是有好处的。同时还有一点很重要的你要明白,这篇文章并不会对每个步骤进行深层次的描述。步骤一:分析开发一个web应用的第一步是分析你的需求。你此时

2023-09-07 21:56:23
web前端开发按钮怎么修改 js如何实现点击编辑按钮,前端table表格行内指定td可修改。(table是动态生成的)
web前端开发按钮怎么修改 js如何实现点击编辑按钮,前端table表格行内指定td可修改。(table是动态生成的)

js如何实现点击编辑按钮,前端table表格行内指定td可修改。(table是动态生成的)      function ready() {   var url = base_path+"console/cfg/getBaseLayers/"+configId;   $.ajax({      url:url,      type:"get",      dataType:"json",   

2023-10-07 00:29:55
web前端开发的按钮怎么隐藏 html 按钮 隐藏作用
web前端开发的按钮怎么隐藏 html 按钮 隐藏作用

html按钮隐藏作用可以使用js来实现按钮和文本的显示隐藏。1.创建一个新的html文档,在body标签中添加span标签和按钮标签,并为每个标签设置一个id:2.添加脚本标记并向脚本标记添加按钮单击事件。如果按钮的内容为“隐藏”,则文本将被隐藏,按钮内容将转换为“显示”:3.如果按钮内容不是“隐藏”,将显示文本,按钮内容将“隐藏”:js如何将一个按钮显示或者隐

2023-10-13 05:05:43
web前端开发的按钮怎么隐藏 C#Web,div和按钮隐藏或显示
web前端开发的按钮怎么隐藏 C#Web,div和按钮隐藏或显示

C#Web,div和按钮隐藏或显示只有把div转成服务器控件才可以通过c#代码来操作。客户端控件转服务器控件,就是在原来的标签上加上runat="server".这样就可以通过C#代码来访问了。当然要想访问到还需要设置ID属性来唯一标识这个控件。在控制div隐藏时可以如这样。div标签:&lt;divid="div1"runat="server"&gt;......&lt;/div&gt

2023-10-13 05:05:11
web前端开发的单选复选按钮 单选按钮的value属性值与复选框的value属性值有什么不同?
web前端开发的单选复选按钮 单选按钮的value属性值与复选框的value属性值有什么不同?

简述单选按钮和复选框控件的作用是什么?(1)复选框可以允许你选择多个设置,而单选框则允许你选择一个设置;这两个选框的区别是一个通过用圆圈表示,一个通过用方框表示。(2)单选框:只能选中一项命令。是图形用户界面上的一种控件。它容许用户在一组选项中选择其中一个。单选框的外观一般是一个空白的圆洞。而在它的旁边则通常有一个文字的标签。它的用途除了描述之外,还可用于选择该选择:当用户

2023-10-11 20:48:15
web前端开发重置按钮 Web前端是干嘛的
web前端开发重置按钮 Web前端是干嘛的

怎样自学web前端开发?Web应用程序的开发过程现在特征已经弄清楚了,我们就可以开始定义开发一个web应用程序的整个过程了。当然,这依赖于工程的大小,过程中的某些步骤可能很小,在你的脑海里就能完成这种工作,但把事情整个的了解一下总是有好处的。同时还有一点很重要的你要明白,这篇文章并不会对每个步骤进行深层次的描述。步骤一:分析开发一个web应用的第一步是分析你的需求。你此时

2023-09-17 01:59:42