더 많은 정보를 얻으려면 모바일 웹페이지에 js 풀업을 구현하세요.-PHP 튜토리얼-php.cn

집

백엔드 개발

PHP 튜토리얼

더 많은 정보를 얻으려면 모바일 웹페이지에 js 풀업을 구현하세요.

小云云

Mar 21, 2018 pm 03:26 PM

javascript web

이 글은 주로 모바일 웹페이지에서 js 풀업을 구현하는 방법을 공유하여 더 많은 정보를 얻으실 수 있도록 코드 형태로 공유합니다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html>
<html>
<head>
</head>
<body> 

</p>
	<p class="bs-example" data-example-id="hoverable-table">
    <table class="table table-striped" id="tables">
      <thead>
        <tr>
          <th>#</th>
          <th>帐号</th> 
          <th>金额</th>
          <th>创建时间</th> 
          <th>手续费</th> 
        </tr>
      </thead>
      <tbody>
       <c:forEach var="user" items="${data}" varStatus="status">
        <tr>
          <th>${status.index+1 }</th>
          <td id="phone">${user.phone }</td>
          <td><fmt:formatNumber type="number" value="${user.amount }" pattern="0" maxFractionDigits="0"/></td>
          <c:set var="time" value="${user.createTime}"/>
          <td>${fn:substringBefore(time," ")}</td>
          <td><fmt:formatNumber type="number" value="${user.commAmount }" pattern="0" maxFractionDigits="0"/></td>
        </tr>
       </c:forEach>
      </tbody>
    </table>
  </p>
</body>
<script type="text/javascript">
//--------------上拉加载更多---------------
        //获取滚动条当前的位置 
$(function(){
        function getScrollTop() {
            var scrollTop = 0;
            if(document.documentElement && document.documentElement.scrollTop) {
                scrollTop = document.documentElement.scrollTop;
            } else if(document.body) {
                scrollTop = document.body.scrollTop;
            }
            return scrollTop;
        }

        //获取当前可视范围的高度 
        function getClientHeight() {
            var clientHeight = 0;
            if(document.body.clientHeight && document.documentElement.clientHeight) {
                clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
            } else {
                clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
            }
            return clientHeight;
        }

        //获取文档完整的高度 
        function getScrollHeight() {
            return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
        }
        
        // 页数
	    var page = 0;
        var id=11;
        //滚动事件触发
        window.onscroll = function() {
            if(getScrollTop() + getClientHeight() == getScrollHeight()) {
               $.get("${pageContext.request.contextPath}/app/getInviteListPage.action?userId=14&page="+page+"&rows=5",{},function(result){
               $("table").append("<tr><td><b>"+id+"</b></td><td>"+result.data[0].phone+"</td><td>"+result.data[0].amount+"</td><td>"+getMoth(result.data[0].createTime)+"</td><td>"+result.data[0].commAmount+"</td></tr>"+
               					"<tr><td><b>"+(id+1)+"</b></td><td>"+result.data[1].phone+"</td><td>"+result.data[1].amount+"</td><td>"+getMoth(result.data[1].createTime)+"</td><td>"+result.data[1].commAmount+"</td></tr>"+
               					"<tr><td><b>"+(id+2)+"</b></td><td>"+result.data[2].phone+"</td><td>"+result.data[2].amount+"</td><td>"+getMoth(result.data[2].createTime)+"</td><td>"+result.data[2].commAmount+"</td></tr>"+
               					"<tr><td><b>"+(id+3)+"</b></td><td>"+result.data[3].phone+"</td><td>"+result.data[3].amount+"</td><td>"+getMoth(result.data[3].createTime)+"</td><td>"+result.data[3].commAmount+"</td></tr>"+
               					"<tr><td><b>"+(id+4)+"</b></td><td>"+result.data[4].phone+"</td><td>"+result.data[4].amount+"</td><td>"+getMoth(result.data[4].createTime)+"</td><td>"+result.data[4].commAmount+"</td></tr>");
      		   page++;
      		   id=id+5;
           	   })           
            }
        }
 })
        //-----------------结束--------------------
        function getMoth(str){  
            var oDate = new Date(str),
            oYear = oDate.getFullYear(),  
            oMonth = oDate.getMonth()+1,  
            oDay = oDate.getDate(),  
            oTime =oYear +&#39;-&#39;+ getzf(oMonth) +&#39;-&#39;+ getzf(oDay);//最后拼接时间  
            return oTime;  
        };  
        //补0操作  
        function getzf(num){  
            if(parseInt(num) < 10){  
                num = &#39;0&#39;+num;  
            }  
            return num;  
        }  
</script>

</html>

로그인 후 복사

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7536

Cakephp 튜토리얼

1379

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법 Dec 17, 2023 pm 02:54 PM

WebSocket 및 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법 소개: 지속적인 기술 개발로 음성 인식 기술은 인공 지능 분야의 중요한 부분이 되었습니다. WebSocket과 JavaScript를 기반으로 한 온라인 음성 인식 시스템은 낮은 대기 시간, 실시간, 크로스 플랫폼이라는 특징을 갖고 있으며 널리 사용되는 솔루션이 되었습니다. 이 기사에서는 WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법을 소개합니다.

WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 Dec 17, 2023 pm 05:30 PM

WebSocket과 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 서론: 인터넷 기술의 급속한 발전과 함께 실시간 모니터링 시스템이 다양한 분야에서 널리 활용되고 있다. 실시간 모니터링을 구현하는 핵심 기술 중 하나는 WebSocket과 JavaScript의 조합입니다. 이 기사에서는 실시간 모니터링 시스템에서 WebSocket 및 JavaScript의 적용을 소개하고 코드 예제를 제공하며 구현 원칙을 자세히 설명합니다. 1. 웹소켓 기술

JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법 Dec 17, 2023 pm 12:09 PM

JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법 소개: 인터넷의 대중화와 기술의 발전으로 점점 더 많은 레스토랑에서 온라인 주문 서비스를 제공하기 시작했습니다. 실시간 온라인 주문 시스템을 구현하기 위해 JavaScript 및 WebSocket 기술을 사용할 수 있습니다. WebSocket은 TCP 프로토콜을 기반으로 하는 전이중 통신 프로토콜로 클라이언트와 서버 간의 실시간 양방향 통신을 실현할 수 있습니다. 실시간 온라인 주문 시스템에서는 사용자가 요리를 선택하고 주문을 하면

WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법 Dec 17, 2023 am 09:39 AM

WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법 오늘날의 디지털 시대에는 점점 더 많은 기업과 서비스에서 온라인 예약 기능을 제공해야 합니다. 효율적인 실시간 온라인 예약 시스템을 구현하는 것이 중요합니다. 이 기사에서는 WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. WebSocket이란 무엇입니까? WebSocket은 단일 TCP 연결의 전이중 방식입니다.

JavaScript와 WebSocket: 효율적인 실시간 일기예보 시스템 구축 Dec 17, 2023 pm 05:13 PM

JavaScript 및 WebSocket: 효율적인 실시간 일기 예보 시스템 구축 소개: 오늘날 일기 예보의 정확성은 일상 생활과 의사 결정에 매우 중요합니다. 기술이 발전함에 따라 우리는 날씨 데이터를 실시간으로 획득함으로써 보다 정확하고 신뢰할 수 있는 일기예보를 제공할 수 있습니다. 이 기사에서는 JavaScript 및 WebSocket 기술을 사용하여 효율적인 실시간 일기 예보 시스템을 구축하는 방법을 알아봅니다. 이 문서에서는 특정 코드 예제를 통해 구현 프로세스를 보여줍니다. 우리

조종석 웹 UI에서 관리 액세스를 활성화하는 방법 Mar 20, 2024 pm 06:56 PM

Cockpit은 Linux 서버용 웹 기반 그래픽 인터페이스입니다. 이는 주로 신규/전문가 사용자가 Linux 서버를 보다 쉽게 관리할 수 있도록 하기 위한 것입니다. 이 문서에서는 Cockpit 액세스 모드와 CockpitWebUI에서 Cockpit으로 관리 액세스를 전환하는 방법에 대해 설명합니다. 콘텐츠 항목: Cockpit 입장 모드 현재 Cockpit 액세스 모드 찾기 CockpitWebUI에서 Cockpit에 대한 관리 액세스 활성화 CockpitWebUI에서 Cockpit에 대한 관리 액세스 비활성화 결론 조종석 입장 모드 조종석에는 두 가지 액세스 모드가 있습니다. 제한된 액세스: 이는 조종석 액세스 모드의 기본값입니다. 이 액세스 모드에서는 조종석에서 웹 사용자에 액세스할 수 없습니다.

간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법 Jan 05, 2024 pm 06:08 PM

JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법, 특정 코드 예제가 필요합니다. 서문: 웹 개발에서는 서버와의 데이터 상호 작용이 종종 포함됩니다. 서버와 통신할 때 반환된 HTTP 상태 코드를 가져와서 작업의 성공 여부를 확인하고 다양한 상태 코드에 따라 해당 처리를 수행해야 하는 경우가 많습니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법과 몇 가지 실용적인 코드 예제를 제공합니다. XMLHttpRequest 사용

웹이 무슨 뜻이야? Jan 09, 2024 pm 04:50 PM

웹은 인터넷의 응용 형태인 월드 와이드 웹(World Wide Web)이라고도 알려진 글로벌 광역 네트워크입니다. 웹은 하이퍼텍스트와 하이퍼미디어를 기반으로 한 정보 시스템으로, 사용자는 하이퍼링크를 통해 여러 웹 페이지 사이를 이동하여 정보를 검색하고 얻을 수 있습니다. 웹의 기본은 인터넷이며, 이는 통일되고 표준화된 프로토콜과 언어를 사용하여 서로 다른 컴퓨터 간의 데이터 교환과 정보 공유를 가능하게 합니다.

See all articles

더 많은 정보를 얻으려면 모바일 웹페이지에 js 풀업을 구현하세요.

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제