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

标签 javascript jquery 

<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>

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

最佳答案

在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);
});

希望这有帮助!

关于javascript - 如何通过在 Javascript 中单击按钮来更新里程表值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26875501/

上一篇：javascript - 将答案添加到peerJS脚本

下一篇：javascript - 为 Apigee Edge 上的 Google Maps at work API 生成 HMAC 签名

相关文章：

javascript - 当用户未登录时防止 AJAX 调用

javascript - 如何在使用 input[type=text] 时使用 jquery 更改表单背景颜色；

javascript - Angular JS 对象与数组

javascript - Bootstrap 调整大小和自动折叠

javascript - Backbone - 标 checkout 现在 URL 的最末尾

javascript - 如何设置 vue 可以读取的变量来对 swiper 的事件处理程序使用react

javascript - 使用 jQuery one() 函数作为 hack 来防止触发多个点击事件

javascript - 从 header 获取 token 时，req.headers.split 不是函数

jQuery fadeTo 在 Firefox/Chrome 中不起作用

javascript - 如何将图像放在内容上方

©2024 IT工具网  联系我们