<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title> 无依赖Ajax时钟 </title>
<style type="text/css">
#view-time {width:400px;height:50px;font-size:40px;font-family:Arial;text-align:center;}
</style>
</head>
<body>
<div id="view-time"></div>
<div id="log"></div>
<script type="text/javascript">
if (typeof XMLHttpRequest == 'undefined') {
window.XMLHttpRequest = function() {
var _ = ['Microsoft.XMLHTTP', 'Msxml2.XMLHTTP'];
for (var i = 0, l = _.length; i < l; i++) {
try {
return new ActiveXObject(_[i]);
} catch(e) {}
}
};
}
var serverDate = function(fn) {
var B = new XMLHttpRequest();
B.onreadystatechange = function() { B.readyState == 4 && fn(new Date(B.getResponseHeader('Date')))};
B.open('HEAD', '/?_=' + (-new Date));
B.send(null);
};
Date.prototype.format = function() {
return this.getFullYear() + '-'
+ ('0' + (this.getMonth() + 1)).slice(-2) + '-'
+ ('0' + (this.getDate())).slice(-2) + ' '
+ ('0' + (this.getHours())).slice(-2) + ':'
+ ('0' + (this.getMinutes())).slice(-2) + ':'
+ ('0' + (this.getSeconds())).slice(-2);
};
serverDate(function(webTime) {
var view = document.getElementById('view-time'), diff = webTime - new Date();
view.innerHTML = webTime.format();
setInterval(function() {
view.innerHTML = (webTime.setTime(diff + new Date() * 1), webTime.format());
}, 500);
});
</script>
</body>
</html>
分享到：
相关推荐
CSS3允许我们在不依赖JavaScript的情况下创建平滑的动画效果，但在本案例中，由于jQueryRotate插件的引入，我们可以通过JavaScript实现旋转效果，使得时钟指针的转动更为灵活和精准。 jQueryRotate是jQuery的一个...
数码时钟的实现主要依赖于JavaScript的Date对象和定时器功能。Date对象提供了获取当前时间的方法，例如`Date.now()`或`new Date()`。定时器如`setInterval()`函数则允许代码在指定的时间间隔内重复执行，常用于更新...
在IT领域，jQuery是一款广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务。本项目中提到的"jQuery八卦图算风水时钟插件"是一个结合了传统文化与现代技术的创新应用，将古老的八卦...
【标签】"Jquery时钟"提示我们这款钢琴样式时钟的实现很可能依赖于JavaScript库jQuery。jQuery是一个强大的JavaScript工具包，简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。在这个项目中，jQuery可能被...
时钟的3D效果则依赖于CSS3的`perspective`属性，它定义了观察者与3D元素之间的距离，从而产生深度感。同时，`transform-style: preserve-3d;`属性使得子元素也保持3D空间内的位置，确保整个时钟的立体感。 此外，...
jQuery是一款广泛使用的JavaScript库，它简化了JavaScript的DOM操作、事件处理、动画制作和Ajax交互。通过使用jQuery，开发者可以以更简洁、高效的方式编写JavaScript代码。在本插件中，jQuery负责处理时间的动态...
在JavaScript领域，jQuery是一个广泛使用的库，它简化了DOM操作、事件处理、动画以及Ajax交互等任务，使得JavaScript编程更加简洁和高效。在这个项目中，jQuery被用来操控HTML元素，尤其是那些组成时钟的数字和时间...
- CSS3 允许开发者创建丰富的视觉效果，如渐变、阴影、动画等，无需依赖图片或JavaScript。 - 在此项目中，可能使用了 `border-radius` 创建圆形的时钟背景。 - `transform` 属性可以用于旋转数字或指针，实现...
这些特性使得开发者能够更方便地创建富媒体和交互式内容，而无需依赖Flash或其他插件。 SVG是一种基于XML的矢量图像格式，它可以精确地表示图形，无论放大多少倍都不会失真。在HTML5中，我们可以通过内联方式直接在...
7. **使用须知.txt**：这个文件通常包含使用源码的指南，比如如何在自己的项目中引入和配置代码，可能还会提到任何依赖库或特定的浏览器兼容性信息。 总的来说，这个源码包展示了如何将jQuery和CSS3结合，创建出一...
文件列表中的"使用须知.txt"很可能是包含了关于如何运行和使用这个项目的说明，包括可能需要的环境、依赖项或代码执行步骤。而"132687015711888318"这个文件名看起来不像是标准的文本或代码文件，可能是项目中的一个...
首先，jQuery是一种广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画效果和Ajax交互。在这个时钟特效中，jQuery可能被用来处理时钟的动态更新和用户交互。CSS特效则表明这个效果主要通过CSS3的新特性来实现...
jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理、动画以及Ajax交互。在本项目中，jQuery可能被用来简化JavaScript代码，使得添加、删除和修改DOM元素变得更加容易。jQuery的动画API也可能被用来控制...
首先，这个项目依赖于jQuery的核心库——`jquery-3.4.1.min.js`。这个版本的jQuery是轻量级且优化过的，适用于各种规模的项目。在项目中，开发者可能通过`<script>`标签将此库引入到HTML文件中，以便在页面上使用...
1. jQuery：JavaScript库，简化了DOM操作、事件处理、动画和Ajax交互，是实现该项目的辅助工具之一。 2. 原生JavaScript：项目的核心实现依赖于JavaScript本身，如获取时间、计算时针、分针、秒针的角度以及DOM元素...
"Clocksy"是一个专门针对这一需求设计的前端开源库，它旨在帮助开发者实现不可知客户端（即不依赖特定客户端环境）与服务器之间的时钟同步。 **1. 为什么需要时钟同步？** 时钟同步的主要目标是解决网络环境中不同...
**jQuery数字时钟插件MyDigitClock特效代码详解** 在网页设计中，有时我们需要添加一些动态元素来提高用户体验，比如实时显示时间的时钟。jQuery数字时钟插件MyDigitClock正是为此目的而生，它允许我们在网页上轻松...
如果项目涉及到前后端通信，Python可能通过API接口提供时间数据，然后JavaScript客户端通过Ajax请求获取并显示。 **README.txt** `README.txt` 文件通常包含项目的简要介绍、安装指南、使用方法等信息。在本项目中...
本项目"test-ajax-with-sinon"聚焦于使用Sinon.JS库来模拟Ajax请求，提供了一个假服务器（mock server）的示例，帮助开发者在不依赖真实服务器的情况下进行测试。 Sinon.JS是一个强大的JavaScript测试工具，尤其...