在HTML上经过一段时间后,按钮的颜色会发生变化

时间:2017-07-11 08:25:21

标签: html

我有一个按钮,我需要它在一段时间后改变它的颜色。然后按下后它应该重置并返回绿色。然后再次它应该再次改变颜色。我该怎么做呢?我希望它首先从绿色变为黄色,然后从黄色变为红色。我似乎无法找到这样的信息,我的HTML技能非常差。

提前致谢!

以下是当前按钮的代码:

<input class="centered" type="button" onclick='''||'$("#bcTarget").barcode("'||SHOP_ORDER_OPERATION_API.GET_OP_ID(e.order_no,e.release_no,e.sequence_no,e.op_no)||'", "code128",{barWidth:2, barHeight:30});''' ||' value="Tarkastus" >

2 个答案:

答案 0 :(得分:0)

您可以使用解决方案https://jsfiddle.net/20xj8skn/1/

changeColor = function(color) {
  setTimeout(function(){
    document.getElementById("submit").style.background = color;
    document.getElementById("submit").style.color = "#000";
  }, 2000);
}

clicked = function() {
  changeColor('red');
}

changeColor('yellow');
#submit {
  background: rgb(0,255,0);
  color: '#fff';
}
<input type="button" value="Submit" id="submit" onclick="clicked();"/>

我想这就是你要找的东西。

答案 1 :(得分:0)

试试这个,

基本library(shiny) ui <- ui <- bootstrapPage( div(style="position:fixed; top:0; left:0; right:0; height:80px; background-color: #abcdef;", fluidRow( column(8, titlePanel("My Shiny Panel App")), column(4, div(img(src='https://www.bigdatacertification.in/wp-includes/images/hadoopr1.jpg', width="100px", height="80px"), style="float:right;padding-right:10px")) )), div(style="position:fixed; top:80px; bottom:40px; left:0; right:0; background-color:#F63; overflow-x:hidden; overflow-y:scroll;", fluidRow( navlistPanel( tabPanel("Option 1",icon=icon("line-chart"), "tiny content" ), tabPanel("Option 2", icon=icon("filter"), dataTableOutput('table') ), tabPanel("Option 3", icon=icon("retweet"), "content" ), tabPanel("Option 4", icon=icon("money"), "content" ), tabPanel("Option 5", icon=icon("area-chart"), "content" ) , widths=c(2,9) ) )), div(style="position:fixed; bottom:0; left:0; right:0; height:40px; background-color:#abcdef;", fluidRow( column(12, verbatimTextOutput("StausText") ))) ) server <- server <- function(input, output) { output$table <- renderDataTable(iris) output$StausText <- renderPrint("Status: calculating xyz Connection to DB: established ....") } shinyApp(ui = ui, server = server)

input

Javascript代码;

<input id="btnTest" type="button" value="click"/>

这里是fiddle

希望有所帮助,