HTML/JSP页面动态显示时间(通过jquery或ajax实现)

浅浅的花香味﹌ 2021-12-15 02:59 619阅读 0赞

## 设置定时器 ##

setInterval(函数，毫秒数)  
每隔n毫秒就会调用一次函数  
方式一. 动态显示时间

<script>
        setInterval(function () { 
            $("#d1").html(new Date().toLocaleString());
        },1000);
    </script>

方式二. Springmvc中利用与控制器异步交互获取当前格式化的时间  
前台代码

<style>
      #d1{ 
                color: #FF5722;
                font:bold 20px 'Arial Black';
            }
    </style>
    <script>
        setInterval(function () { 
            $.get("${context}/date/get",{ },function (data) { 
                $("#d1").html(data.dateStr);
            })
        },1000);
    </script>

控制器代码

@Controller
    @RequestMapping("date")
    @ResponseBody
    public class  DateController { 
        @RequestMapping("/get")
        public Map<String, String> get(){ 
            Map<String,String> map = new HashMap<>();
            Date date=new Date();
            SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
            String dateStr = sdf.format(date);
            map.put("dateStr",dateStr);
            return map;
        }
    }

方式三. jsp中通过<% %>,这种方式会获取一次时间，时间获取了一次就固定不变了,除非刷新页面

<script>
           setInterval(function () { 
           <%  
           Date date=new Date();
          %>
            $("#d1").html("<% date %>");
        },1000);

发表评论取消回复

表情：

评论列表（有 0 条评论，619人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript——在页面上实现一个显示当前时间的动态时钟

利用setInterval()函数实现动态时钟 setInterval(function() { }, 1000)//1000毫秒，一秒刷新一次

矫情吗；*/ 2024年04月06日 12:30/ 0 赞/ 71 阅读

相关 php+JQuery+Ajax简单实现页面异步刷新

页面显示如下： ![Center][] JQueryAjax.html中的代码如下（用的较为简单的$.post） <html>

悠悠/ 2022年09月23日 03:39/ 0 赞/ 243 阅读

相关 javascript页面动态显示时间变化

<html> <head> <title></title> <script> function getDat

r囧r小猫/ 2022年09月19日 05:19/ 0 赞/ 279 阅读

相关 jQuery AJAX实现调用页面后台方法

1.新建demo.aspx页面。 2.首先在该页面的后台文件demos.aspx.cs中添加引用。 using System.Web.Services;

àì夳堔傛蜴生んèń/ 2022年09月18日 14:56/ 0 赞/ 174 阅读

相关在JSP页面中显示动态时间

静态时间： 1.页面首部添加 <%@page import="java.util.Date"%> 2.页面body中需要显示时间的地方使用 <%= new Date().t

曾经终败给现在/ 2022年08月10日 11:55/ 0 赞/ 308 阅读

相关 jQuery实现AJAX定时刷新局部页面实例

本篇文章通过两种方法实例讲解ajax定时刷新局部页面，当然方法有很多种，也可以不使用ajax来刷新页面，可以使用jquery中的append来给指定内容加东西，但是都不太实

向右看齐/ 2022年06月14日 06:09/ 0 赞/ 375 阅读

相关 ajax页面动态判断

当前遇到这样的项目需求，在用户访问商品详情页面的时候，可以点击关注按钮，来收藏这个商品的信息，如果关注了以后，就要把商品的信息保存到用户的收藏列表中，并给用户一个关注成

r囧r小猫/ 2022年06月12日 07:24/ 0 赞/ 226 阅读

相关 jsp页面动态显示当前的日期时间

<div id="time1"> <script type="text/javascript"> //非动态显示 //document.getEleme

旧城等待，/ 2022年05月20日 02:54/ 0 赞/ 606 阅读

相关 HTML/JSP页面动态显示时间(通过jquery或ajax实现)

设置定时器 setInterval(函数，毫秒数) 每隔n毫秒就会调用一次函数方式一. 动态显示时间 <script> setInte

浅浅的花香味﹌/ 2021年12月15日 02:59/ 0 赞/ 620 阅读

相关 JQuery实现时间轴的ajax

对于调用,html中只需要: <div class="box"> <div class="clearfix"></div> </div> 现在，重点放在Jque

刺骨的言语ヽ痛彻心扉/ 2021年11月01日 15:10/ 0 赞/ 416 阅读