更改按钮的功能答案

【问题标题】：Change the functionality of a button更改按钮的功能
【发布时间】：2015-06-16 05:14:33
【问题描述】：

目前我有一个显示器，我有一个按钮 START，单击此按钮时计时器启动，并被 2 个按钮取代。这 2 个按钮是提交和离开。在提交这些按钮中的每一个时，都会运行一个脚本。点击提交按钮，启动test.php。

一切正常，但我无法进行一些更改

第一

我希望结合开始和提交按钮，即

a) 点击开始按钮，计时器应该开始，

b) 应该会出现 2 个新按钮，并且

c) 脚本 test.php 应该运行。

如果我可以将开始按钮的文本更改为提交并保持按钮不变并运行上述3个功能点击开始按钮，但也欢迎不同的方面

第二

当计时器的时间达到 0:00 时，它应该重置到初始阶段，并且按钮也应该恢复到原来的状态，即

a) 2 个按钮应该消失并被开始按钮取代

b) 时钟应显示其初始值，即 2:00

部分js代码。完整代码@fiddle

/*******Code for the three buttons*********/
$(document).ready(function (){
        $("#startClock").click(function (){
                $("#startClock").fadeOut(function(){
$("#walkaway").fadeIn().delay(120000).fadeOut();
$("#submitamt").fadeIn().delay(120000).fadeOut(function(){
        $("#startClock").fadeIn();
        });
    })
});
});

/*******Code for running test.php script*********/
$(document).ready(function(){
$('#submitamt').click(function(){
    var txtbox = $('#txt').val();
    var hiddenTxt = $('#hidden').val();

        $.ajax({
            type:'post',
             url:'test.php',
            data:{txt:txtbox,hidden:hiddenTxt},
            cache:false,
            success: function(returndata){
                $('#proddisplay').html(returndata);
                console.log(returndata)
            }
        });
})
})

/*******Code for starting the clock*********/
$('#startClock').click(function () {
    var counter = 120;
    setInterval(function () {
        counter--;
        if (counter >= 0) {
            span = document.getElementById("count");
            span.innerHTML = '<span class="first_digit">' + parseInt(counter / 60) + '</span><span class="second_digit">:</span><span class="third_digit">' + parseInt((counter % 60) / 10) + '</span> <span class="fourth_digit">' + (counter % 60) % 10;
        }
        if (counter === 0) {
            alert('sorry, out of time');
            clearInterval(counter);
        }
    }, 1000);

});

【问题讨论】：

您说必须显示单击开始时的 2 个按钮，并且您想用提交文本替换开始按钮文本，对吗？离开按钮保持原样？？
@Guruprasad Rao 要求是点击开始按钮，显示另外两个按钮。文本的替换是我个人的想法，它可能会这样做。工作保持原样。是的，离开按钮只是随着时间出现和消失

标签： javascript jquery html javascript-events

【解决方案1】：

试试这个例子（使用不同的按钮而不是改变按钮的文本）：

var startClock;
var submitamt;
var walkaway;
var digits;

$(function() {
  startClock = $('#startClock').on('click', onStart);
  submitamt = $('#submitamt').on('click', onSubmit);
  walkaway = $('#walkaway').on('click', onWalkAway);
  digits = $('#count span');
  beforeStart();
});

var onStart = function(e) {
  startClock.fadeOut(function() {
    startTimer();
    submitamt.fadeIn(function() {
      submitamt.trigger('click'); // fire click event on submit
    });
    walkaway.fadeIn();
  });
};

var onSubmit = function(e) {
  var txtbox = $('#txt').val();
  var hiddenTxt = $('#hidden').val();
  $.ajax({
    type: 'post',
    url: 'test.php',
    data: {
      txt: txtbox,
      hidden: hiddenTxt
    },
    cache: false,
    success: function(returndata) {
      $('#proddisplay').html(returndata);
      console.log(returndata);
    },
    error: function() {
      console.error('Failed to process ajax !');
    }
  });
};

var onWalkAway = function(e) {
  console.log('onWalkAway ...');
};

var counter;
var timer;
var startTimer = function() {
  counter = 120;
  timer = null;
  timer = setInterval(ticker, 1000);
};

var beforeStart = function() {
  digits.eq(0).text('2');
  digits.eq(2).text('0');
  digits.eq(3).text('0');
};

var ticker = function() {
  counter--;
  var t = (counter / 60) | 0; // it is round off
  digits.eq(0).text(t);
  t = ((counter % 60) / 10) | 0;
  digits.eq(2).text(t);
  t = (counter % 60) % 10;
  digits.eq(3).text(t);
  if (!counter) {
    clearInterval(timer);
    alert('Time out !');
    resetView();
  }
};

var resetView = function() {
  walkaway.fadeOut();
  submitamt.fadeOut(function() {
    beforeStart();
    startClock.fadeIn();
  });
};

.first_digit
	{
	width:60px; 
	font-size:40px; 
	padding:4px;
	color: #CCC; 
	text-shadow: 0px 1px 2px #000; 
	text-align: center; 
	background-color: #333;
	border-radius: 6px; 
	}
	
.second_digit
	{
		color: #333; 
		font-size:40px; 
	}

.third_digit
	{
	width:60px; 
	font-size:40px; 
	padding:4px;
	color: #CCC; 
	text-shadow: 0px 1px 2px #000; 
	text-align: center; 
	background-color: #333;
	border-radius: 6px; 
	}
	
.fourth_digit
	{
	width:60px; 
	font-size:40px; 
	padding:4px;
	color: #CCC; 
	text-shadow: 0px 1px 2px #000; 
	text-align: center; 
	background-color: #333;
	border-radius: 6px; 
	}
	
.countdown
{
text-align:center; 
margin-left:50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="countdown">
	<span id="count">
		<span class="first_digit">2</span>
		<span class="second_digit">:</span>
		<span class="third_digit">0</span>
		<span class="fourth_digit">0</span>
	</span> 
</div>
<button class="rightbtn" type="button" id="startClock">Start</button>
<button class="rightbtn" type="button" id="submitamt" style="display:none; ">Submit</button>
<button class="botleftbtn" type="button" id="walkaway" style="display:none">Walk Away</button>

【讨论】：

事情似乎很好，但我也希望在点击开始按钮时运行脚本 test.php
php 脚本正在运行但时钟不工作，它会在 2 分钟后发出警报消息，但不显示时间
是的，它在这里工作，它也在我的页面上工作，但时间仍然是 2:00，2 分钟后出现弹出窗口
@user3732711，请找到我更新的脚本，全部复制

【解决方案2】：

这个怎么样？

请参考 demo 中的 HTML。做了一些改动

$('.rightbtn').on('click', function(){
    var btn=$(this);
    if(btn.data('type')==='start')
    {
        btn.text('Submit').data('type','submit');
        $("#walkaway").fadeIn();
        count2=setInterval(function () {
        counter--;
        if (counter >= 0) {
            span = document.getElementById("count");
            span.innerHTML = '<span class="first_digit">' + parseInt(counter / 60) + '</span><span class="second_digit">:</span><span class="third_digit">' + parseInt((counter % 60) / 10) + '</span> <span class="fourth_digit">' + (counter % 60) % 10;
        }
        if (counter === 0) {
            alert('sorry, out of time');
            clearInterval(counter);
            btn.text('Start').data('type','start');
            $("#walkaway").fadeOut();
        }
        }, 1000);
    }
    else
    {
        clearTimeout(count);
        counter=0;
        clearInterval(counter);
        clearInterval(count2);
        btn.text('Start').data('type','start');
        $("#walkaway").fadeOut();
        span = document.getElementById("count");
        span.innerHTML = '<span class="first_digit">2</span><span class="second_digit">:</span><span class="third_digit">0</span> <span class="fourth_digit">0';
        var txtbox = $('#txt').val();
        var hiddenTxt = $('#hidden').val();
       $.ajax({
            type:'post',
             url:'test.php',
            data:{txt:txtbox,hidden:hiddenTxt},
            cache:false,
            success: function(returndata){
                $('#proddisplay').html(returndata);
                console.log(returndata)
            }
        });

    }
});

【讨论】：

虽然定时器在你的代码中工作，但它在我的脚本中不起作用，定时器代码放在脚本的末尾，其余代码在顶部页面，即头部，当我使用你的代码时，它要么不执行任何操作，要么按钮随机消失
@user3732711.. 你是否尝试过创建模板，如 DEMO 中所示.. 我添加了一个类并从js 中删除了所有其他不必要的东西，并一次单击扭曲了所有代码
您可能需要发布整套html，然后才能看到您面临的问题！

【解决方案3】：

这将合并你的开始和提交按钮......

$('#startClock').click(function () {
var counter = 120;
setInterval(function () {
    counter--;
    if (counter >= 0) {
        span = document.getElementById("count");
        span.innerHTML = '<span class="first_digit">' + parseInt(counter / 60) + '</span><span class="second_digit">:</span><span class="third_digit">' + parseInt((counter % 60) / 10) + '</span> <span class="fourth_digit">' + (counter % 60) % 10;
    }
    if (counter === 0) {
        alert('sorry, out of time');
        clearInterval(counter);
    }
}, 1000);

$('#submitamt').click();

});

这就像在启动函数的末尾附加提交函数。我希望这会有所帮助

【讨论】：