jQuery小功能集锦

一、jQuery实现回到顶部功能（当页面滚到到一定距离出现回到顶部按钮）

HTML代码：

<a id="topzm" style="position: fixed;bottom: 170px;right: 0px;z-index: 10000;border-radius: 5px;background:#c7a05f ;" >
	<span class="glyphicon glyphicon-arrow-up" aria-hidden="true" style="color:#FFFFFF;"></span>
</a>

jQuery代码：

<script>
    $(document).ready(function(){       
        $("#topzm").hide();
        $(function () {
            $(window).scroll(function(){
                if ($(window).scrollTop()>600){
                    $("#topzm").fadeIn(500);
                }else{
                    $("#topzm").fadeOut(500);
                }
            });
            $("#topzm").click(function(){
                $('body,html').animate({scrollTop:0},500);
                return false;
            });
        });
    });
</script>

二、jQuery实现星星点亮评分功能

HTML代码：

	    <div class="starts">
			<p><b>评分：5.0</b></p>
			<ul id="pingStar">
				<li rel="1" title="1分">*</li>
				<li rel="2" title="2分">*</li>
				<li rel="3" title="3分">*</li>
				<li rel="4" title="4分">*</li>
				<li rel="5" title="5分">*</li>
				<span id="dir"></span>
			</ul>
			<input type="hidden" value="" id="startP">
		</div>

css代码：

.starts p{padding: 0;margin: 0;float: left;height: 2.8rem;line-height: 2.8rem;}
.starts,.starts ul,.stars input{float: left;}
.starts {width: 100%;height: 2.8rem;line-height: 2.8rem;float: left;margin:0;padding: 0;padding-left: 0;overflow: hidden;}
.starts ul{margin-left: 1rem;}
.starts ul li{float:left;color:#666666;padding-right:.5rem;font-size:2.8rem;cursor: pointer;}
.starts ul li.on{color:#1ca7e8;}
.starts ul span{display:inline;float:left;padding-left:1rem;font-size: 1.6rem;color: #666666;}

jQuery代码：

<script>
window.onload = function () {
        var s = document.getElementById("pingStar"),
        m = document.getElementById('dir'),
        n = s.getElementsByTagName("li"),
        input = document.getElementById('startP');
        clearAll = function () {
            for (var i = 0; i < n.length; i++) {
              n[i].className = '';
                }
        }
         for (var i = 0; i < n.length; i++) {
                  n[i].onclick = function () {
                   var q = this.getAttribute("rel");
                   clearAll();
                   input.value = q;
                   for (var i = 0; i < q; i++) {
                    n[i].className = 'on';
                   }
                   m.innerHTML = this.getAttribute("title");
                  }
                  n[i].onmouseover = function () {
                   var q = this.getAttribute("rel");
                   clearAll();
                   for (var i = 0; i < q; i++) {
                    n[i].className = 'on';
                   }
                  }
                  n[i].onmouseout = function () {
                   clearAll();
                   for (var i = 0; i < input.value; i++) {
                    n[i].className = 'on';
                   }
        }
   }
 }
</script>

三、jQuery实现点赞功能

HTML代码：

<p><i class="glyphicon glyphicon-thumbs-up likes"></i><span class="dizan"></span></p>

jQuery代码：

<script type="text/javascript">
	// 点赞+1
	$(function () {
		for (var i = 0; i < $('.dizan').length; i++) {
			var ran = Math.floor(Math.random() * 1000 + 1)
			$('.dizan').eq(i).text(ran)	
		}
		$(".likes").click(function () {
			var num = $(this).next(".dizan").text()
			num++;
			$(this).next(".dizan").text(num);
			$(this).css("color","#1CA7E8");
			$(this).next(".dizan").css("color","#1CA7E8");

		});
	});
</script>

三、jQuery实现验证码发送倒计时功能

function btnCheck() {
  $(this).addClass("on");
  var time = 5;
  $(this).attr("disabled", true);
  var timer = setInterval(function() {
   if (time == 0) {
    clearInterval(timer);
    $("input").attr("disabled", false);
    $("input").val("获取验证码");
    $("input").removeClass("on");
   } else {
    $('input').val(time + "秒");
    time--;
   }
  }, 1000);
 }

四、js实现全选和全不选功能

<script type="text/javascript">
		
	window.onload = function (){
	var all = document.getElementById ("allchecked");			//全选checkbox
	var box = document.getElementsByClassName('box');	//子复选框
	
	//遍历checkbox，把子复选框的checked设置成全选框的状态，实现全选/全不选
	all.onclick = function (){
		for ( var i = 0; i < box.length; i++){
			box[i].checked = this.checked;
		}
	};
	//遍历checkbox，子复选框有一个未选中时，如果全选框设为false不选状态
	for ( var i = 0; i < box.length; i++){
		box[i].onclick = function (){
			if ( !this.checked ){
				all.checked = false;
			}
		};
	}
}

</script>