javascript - एक बटन की कार्यक्षमता बदलें




jquery html (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>

वर्तमान में मेरे पास एक डिस्प्ले है जहां मेरे पास एक बटन START है, इस बटन पर क्लिक करने पर टाइमर शुरू होता है और इसे 2 बटन से बदल दिया जाता है इन 2 बटन सबमिट और पलायन हैं। इनमें से प्रत्येक बटन को एक स्क्रिप्ट चलाने के लिए सबमिट करने पर। सबमिट करें बटन पर क्लिक करें, test.php शुरू किया जाता है।

सब कुछ ठीक काम कर रहा है, लेकिन कुछ बदलाव हैं जो मैं नहीं कर पा रहा हूं

प्रथम

मैं शुरू और गठबंधन बटन इकट्ठा करना चाहता हूं, अर्थात

क) प्रारंभ बटन क्लिक करने पर, टाइमर शुरू होनी चाहिए,

बी) 2 नए बटन दिखाई देना चाहिए और

सी) स्क्रिप्ट test.php चलाना चाहिए।

यह अच्छा होगा यदि मैं सिर्फ शुरुआत बटन का टेक्स्ट बदलूंगा और सबमिट बटन को जारी रखूंगा और शुरुआत बटन क्लिक करके उपरोक्त 3 फ़ंक्चिलिटी को चलाऊंगा, हालांकि अलग-अलग पहलुओं का भी स्वागत किया जाता है

दूसरा

जब टाइमर का समय 0:00 तक पहुंच जाता है, तो उसे अपने प्रारंभिक चरण में रीसेट करना चाहिए और बटन को अपने मूल स्थिति में परिवर्तित करना चाहिए

क) 2 बटन को गायब हो जाना चाहिए और प्रारंभ बटन द्वारा प्रतिस्थापित किया जाना चाहिए

बी) घड़ी अपनी प्रारंभिक मान यानी 2:00 दिखाना चाहिए

जेएस कोड का भाग पूरे कोड @ फिल्ड

/*******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);

});

इस बारे में कैसा है?

कृपया डेमो में 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)
            }
        });

    }
});






javascript-events