Question

目前我有一个显示器，我有一个按钮START，点击此按钮，计时器启动，它被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);

});

Answer 1

这个怎么样？

请参阅 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)
            }
        });

    }
});

Answer 2

尝试此示例（使用不同的按钮而不是更改按钮的文本）：

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>

Answer 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();

}）;

这就像在start函数结束时附加submit函数一样。我希望这会有所帮助

更改按钮的功能

3 个答案: