（JavaScript（2) ）---------------（精简）纯前端实现页码，页面跳转，上下页

最新推荐文章于 2023-03-25 08:37:22 发布

wbs925zxh

最新推荐文章于 2023-03-25 08:37:22 发布

阅读量872

点赞数

本文链接：https://blog.csdn.net/wbs925zxh/article/details/87870683

版权

HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="yemiannew.css" rel="stylesheet" type="text/css">
		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
	</head>
	<body>
		<div class="big_div">
			<div class="center_div" id="shouye" onclick="count('thefirstpage')">首页</div>
			<div class="center_div" id="shangyiye" onclick="count('frontpage')">上一页</div>
			<div class="little_div"></div>
			<div class="center_div" id="xiayiye" onclick="count('nextpage')">下一页</div>
			<div class="center_div" id="moye" onclick="count('thelastpage')">末页</div>
			<div class="center_div" id="tiaozhuan" onclick="count('turn')">跳转</div>
			<input type="text" id="tiaozhuan_number"/>
		</div>
	</body>
	<script type="text/javascript">
		var number = []; 
		for(var i = 1;i <= 100;i++){
			number[i]  = i;}
		for(var j = 1;j <=5; j++){
				a = '<div id="div'+ j +'" class="center_div">';
				a += number[j];
				a += '</div>';
				$('.little_div').append(a);}
		function round(a){
			for(var j = 1;j <=5; j++){
				a++;
				$('#div'+ j +'').empty().append(number[a]);}} 
		function count( b ){
			if(b == "nextpage"){
				var div1 = $('#div1').html();
				if($('#div5').html() == 100){
					return;}
				round(div1);} 
			if(b == "frontpage"){
				var div1 = $('#div1').html();
				if($('#div1').html() == 1){
					return;}
				div1 = div1 - 2;
				round(div1);}
			if(b == "thefirstpage"){
				var div1 = 0;
				round(div1);}
			if(b == "thelastpage"){
				var div1 = 95;
				round(div1);}
			if(b == "turn"){
				var div1 = $('#tiaozhuan_number').val();
				if(div1 >=98){
					div1 = 95;
					round(div1);
					return;}
				if(div1 <=3){
					div1 = 0;
					round(div1);
					return;}
				div1 = Number(div1) - Number(3);
				round(div1);}}
	</script>	
</html>

CSS代码：

.center_div{width: 30px;
	height: 12px;
	border: 1px solid #000000;
	float: left;
	margin-left: 20px;
	font-size: 10px;
	line-height: 12px;
	text-align: center;
}
#tiaozhuan_number{
	width: 20px;
	height: 8px;
	margin-left:20px;
	float: left;
	line-height: 8px;
	text-align: center;
	font-size: 9px;
}

效果图：

wbs925zxh

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
（JavaScript（2) ）---------------（精简）纯前端实现页码，页面跳转，上下页

HTML代码&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;link href="yemiannew.css" rel="stylesheet" type=&
复制链接

扫一扫