`

html+js来获取服务器时间

阅读更多

      只用一个html+js来获取服务器时间并在html显示出来(只要显示时间数字 每秒变化),只能写一个html文件 jsp和后台java不能修改或增加。后台只需tomcat启动。因为我们只要取得服务器的时间,所以HEAD方法很合适。

      使用Ajax每秒获取服务器的时间,然后在显示出来,但是这个用户的网络延迟比较厉害,请求的时间两三秒才到达客户端,那这样更新的时间就不准确了。

       采用这样处理效果好得多,第一次页面加载时从服务器端获得时间,然后以这个时间为基准,客户端再用js每秒累加。一下代码是完整的处理:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>server time</title>

<script type="text/javascript">

function gainTime() {
 if(window.ActiveXObject) {
  xmlHttpRequest=new ActiveXObject("microsoft.XMLHTTP");
 } else if (window.XMLHttpRequest) {
  xmlHttpRequest=new XMLHttpRequest(); 
 }
 
 xmlHttpRequest.open("HEAD","http://localhost:8088/webdemo/1.html",true);
 xmlHttpRequest.send("");
 xmlHttpRequest.onreadystatechange=function() {
  if(xmlHttpRequest.readyState==4) {
   if (xmlHttpRequest.status == 200) {
       var dateStr=xmlHttpRequest.getResponseHeader("Date");
    var d=new Date(dateStr);
    var h = d.getHours();
    var m = d.getMinutes();
    var s = d.getSeconds();
    m = checkTime(m);
    s = checkTime(s);
    var timeStr = h + ":" + m + ":" + s;
   
    setInterval(function(){
     var arr = timeStr.split(":");
     if (arr[2] < 59) {
      arr[2] ++;
      arr[2]=checkTime(arr[2]);
     } else if (arr[2] == 59 && arr[1] < 59) {
      arr[1] ++;
      arr[1]=checkTime(arr[1]);
      arr[2] = "00";
     }
     
     if (arr[1] == 59 && arr[2] == 59 && arr[0] < 23) {
      arr[0] ++;
      arr[1] = "00";
      arr[2] = "00";
     }
     
     if (arr[1] == 59 && arr[2] == 59 && arr[0] == 23) {
      arr[0] = "00";
      arr[1] = "00";
      arr[1] = "00";
     }
     
     timeStr = arr.join(":");
     document.getElementById("txt").innerHTML=timeStr;
    },1000);
    
     }
     }
 }
}

function checkTime(i) {
 if (i<10) {
  i="0" + i
 }
 return i
}


</script>


</head>
<!-- <body onload="setInterval('gainTime()',1000);"> -->

<body onload="gainTime();">
<p>welcome</p>

<div id="txt"></div>

</body>
</html>

1
0
分享到:
评论

相关推荐

    纯 JS 获取 服务器时间 +

    标题“纯 JS 获取服务器时间 +”所指的就是使用JavaScript代码来实现从服务器获取准确的时间信息。下面是一个简单的示例,使用了XMLHttpRequest(XHR)进行同步请求: ```javascript function getServerTime() { ...

    js获取服务端时间并倒计时

    - `js 服务器时间`:指的是JavaScript获取服务器时间的方法,如上述示例所示。 - `倒计时`:指的是使用JavaScript实现的定时器功能,用来展示从某一时间点开始的剩余时间。 5. **项目文件结构**: - `demoeee....

    纯 JS 获取 服务器时间(带农历)(附时间代码大全)

    通过以上示例,你可以了解到如何使用纯JavaScript获取服务器时间、进行农历转换,并掌握基本的时间操作技巧。在实际项目中,结合提供的HTML时间代码(如01.html、HTML时间代码.txt)和说明(如说明.txt、01.txt),...

    html5+javascript+css商城(模拟联想)购物系统

    项目中可能使用了JavaScript进行前端验证,然后通过Ajax将数据提交到服务器进行后台验证。数据的增删改功能,如添加商品、修改商品信息或删除商品,通常通过异步请求与服务器进行交互,保持页面的即时更新,同时保证...

    html5+css3+JS代码

    最后,在JavaScript部分,可以学习如何使用AJAX异步通信技术获取服务器数据,动态更新页面内容,或者使用canvas元素和JavaScript的绘图API创建图形和游戏。 总的来说,HTML5、CSS3和JavaScript的结合使得现代Web...

    HTML+CSS+JS数据可视化大屏平台模板实例10-大数据地图

    1. 数据加载:从服务器或本地文件中获取数据,可以是JSON、CSV或API接口返回的数据。 2. 地图渲染:利用地图库绘制世界地图、中国地图或其他特定区域地图,并进行地理定位。 3. 数据绑定:将数据与地图上的特定区域...

    在html页面使用JavaScript实行文件上传到本地服务器并获取文件所在路径

    使用JavaScript实现文件上传到本地服务器并获取到上传后文件所在路径,是由到JavaScript,java以及html页面。这个比较好,不是在jsp上获取路径,jsp太简单了,而且过时了,所以就在html页面实现了下功能,我主要是做...

    HTML+CSS+JS数据可视化大屏平台模板实例15-智慧物流

    同时,可以通过AJAX异步请求获取服务器上的最新物流数据,保持大屏信息的实时性。 在智慧物流大屏的设计过程中,还需考虑以下几点: 1. 数据集成:将来自不同物流系统的数据整合到一个统一的格式,以便于JS库进行...

    大屏可视化,html+CSS+JS+echarts

    5. 实现数据动态加载和实时更新,例如通过AJAX从服务器获取最新数据,或者设定定时任务自动刷新图表。 6. 添加交互式地图、时间轴等高级组件,提升用户体验。 总结来说,“大屏可视化,html+CSS+JS+echarts”是一个...

    HTML+CSS+JS手机端购物车demo

    在本项目"HTML+CSS+JS手机端购物车demo"中,我们将探讨如何利用前端技术栈,特别是HTML、CSS和JavaScript(以及Vue.js框架),来实现一个手机端的购物车功能。这个示例是一个获取JSON数据并使用Vue进行数据绑定和...

    html5+js 实现二维码扫描

    4. JavaScript定时器每隔一段时间(例如每秒一次)从`&lt;video&gt;`元素中获取一帧,并在Canvas上绘制: ```javascript var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); ...

    javascript实现获取服务器时间

    下面是完整的js获取服务器时间代码,是使用javascript获取服务器时间的完整实例,js动态刷新服务器时间。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; ...

    美食网站js+html+css

    此外,JavaScript还可以处理用户提交的表单数据,如验证用户输入的邮箱格式,或者发送AJAX请求获取服务器上的动态数据。 在压缩包中的"myas"文件可能包含以下内容: 1. HTML文件:通常命名为如`index.html`,这是...

    HTML+JS+CSS

    例如,一个动态表单可能由HTML定义其结构,CSS设定样式,然后用JavaScript来验证用户输入,显示错误消息,或者与服务器进行异步通信。 学习HTML+JS+CSS是成为Web开发者的基石。它们的语法简洁,易于入门,但同时也...

    html+css+javascript ppt

    通过JavaScript,我们可以实现用户输入验证、页面动态更新、AJAX(异步JavaScript和XML)请求以获取服务器数据,以及使用DOM(Document Object Model)操作HTML元素。JavaScript也有许多流行的库和框架,如jQuery...

    HTML+JS所有资源和项目

    2. AJAX:异步JavaScript和XML,允许不刷新页面的情况下从服务器获取数据,提高用户体验。 3. jQuery库:简化DOM操作、事件处理和动画效果,广泛应用于网页开发。 压缩包中的"所有练习"可能包含以下内容: 1. HTML...

    HTML+CSS+JS数据可视化大屏平台模板实例27-智慧机房监测通用模板

    例如,它可以与后端服务器通信,获取最新的机房环境数据,如温度、湿度、电力消耗等,并利用库如D3.js、ECharts或Highcharts等创建动态图表,实时展示这些数据的变化。同时,JavaScript还可以实现用户交互,如点击...

    HTML+JS+mergely在线文件对比

    它使用AJAX(Asynchronous JavaScript and XML)技术与服务器通信,获取或发送文件数据。当用户上传文件后,JavaScript会解析文件内容,然后运用字符串处理和正则表达式等技术找出两文件之间的差异。 文件对比算法...

    HTML+CSS+JS数据可视化大屏平台模板实例7-智慧建筑

    例如,通过JavaScript可以实时地从服务器获取建筑的能源消耗、环境监测等数据,并动态更新到图表上。用户还可以通过交互操作,如缩放、筛选数据,进一步探索和分析信息。 数据可视化是这个平台的核心,它能将抽象的...

Global site tag (gtag.js) - Google Analytics