(JSP)列表展开和收缩实现

这个页面做的非常完善，涉及知识点也比较多：

1.动态给标签添加id

2.金额格式化（每3位加逗号）

3.外层li拼接的实现，内层table拼接的实现

4.列表展开和收缩的实现及缩展图片的变化

5.网络请求msg弹框

6.数组字典解析

7.设备判断

8.li和table属性运用

我把本页面的请求接口去掉了，这个不易公开，咳咳。有同样需求的可自取，用到个别知识点的可自取。

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

    <%@ include file="/common/context.jsp"%>

    <%@ page import="java.net.*"%>

    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

    <%@ taglib uri="http://java.sun.com/jstl/fmt" prefix="fmt"%>

    <%@ page isELIgnored="false"%>

    <%@ page import="java.util.*"%>

<%@page import="java.text.SimpleDateFormat"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

  <html>

  <head>

  <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>

      <meta content="yes" name="apple-mobile-web-app-capable"/>

      <meta content="black" name="apple-mobile-web-app-status-bar-style"/>

      <meta content="telephone=no" name="format-detection"/>

      <script src="../js/jquery-1.12.4.min.js"></script>

      <script  src="../js/baseEncode.js" charset=""></script>

      <link rel="stylesheet" href="../css/register.css">

      <script src="../js/common.js"></script>

      <script type="text/javascript" src="../js/cookieutils.js" ></script>

      <script type="text/javascript" src="../js/toast.js"></script>

  <script>

  <%

    String token =request.getParameter("token");

  %>

      </script>

  <title>智付宝</title>

  <style>

  ul{

    list-style: none;

    padding-left: 0rem;

    padding-right: 0rem;

  }

  .top{

    background: #f4f6f7;

    height: 1.93rem;

    line-height: 1.93rem;

    width: 100%;

  }

  .time{

    color: #999999;

    font-size: 1rem;

    float: right;

    margin-right: 3%;

    height: 100%;

    line-height: 100%;

    margin-top: 1.01rem;

    vertical-align: middle;

  }

  .liView{

    background-color: #ffffff;

    margin-left: 3%;

    margin-right: 3%;

    margin-top: 1rem;

    margin-bottom: 1rem;

    box-shadow:0 2px 5px #EEEEEE;

  }

  .headerView{

    height:11.5rem;

    line-height: 11.5rem;

    width: 94%;

    display: inline-block;

    margin-left: 3%;

    margin-right: 3%;

    margin-bottom: 1rem;

  }

  .topView{

    height: 3.6rem;

    line-height: 3.6rem;

    width: 100%;

    background-color: #ffffff;

    display: inline-block;

  }

  .city{

    color: #666666;

    font-size: 1.6rem;

    margin-left: 0.66rem;

    display: inline-block;

    float: left;

  }

  .seletImg{

    line-height: 2.6rem;

    height: 2.6rem;

    margin-top: 1rem;

    margin-bottom: 1rem;

    color: #666666;

    margin-right: 0.66rem;

    display: inline-block;

    float: right;

  }

  .img{

    height:50%;

    weight:50%;

  }

  .line{

    margin-left: 0.66rem;

    margin-right: 0.66rem;

    height: 1px;

    background-color: #EEEEEE;

    bottom: 0rem;

  }

  .leftView{

    height: 7.9rem;

    line-height: 7.9rem;

    width: 50%;

    float: left;

    background-color: #ffffff;

    display: inline-block;

  }

  .rightView{

    height: 7.9rem;

    line-height: 7.9rem;

    width: 50%;

    float: right;

    background-color: #ffffff;

    display: inline-block;

  }

  .lv_top{

    text-align: center;

    color: #E84F47;

    font-size: 1.8rem;

    height: 4rem;

    line-height: 4rem;

    margin-top: 1rem;

  }

  .rv_top{

    text-align: center;

    color: #FF9400;

    font-size: 1.8rem;

    height: 4rem;

    line-height: 4rem;

    margin-top: 1rem;

  }

  .v_bottom{

    text-align: center;

    color: #999999;

    font-size: 1.2rem;

    height: 3.9rem;

    line-height: 3.9rem;

    margin-top: -1rem;

  }

  .cityList{

    display: none;

    width: 94%;

    background-color: #ffffff;

    margin-left: 3%;

    margin-right: 3%;

    padding-bottom: 1rem;

  }

  table

  {

      border-collapse:collapse;

      width:100%;

      table-layout: fixed;

  }

  table, th, td {

    border: 1px solid rgba(255,150,106, 1);

  }

  th, td {

    text-align: center;

  }

  th {

    color:#666666;

    font-size: 1.2rem;

    padding-left:2px;

    padding-right:2px;

    padding-top:10px;

    padding-bottom:10px;

  }

  td {

    color:#666666;

    font-size: 1.1rem;

    padding-left:2px;

    padding-right:2px;

    padding-top:10px;

    padding-bottom:10px;

  }

  .bottom{

    margin-top: 1.5rem;

    /* position: fixed; */

    background:transparent;

    height: 1.93rem;

    line-height: 1.93rem;

    width: 100%;

    /* bottom: 2px; */

  }

  .tips{

    color: #E84F47;

    font-size: 1rem;

    float: left;

    margin-left: 3%;

    height: 100%;

    line-height: 100%;

    vertical-align: middle;

  }

  .toast-wrap{

          opacity: 0;

          position: fixed;

          left:50%;

          width:50%;

          transform:translate(-50%,-50%);

          word-wrap:break-word;

          padding:10px;

          text-align: center;

          z-index:9999;

          font-size:0.9rem;

          max-width:90%;

          color: #fff;

          border-radius: 5px;

          background: rgba(0,0,0,0.7);

          overflow: hidden;

      }

      .toast-msg{

          padding: 2px 5px;

          border-radius: 5px;

          font-size: 0.42rem;

      }

      .toastAnimate{

          animation: toastKF 2s;

      }

  </style>

  </head>

  <body>

    <div class="content">

      <div class="mask">

        <div class="top">

          <div class="time" id="dataDt">

        <% Date d = new Date(); SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); String now = df.format(d); %>

            统计时间：<%=now %>

          </div>

        </div>

        <ul id="quickList">

          </ul>

      <!-- toast提示 -->

      <div class="toast-wrap">

          <span class="toast-msg"></span>

      </div>

      </div>

      <div class="bottom">

        <div class="tips">

          准实时数据，误差不超过5分钟

        </div>

      </div>

    </div>

  </body>

  <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

  <script type="text/javascript">

  console.log(window.location);

  console.log("xin");

  var browser = {

      versions: function () {

          var u = navigator.userAgent, app = navigator.appVersion;

          return {        //移动终端浏览器版本信息

              trident: u.indexOf('Trident') > -1, //IE内核

              presto: u.indexOf('Presto') > -1, //opera内核

              webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核

              gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核

              mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端

              ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端

              android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器

              iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器

              iPad: u.indexOf('iPad') > -1, //是否iPad

              webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部

          };

      }(),

      language: (navigator.browserLanguage || navigator.language).toLowerCase()

  }

  // myChart.setOption(option);

  var checkParam = JSON.stringify({

    "token": '<%=token%>'

  });

  $.ajax({

    url: "此处是填写你的接口", 

    data: checkParam,

    type: "post",

    contentType: "application/x-www-form-urlencoded; charset=UTF-8",

    dataType: "json",

    success: function(data) {

      if(data.returnCode != "MCA00000") {

        setToast(data.returnMsg);

      } else {

      // $("#dataDt").text(data.dataDt);

      for(var i=0;i<data.datas.length;i++){

          $("#quickList").append(//外层li拼接的实现

              '<li class="liView">' +

              '<div class="headerView">'+

              '<div class="topView">'+

              '<div class="city">'+data.datas[i].mercNm+'</div>'+

              '<div class="seletImg" id="seletImg'+i+'">'+//动态给标签添加id

              '<img class="img" id="img'+i+'" src="../img/transactionRecord/icon_hide.png" alt="">'+

              '</div>'+

              '</div>'+

              '<div class="line">'+

              '</div>'+

              '<div class="leftView">'+

              '<div class="lv_top">'+priceSwitch(data.datas[i].sumAmount)+//金额格式化

              '</div>'+

              '<div class="v_bottom">交易总金额（元）'+

              '</div>'+

              '</div>'+

              '<div class="rightView">'+

              '<div class="rv_top">'+priceSwitch(data.datas[i].sumCount)+

              '</div>'+

              '<div class="v_bottom">交易总笔数（笔）'+

              '</div>'+

              '</div>'+

              '</div>'+

              '</div>'+

              '<ul class="cityList" id="cityList'+i+'">'+

              '<table id="payList'+i+'">'+

              '<tr>'+

              '<th>'+

              '支付方式</th>'+

              '<th>交易总金额（元）'+

              '</th>'+

              '<th>交易总笔数（元）'+

              '</th>'+

              '</tr>'+

              '</table>'+

              '</ul>'+

              '</li>'

          )

          var payInfo =  JSON.parse(data.datas[i].payInfo);//转换为json对象

          var payTypeText='';

          for (var j = 0; j <payInfo.length; j++) {

            if (payInfo[j].payType=="Installment") {

                payTypeText='信用卡分期'

            }

            if (payInfo[j].payType=="AFixed") {

                payTypeText='支付宝'

            }

            if (payInfo[j].payType=="POSPAY") {

                payTypeText='银行卡'

            }

            if (payInfo[j].payType=="PLive") {

                payTypeText='麦保付'

            }

            if (payInfo[j].payType=="WFixed") {

                payTypeText='微信'

            }

            if (payInfo[j].payType=="H5") {

                payTypeText='公众号'

            }

                  $("#payList"+i).append(//内层table拼接的实现

                    '<tr>'+

                    '<td>'+payTypeText+

                    '</td>'+

                    '<td>'+priceSwitch(payInfo[j].sumAmount)+

                    '</td>'+

                    '<td>'+priceSwitch(payInfo[j].sumCount)+

                    '</td>'+

                    '</tr>'

                )

          }

        };

        //点击事件展开和收缩的实现及图片的变化

        $('.liView').click(function(event) {

            if($("#cityList"+$(this).index()).css("display")=="none"){

              //展示

              hide=false;

              $("#cityList"+$(this).index()).css('display','block');

              $("#img"+$(this).index()).attr("src","../img/transactionRecord/icon_show.png");

              $("#img"+$(this).index()).css("height","30%","width","50%","margin-right", "0.66rem");

              $("#seletImg"+$(this).index()).css("margin-top","1.5rem");

            }else{

              //隐藏

              hide=true;

              $("#cityList"+$(this).index()).css('display','none');

              $("#img"+$(this).index()).attr("src","../img/transactionRecord/icon_hide.png");

              $("#img"+$(this).index()).css("height","50%","width","50%","margin-right", "0.66rem");

                $("#seletImg"+$(this).index()).css("margin-top","1rem");

            }

        });

      }

    },

    error: function(xhr, type) {

      $('.mask').css('display', 'none');

      setToast('服务器开小差了，请稍后再试');

    }

  })

    function priceSwitch(x) {

        //强制保留两位小数

        var f = parseFloat(x);

        if (isNaN(f)) return false;

        var s = f.toString();

        var rs = s.indexOf('.');

        //每三位用一个逗号隔开

        var leftNum=s.split(".")[0];

        var rightNum="."+s.split(".")[1];

        var result;

        //定义数组记录截取后的价格

        var resultArray=new Array();

        if(leftNum.length>3){

            var i=true;

            while (i){

                resultArray.push(leftNum.slice(-3));

                leftNum=leftNum.slice(0,leftNum.length-3);

                if(leftNum.length<4){

                    i=false;

                }

            }

            //由于从后向前截取，所以从最后一个开始遍历并存到一个新的数组，顺序调换

            var sortArray=new Array();

            for(var i=resultArray.length-1;i>=0;i--){

                sortArray.push(resultArray[i]);

            }

            result=leftNum+","+sortArray.join(",")+rightNum;

        }else {

            result=s;

        }

        return result;

    }

  function setToast(msg){//网络请求msg弹框

      setTimeout(function(){

          document.getElementsByClassName('toast-wrap')[0].getElementsByClassName('toast-msg')[0].innerHTML=msg;

          var toastTag = document.getElementsByClassName('toast-wrap')[0];

          toastTag.className = toastTag.className.replace('toastAnimate','');

          setTimeout(function(){

              toastTag.className = toastTag.className + ' toastAnimate';

          }, 100);

      },500);

  }

  </script>

</html>


最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 205,033评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,725评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,473评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,846评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,848评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,691评论 1赞 282
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,053评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,700评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 42,856评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,430评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,034评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2赞 343

推荐阅读更多精彩内容