微信小游戏 H5 排行榜源码
主要用了，jquery each
直接上：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>排行榜title>
head>
<body>
<div id='test'>
div>
<script src="js/jquery.min.js">script>
<script src="js/bootstrap.min.js">script>
<script>
var dataArray = [];
var htmlStr = "";
var data=[{"imgUrl":"http://www.jq22.com/tx/40.png","userName":"张三"},
{"imgUrl":"http://www.jq22.com/tx/41.png","userName":"李四"}];
//data为服务器返回的JSON数据，格式例如:{"imgUrl":"http://www.jq22.com/tx/40.png","userName":"张三"}，{"imgUrl":"http://www.jq22.com/tx/41.png","userName":"李四"}
$(data).each(function (index,value){
htmlStr ="" +
"" +
"
">"+value.userName+"";
dataArray.push(htmlStr);
});
$("#test").html(dataArray.join(""));
script>
body>
html>2真正的项目实施的代码：
2.1servlet传值到html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>排行榜title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
head>
<body>
<div class="warpper-game">
<div class="game-content">
<div class="rank-bg">
<div class="rank-bg-top"><div class="rank-bg-top-text">div>div>
<div class="rank-bg-middle">
<div class="rank-box" id="test">
div>
<div class="rank-box" >
<div class="rank-tips red"><i class="rank-tips-L">i>得分一样？咱按时间先后排序哦~谁先谁靠前呢！div>
div>
div>
<div class="rank-bg-bottom">div>
div>
div>
div>
<script src="js/jQuery.js">script>
<script src="js/bootstrap.min.js">script>
body>
<script>
$(document).ready(function(){
var xmlHttp = createXMLHttpRequest();
var url = "beginGameServlet";
xmlHttp.onreadystatechange = getStatusBack;
xmlHttp.open("POST", url, true);
xmlHttp.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
xmlHttp.send("openId=openId&state=playerlist");
})
function createXMLHttpRequest() {
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
if (xmlHttp.overrideMimeType)
xmlHttp.overrideMimeType('text/xml');
} else if (window.ActiveXObject) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
}
}
}
return xmlHttp;
}
//回调函数
function getStatusBack(){
var dataArray = [];
var htmlStr = "";
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
var json = JSON.parse(xmlHttp.responseText);
$(json).each(function (index,value){
if(index == 0){
htmlStr ="" +
"" +
"
">"+value.nickname+"" +
""+value.maxScore+ ""+"分"+""+
""+"";
}else if (index == 1) {
htmlStr ="" +
"" +
"">"+value.nickname+"" +
""+value.maxScore+ ""+"分"+""+
""+"";
}else if (index == 2){
htmlStr ="" +
"" +
"">"+value.nickname+"" +
""+value.maxScore+ ""+"分"+""+
""+"";
}else{
var count = index+1;
htmlStr =""+count+"" +
"" +
"">"+value.nickname+"" +
""+value.maxScore+ ""+"分"+""+
""+"";
}
dataArray.push(htmlStr);
});
$("#test").html(dataArray.join(""));
}
}
}
script>
html>2.2jsp controller 代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>排行榜title>
<link type="text/css" rel="stylesheet" href="/resources/css/style.css" />
head>
<body>
<div class="warpper-game">
<div class="game-content">
<div class="rank-bg">
<div class="rank-bg-top"><div class="rank-bg-top-text">div>div>
<div class="rank-bg-middle">
<div class="rank-box" >
<c:forEach var="list" items="${list}" varStatus="status">
<c:if test="${status.index+1==1}">
<div class="rank-list">
<div class="rank-list-ph rank-list-one f_l">div>
<div class="rank-list-name f_l"><img src="${list.headimgurl}">
<c:if test="${fn:length(list.nickname)>7}">
${fn:substring(list.nickname, 0, 7)}...
c:if>
<c:if test="${fn:length(list.nickname)<=7 }">
${list.nickname }
c:if>
div>
<div class="rank-list-score f_r">${list.maxScore} <span>分span>div>
<div class="clear">div>
div>
c:if>
<c:if test="${status.index+1==2}">
<div class="rank-list">
<div class="rank-list-ph rank-list-two f_l">div>
<div class="rank-list-name f_l"><img src="${list.headimgurl}">
<c:if test="${fn:length(list.nickname)>7}">
${fn:substring(list.nickname, 0, 7)}...
c:if>
<c:if test="${fn:length(list.nickname)<=7 }">
${list.nickname }
c:if>
div>
<div class="rank-list-score f_r">${list.maxScore} <span>分span>div>
<div class="clear">div>
div>
c:if>
<c:if test="${status.index+1==3}">
<div class="rank-list">
<div class="rank-list-ph rank-list-three f_l">div>
<div class="rank-list-name f_l"><img src="${list.headimgurl}">
<c:if test="${fn:length(list.nickname)>7}">
${fn:substring(list.nickname, 0, 7)}...
c:if>
<c:if test="${fn:length(list.nickname)<=7 }">
${list.nickname }
c:if>
div>
<div class="rank-list-score f_r">${list.maxScore} <span>分span>div>
<div class="clear">div>
div>
c:if>
<c:if test="${status.index+1!=3&&status.index+1!=1&&status.index+1!=2}">
<div class="rank-list">
<div class="rank-list-ph f_l">${status.index+1}div>
<div class="rank-list-name f_l"><img src="${list.headimgurl}">
<c:if test="${fn:length(list.nickname)>7}">
${fn:substring(list.nickname, 0, 7)}...
c:if>
<c:if test="${fn:length(list.nickname)<=7 }">
${list.nickname }
c:if>
div>
<div class="rank-list-score f_r">${list.maxScore} <span>分span>div>
<div class="clear">div>
div>
c:if>
c:forEach>
div>
<div class="rank-box" >
<div class="rank-tips red "><i class="rank-tips-L">i>得分一样？咱按时间先后排序哦~谁先谁靠前呢！div>
div>
div>
<div class="rank-bg-bottom">div>
div>
div>
div>
<script src="/resources/js/jquery.min.js">script>
<script src="/resources/js/bootstrap.min.js">script>
body>
html>