微信小游戏 H5 排行榜源码

最新推荐文章于 2024-01-28 23:03:39 发布
最新推荐文章于 2024-01-28 23:03:39 发布
阅读量3.3k 收藏 9
点赞数
分类专栏： java web 文章标签： jquery 排行榜 游戏 微信 源码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014624241/article/details/53818597
版权

主要用了，jquery each
直接上：

<!DOCTYPE html>
<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 ="<div class='rank-list'><div class='rank-list-ph rank-list-one f_l'></div>" +
                "<div class='rank-list-name f_l'>" +
                "<img src="+value.imgUrl+">"+value.userName+"</div></div>";
        dataArray.push(htmlStr);
    });
    $("#test").html(dataArray.join(""));
</script>
</body>


</html>

2真正的项目实施的代码：

2.1servlet传值到html
<!DOCTYPE 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>
            <!--排行列表 end-->
            <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 ="<div class='rank-list'><div class='rank-list-ph rank-list-one f_l'></div>" +
                      "<div class='rank-list-name f_l'>" +
                      "<img src="+value.headImgUrl+">"+value.nickname+"</div>" +
                      "<div class='rank-list-score f_r'>"+value.maxScore+ "<span>"+"分"+"</span></div>"+
                      "<div class='clear'>"+"</div></div>";
                }else if (index == 1) {
                    htmlStr ="<div class='rank-list'><div class='rank-list-ph rank-list-two f_l'></div>" +
                      "<div class='rank-list-name f_l'>" +
                      "<img src="+value.headImgUrl+">"+value.nickname+"</div>" +
                      "<div class='rank-list-score f_r'>"+value.maxScore+ "<span>"+"分"+"</span></div>"+
                      "<div class='clear'>"+"</div></div>";
                }else if (index == 2){
                    htmlStr ="<div class='rank-list'><div class='rank-list-ph rank-list-three f_l'></div>" +
                      "<div class='rank-list-name f_l'>" +
                      "<img src="+value.headImgUrl+">"+value.nickname+"</div>" +
                      "<div class='rank-list-score f_r'>"+value.maxScore+ "<span>"+"分"+"</span></div>"+
                      "<div class='clear'>"+"</div></div>";
                }else{
                    var count = index+1;
                    htmlStr ="<div class='rank-list'><div class='rank-list-ph f_l'><span>"+count+"</span></div>" +
                      "<div class='rank-list-name f_l'>" +
                      "<img src="+value.headImgUrl+">"+value.nickname+"</div>" +
                      "<div class='rank-list-score f_r'>"+value.maxScore+ "<span>"+"分"+"</span></div>"+
                      "<div class='clear'>"+"</div></div>";
                }
                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" %> 
<!DOCTYPE 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="/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>           
           <!--排行列表 end-->
        </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>
不对法
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
亿级用户游戏排行榜设计方案
2301_79058522的博客
04-19 740
毕竟工作也这么久了 ，除了途虎一轮，也七七八八面试了不少大厂，像阿里、饿了么、美团、滴滴这些面试过程就不一一写在这篇文章上了。我会整理一份详细的面试过程及大家想知道的一些问题细节。
html5游戏 分数排行榜,Unity如何实现分数排行榜功能（Web数据库）
weixin_36301639的博客
06-03 380
using UnityEngine;using System.Collections;using System.Collections.Generic;public class UI : MonoBehaviour｛public string path = "http://localhost/Unity/RandingUpdate.php";public string downloadPath =...
html动态生成榜单信息,排行榜.html
weixin_39859909的博客
06-10 1920
排行榜$axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };$axure.utils.getOtherPath = function() { return 'resources/Other.html'; };$axure.utils.getReloadPath ...
游戏中排行榜的后台实现
最新发布
weixin_54227075的博客
01-28 2004
游戏中经常会有排行榜需求需要实现，例如常见的战力排行榜、积分排行榜等等。 排行榜一般会用到 Redis 来实现，原因是： 1. Redis 基于内存操作，速度快 2. Redis 提供了高效的有序集合 zset
h5固定前三名排行榜
hy3528的博客
11-23 563
h5固定前三名排行榜 <title>公益积分榜</title> <script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script> <style> body { backgrou...
将游戏成绩传到排名页面html,HTML5网页谷歌游戏排行榜提交问题
weixin_39831170的博客
06-09 132
我想实现一个谷歌播放排行榜中一个非常基本的JavaScript游戏：HTML5网页谷歌游戏排行榜提交问题我已经包含了什么，我认为是必要的meta标签，登记表，并在我的索引脚本.html文件：我将在按钮标准的谷歌标志：我已经包括了谷歌的API：在我games.js文件，我已经包括了呼叫通过提交分数：gapi.client.load('games','v1',function(response) {v...
CocosCreator | 微信小游戏排行榜 微信开放域
Valiancer
01-17 875
更多笔记和源码请关注：【微信公众号】 CocosCreator笔记 演示 技术摘要 主域工程 微信授权 创建子域节点 向子域发送消息 子域工程 读写用户云托管数据 接收主域发送的消息 构建运行 实现 1微信授权 只实现微信小游戏排行榜的话可以不用添加微信授权 但多记录点，以备不时之需 微信授权按钮代码： //创建一个透明按钮在登...
单页亚运会奖牌榜html源代码
03-18
亚运会数据来源网络，即时自动更新。只需改动下标题，上传即可运行！
微信小游戏源码
10-14
微信小游戏源码，和素材，大家可以下载下来玩一玩
微信小游戏 —— 关系链数据使用(排行榜的显示)
weixin_34014555的博客
05-25 1163
前言 微信小游戏属于微信小程序的一个类目，小游戏对比于普通的h5游戏，其很大的一个特点是微信提供的关系链数据的使用，你可以获得同玩这个游戏的微信好友的数据，或者你在某个群的用户数据 概念 具体概念请前往-》关系链数据使用指南 需要了解关系链api和开放域，主域等概念。以下着重介绍具体的api使用 wx.setUserCloudStorag...
微信小游戏源码80套（H5网页游戏）
04-09
HTML5游戏源码，各个好用，非常好玩，下面小编整理了一些最近很火的微信游戏，上传到空间主机即可。 游戏有：2048、全民寻找房祖名、数钱数到手抽筋、疯狂打企鹅、暴打神经猫、切西瓜、激光战警、微信找你妹、疯狂挠痒痒、疯狂手指、对木头、读心术、祈福、一个不能死、看你有多色、小鸟、小苹果、熊出没、最强眼力、拆散情侣、捉鬼、雷霆战机等等等啊。
游戏排行榜实现(平衡二叉树)
08-10
NULL 博文链接：https://ahopedog.iteye.com/blog/2209485
2018微信h5小游戏源码整理合集
09-19
2018微信h5小游戏源码整理合集,
40个H5小游戏实例完整源码
10-18
Html5游戏平台源码，40款h5小游戏和多款有趣的测试。在浏览器可以直接运行。包含包括答题问卷、积分赚取、抽奖、找你妹，跑酷、2048、小鸟飞飞、飞的更高、一个都不能死......等，对与要写H5小游戏或者微信公众号小游戏的朋友是一个很好的参考，大家可以下载来看看
H5微信小游戏源码-开心消消乐.zip
11-11
【标题】"H5微信小游戏源码-开心消消乐.zip"揭示了这是一个关于H5技术实现的微信小游戏，具体是“开心消消乐”的源代码。H5，即HTML5，是最新一代的超文本标记语言标准，它在移动设备上的应用广泛，尤其适合开发跨...
微信答题小小游戏h5源码
01-17
开发微信小游戏H5，通常会使用微信官方提供的开发者工具，该工具集成了编译、调试、预览等功能，方便开发者进行代码编写和测试。此外，还可以选择一些流行的H5游戏框架，如Cocos Creator、Egret Wing等，它们提供了...
H5微信小游戏源码-熊出没.zip
11-11
【标题】"H5微信小游戏源码-熊出没.zip" 涉及的主要知识点包括以下几个方面： 1. **HTML5 (H5)**：H5是HTML5的简称，是HTML标准的最新版本，它引入了许多新的特性和功能，使得网页开发更为便捷且功能强大。在H5中，...
html5微信小游戏源码 猫咪游戏源码（仅用于参考）
01-25
html5微信小游戏源码 猫咪游戏源码（仅用于参考）html5微信小游戏源码 猫咪游戏源码（仅用于参考）html5微信小游戏源码 猫咪游戏源码（仅用于参考）html5微信小游戏源码 猫咪游戏源码（仅用于参考）html5微信小游戏...
unity微信小游戏接入排行榜
01-26
在Unity中接入微信小游戏的排行榜功能主要分为以下几个步骤。首先，需要在Unity中安装微信小游戏的SDK，并进行相应的配置工作。然后，通过Unity的接口调用，将游戏中的用户数据传输到微信服务器上，包括分数、成绩等...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不对法

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值