위 챗 미니 게임 H5 차 트 소스 코드
<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 代码
"java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
"c" uri="http://java.sun.com/jsp/jstl/core" %>
"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>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Is Eclipse IDE dying?In 2014 the Eclipse IDE is the leading development environment for Java with a market share of approximately 65%. but ac...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
