javascript - 如何通过在 Javascript 中单击按钮来更新里程表值？

Question

<style>
body {
    font-family: "Helvetica Neue"
}
#wrapper .counter {
    display:inline-block;
    font-size:2em;
    line-height:1.2em;
}

.counter span.digit {
    background:#161616;
    background: #3F3F3F; /* Old browsers */
    background: linear-gradient(bottom, #0A0A0A 0%, #2B2B2B 50%, #3F3F3F 100%);
    background: -o-linear-gradient(bottom, #0A0A0A 0%, #2B2B2B 50%, #3F3F3F 100%);
    background: -moz-linear-gradient(bottom, #0A0A0A 0%, #2B2B2B 50%, #3F3F3F 100%);
    background: -webkit-linear-gradient(bottom, #0A0A0A 0%, #2B2B2B 50%, #3F3F3F 100%);
    background: -ms-linear-gradient(bottom, #0A0A0A 0%, #2B2B2B 50%, #3F3F3F 100%);
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #0A0A0A), color-stop(0.5, #2B2B2B), color-stop(1, #3F3F3F));
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FF0A0A0A', endColorstr='#FF3F3F3F'); /* IE6 & IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FF0A0A0A', endColorstr='#FF3F3F3F')"; /* IE8 */
    zoom:1;    -webkit-border-radius:0.1em;
    -moz-border-radius:0.1em;
    border-radius:0.1em;
    background-clip:border;
    color:#FFF;
    display:inline-block;
    float:left;
    height:44px;
    margin:0 1px;
    overflow:hidden;
    padding:0;
    position:relative;
    text-align:center;
}

.counter span.digit span {
    line-height:44px;
    position:relative;
    top:0;
}

.counter span.digit hr {
    border-color: transparent;
    -webkit-box-shadow: inset 0 2px 1px  rgba(0,0,0,0.5);
    -moz-box-shadow: inset 0 2px 1px  rgba(0,0,0,0.5);
    box-shadow: inset 0 2px 1px   rgba(0,0,0,0.5);
    height: 3px;
    margin: -2px 0 0 0;
    position: absolute;
    top: 50%;
    width: 100%;
    z-index: 1;
}

.counter span.separator {
    display:block;
    float:left;
    font-family:Georgia, serif;
    font-size:0.5em;
    position:relative;
    top:0.5em;
}

.counter span.separator hr {
    display:none;
}
</style>

<div id="sidebar" class="sidebar" style="float:left;">
					<div class="textwidget"><p style="text-align:left; color:#000000; padding-left: 10px; padding-right: 10px; bottom-margin: 40px;">Boomerang Giving™ is a national movement of Baby Boomers working to make our communities stronger by reinvesting what we save from senior discounts to charity.</p>
<br>
<br></div>
					<div class="textwidget"><p style="color=#ff6600; text-align:center;">Since Nov. 2014:<br></p>

<span class="counter"><span class="digit">
    <span title="0">0</span>
    <hr>
    </span>
    <span class="digit">
        <span title="0">0</span>
        <hr>
    </span>
    <span class="separator">
        <span title=",">,</span>
        <hr>
    </span>
    <span class="digit">
        <span title="0">0</span>
        <hr>
    </span>
    <span class="digit">
        <span title="0">0</span>
        <hr>
    </span>
    <span class="digit">
        <span title="4">4</span>
        <hr>
    </span>
</span>

<div style="clear:both">
<p style="color=#ff6600; text-align:center; margin-top: 10px; margin-bottom:20px;">Boomers have taken the<br>
BOOMERANG PLEDGE<br></p></div>
</div>
					<div class="textwidget"><div class="aligncenter"><style>#wrapper .fusion-button.button-1{border-width:1px;color:#ffffff;border-color:#ffffff;}#wrapper .fusion-button.button-1:hover,.fusion-button.button-1:focus,.fusion-button.button-1:active{border-width:1px;border-color:#ffffff;color:#ffffff;}#wrapper .fusion-button.button-1{background: #f15a22;
					background-image: -webkit-gradient( linear, left bottom, left top, from( #ef871f ), to( #f15a22 ) );
					background-image: -webkit-linear-gradient( bottom, #ef871f, #f15a22 );
					background-image:	-moz-linear-gradient( bottom, #ef871f, #f15a22 );
					background-image:	  -o-linear-gradient( bottom, #ef871f, #f15a22 );
					background-image: linear-gradient( to top, #ef871f, #f15a22 );}#wrapper .fusion-button.button-1:hover,.button-1:focus,.fusion-button.button-1:active{background: #d17c57;
					background-image: -webkit-gradient( linear, left bottom, left top, from( #e8b38f ), to( #d17c57 ) );
					background-image: -webkit-linear-gradient( bottom, #e8b38f, #d17c57 );
					background-image:	-moz-linear-gradient( bottom, #e8b38f, #d17c57 );
					background-image:	  -o-linear-gradient( bottom, #e8b38f, #d17c57 );
					background-image: linear-gradient( to top, #e8b38f, #d17c57 );}</style><a class="button xlarge button default fusion-button button-flat button-pill button-xlarge button-default button-1 buttonshadow-1" type="button" target="_self" title="Take the Boomerang Pledge!" href="http://boomeranggiving.org/take-the-boomerang-pledge/"><span class="fusion-button-text">TAKE THE PLEDGE!</span></a></div>
<br>
<br>

</div>
					<div class="textwidget"><br>
<h2 style="text-align:center; margin-top:15px; margin-bottom:5px;">Tell Your Friends About<br>BOOMERANG GIVING!</h2></div>
		<!-- Simple Share Buttons Plus (v0.4.2) simplesharebuttons.com/plus --><div class="ssbp-wrap"><div class="ssbp-container" data-ssbp-share-text="" data-ssbp-url="http://boomeranggiving.org/" data-ssbp-title="Private: Take the Pledge" data-ssbp-short-url="" style="display: block;"><a href="http://www.facebook.com/sharer.php?u=http://boomeranggiving.org/" class="ssbp-btn ssbp-facebook" data-ssbp-title="Private: Take the Pledge" data-ssbp-url="http://boomeranggiving.org/" data-ssbp-site="Facebook"><span class="ssbp-text">Facebook</span></a><span class="ssbp-total-shares ssbp-total-facebook-shares ssbp-each-share">0</span><a href="http://twitter.com/share?url=http://boomeranggiving.org/&amp;text=Private%3A+Take+the+Pledge+Tell+your+friends%21&amp;hashtags=" class="ssbp-btn ssbp-twitter" data-ssbp-title="Private: Take the Pledge" data-ssbp-url="http://boomeranggiving.org/" data-ssbp-site="Twitter"><span class="ssbp-text">Twitter</span></a><span class="ssbp-total-shares ssbp-total-twitter-shares ssbp-each-share">4</span><a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=http://boomeranggiving.org/" class="ssbp-btn ssbp-linkedin" data-ssbp-title="Private: Take the Pledge" data-ssbp-url="http://boomeranggiving.org/" data-ssbp-site="LinkedIn"><span class="ssbp-text">Linkedin</span></a><span class="ssbp-total-shares ssbp-total-linkedin-shares ssbp-each-share">0</span><a href="mailto:?Subject=Private: Take the Pledge&amp;Body=%20http://boomeranggiving.org/" class="ssbp-btn ssbp-email" data-ssbp-title="Private: Take the Pledge" data-ssbp-url="http://boomeranggiving.org/" data-ssbp-site="Email"><span class="ssbp-text">Email</span></a></div></div>			<div class="textwidget"><br>
<br>
<br>
<br>
<div style="background-color:#363839; border-top: 12px solid #e9eaee; border-bottom: 12px solid #e9eaee; border-left: 2px solid #e9eaee; border-right: 2px solid #e9eaee;">
<p style="text-align:center; line-height: 22px; color:#fff;"><strong>Let's Stay in Touch!</strong></p>

<p style="text-align:center !important; line-height: 22px; color:#fff;">Enter e-mail to stay informed about<br>BOOMERANG GIVING</p>
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css">
<style type="text/css">
	#mc_embed_signup{background:none; font: 18px 'PTSansRegular', Arial, Helvetica, sans-serif;  width:100%; text-align:center !important;}
	/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
	   We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="//boomeranggiving.us9.list-manage.com/subscribe/post?u=081f420813d884ff7b9270435&amp;id=823e7c4392" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="novalidate">
    <div id="mc_embed_signup_scroll">
	
<div class="mc-field-group">
	<label for="mce-EMAIL">Email Address </label>
	<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" aria-required="true">
</div>
	<div id="mce-responses" class="clear">
		<div class="response" id="mce-error-response" style="display:none"></div>
		<div class="response" id="mce-success-response" style="display:none"></div>
	</div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;"><input type="text" name="b_081f420813d884ff7b9270435_823e7c4392" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="SUBMIT" name="SUBMIT" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>
<script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script><script type="text/javascript">(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->
<p style="font-size:13px;  text-align:center;">*We will not share your e-mail.</p></div>
<br>
<br>
<br>
<br>
<br></div>
			</div>

我需要以下 Javascript 里程表，每次单击按钮时加 1。这是慈善网站的一部分，每次有人捐赠时里程表都会更新。

以下是脚本:

<script>
    ;(function($){
        /*
            Function: initCounter

            Initializes the scrolling counter using the value currently displayed in the element.

            Parameters:

                $this - the counter container
                e - jQuery Event object
        */
        function initCounter($this, e){
            $this.find('.digit').each(function(){
                var $display = $(this);
                var $digit = $display.find('span');

                $digit.html([0,1,2,3,4,5,6,7,8,9,0].reverse().join('<br/>'))
                $digit.css({ 
                    top: '-' + (parseInt($display.height()) * (10 - parseInt($digit.attr('title')))) + 'px'
                });
            });

            animateDigit($this.find('.digit:last'), e);
        }

        /*
            Function: animateDigit

            Moves the digit indicated by $this one step. If the end of the counter has been reach, the subsequent digit(s) will also be rotated

            Parameters:

                $this - digit to be rotated
                e - jQuery Event object
        */
        function animateDigit($this, e){
            var $counter = $this.closest('.counter');
            var $display = $this;
            var $digit = $display.find('span');

            // If we've reached the end of the counter, tick the previous digit
            if(parseInt($digit.css('top')) == -1 * parseInt($display.height())){
                animateDigit($display.prevAll('.digit:first'), e);
            }

            $digit.animate({
                top: '+=' + $display.height() + 'px'
            }, 500, function(){
                // Repeat the animation on a semi-random interval
                if($display.index('.counter .digit') == $counter.find('.digit').length - 1){
                    setTimeout(function(){
                        animateDigit($display, e);
                    }, Math.max(550, Math.random() * 10000));
                }

                // If we've reached the end of the counter, loop back to the top
                if(parseInt($digit.css('top')) > -1 * parseInt($display.height())){
                    $digit.css({
                        top: '-' + (parseInt($display.height()) * 10) + 'px'
                    });
                }
            });
        }

     // Remove comments to animate odometer

     $(function(){
            initCounter($('.counter'), $.Event('load'));
        });
    })(jQuery);


</script>

提前非常感谢您提供的任何帮助。这又是我第一次，所以请放轻松。

Answer 1

在jquery中，将事件绑定(bind)到按钮上的点击事件可以像这样完成:

HTML:

<button id="mybuttonID">Click me to increment odometer!</button>

JS:

$(document).ready(function() {
    // wait for the dom to initialize before binding events
    $('body').on('click', '#mybuttonID', animateDigit);
});

希望这有帮助!