`
八岭书生
  • 浏览: 104084 次
  • 性别: Icon_minigender_1
  • 来自: 福州
社区版块
存档分类
最新评论

通过JavaScript实现一个动态时钟

JavaScriptXHTMLHTML 
阅读更多 
<!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=utf-8" />
<title>动态时钟</title>
<script language="javascript">
	function displayTime(){
	  var today = new Date();//定义日期对象
	  var hours = today.getHours();
	  var minutes = today.getMinutes();
	  var seconds = today.getSeconds();
	  minutes = fixTime(minutes);
	  seconds = fixTime(seconds);
	  var the_time = hours + ":" + minutes + ":" + seconds;
	  window.document.the_form.showTime.value = the_time;//将时间设置到文本中
	  the_timeout = setTimeout("displayTime();",1000);//每一秒执行一次函数
	  
	  function fixTime(the_time){
		  if(the_time<10){
			the_time = "0"+the_time;
		  }
		  return the_time;
	  }
	}
</script>
</head>

<body onload="displayTime()">
    <form name="the_form">
    	<font face="Arial, Helvetica, sans-serif">当前时间：<input type="text" name="showTime" size="16" /></font>
    </form>
</body>
</html>
分享到：
| 显示当前在线人数——监听器listener
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    javascript实现动态时钟

    通过这种方式，我们可以实现一个动态的JavaScript时钟。这个项目不仅可以帮助初学者理解JavaScript时间和日期处理，还可以深入学习CSS3的动画和变换效果。在实际的博客说明中，可以详细解释每个步骤，并提供完整的...

    基于javascript实现动态时钟效果

    本篇内容主要围绕如何使用JavaScript编程语言制作一个动态时钟效果，包括显示当前日期和时间，并且每秒更新一次，这种动态时钟在网页设计中能够提供实时的用户体验。 首先，需要了解JavaScript是一种高级的、解释型...

    JavaScript开发一个时钟

    现在，我们要用JavaScript来实现时钟的动态更新。在`clock.js`文件中，我们将使用`setInterval`函数每秒更新时间，并通过DOM操作来改变HTML中的内容。首先，获取到HTML中的时钟div元素，然后定义一个函数来获取当前...

    javascript+html实现的时钟

    这里的`&lt;style&gt;`标签定义了时钟显示的样式，而`&lt;script&gt;`标签则链接了一个名为`script.js`的外部JavaScript文件，这个文件将包含实现时钟功能的代码。 接下来，我们讨论JavaScript部分。`script.js`文件会包含一个...

    【JavaScript源代码】JavaScript实现动态数字时钟.docx

    本文将探讨如何使用JavaScript实现一个动态数字时钟。 首先，我们需要一个HTML文档作为展示时钟的容器。`&lt;!DOCTYPE html&gt;`声明这是一个HTML5文档，`&lt;html lang="en"&gt;`定义了文档的语言为英语。`&lt;head&gt;`部分包含`...

    javascript动态时钟

    本主题将深入探讨如何使用JavaScript实现一个动态更新的时钟，包括基础概念、核心代码以及相关知识点。 首先，我们需要理解JavaScript的时间处理机制。在JavaScript中，`Date`对象是处理日期和时间的核心类。通过...

    js动态实现美观的时钟展示显示

    总结，创建一个动态美观的时钟展示需要以下几个步骤： 1. 使用`Date`对象获取当前时间。 2. 编写辅助函数格式化时间。 3. 创建HTML元素并用CSS美化。 4. 使用`setInterval`定时更新时钟。 5. 根据时间更新元素的...

    javascript实现炫酷的网页版时钟

    这款炫酷的网页时钟是通过JavaScript技术实现的，为网页增添了一抹时尚和创意的色彩。时钟界面设计简洁美观，融合了令人惊艳的动态效果，为用户提供了一种全新的时间感知体验。 通过巧妙运用JavaScript编写的时钟...

    基于JavaScript的数字时钟

    在这个场景中，我们讨论的是一个用JavaScript实现的数字时钟，它旨在实时显示当前时间，并且针对不同的浏览器（如Internet Explorer和Firefox）进行了兼容性优化。 首先，让我们深入了解一下JavaScript数字时钟的...

    原生js实现动态指针时钟效果

    本示例主要讲解如何利用原生JavaScript来实现一个动态指针时钟效果，结合CSS3的样式处理，为用户带来直观且生动的时间显示体验。下面我们将深入探讨这个话题，了解如何构建这样的时钟。 首先，我们需要在HTML中创建...

    HTML+CSS+JavaScript+Canvas实现一个粒子时钟

    在这个“粒子时钟”的项目中，我们将深入探讨这些技术如何结合，以创建一个动态的、粒子效果的时间显示。 首先，HTML（HyperText Markup Language）是网页的基础结构，用于定义页面的各个部分，如标题、段落和链接...

    JavaScript动态时钟.zip

    在本项目"JavaScript动态时钟.zip"中，我们将会探讨如何利用JavaScript来实现一个实时更新、显示系统当前时间的动态时钟，以及可能存在的两种不同实现方式。 首先，动态时钟的基本原理是通过JavaScript的`Date`对象...

    动态时钟.zip

    在软件开发领域，动态时钟可能是一个用各种编程语言实现的应用。例如，JavaScript可以用于网页上的动态时钟，通过JavaScript的setInterval函数周期性地更新DOM元素来显示时间。如果是Python，可能使用time或datetime...

    javascript动态显示钟表

    ### JavaScript动态显示钟表知识点详解 ...通过以上分析可以看出，使用JavaScript实现动态时钟不仅可以提升用户体验，还可以作为学习JS基础知识的一个良好实践项目。希望本文能够帮助你更好地理解和掌握相关知识点。

    Javascript实现动态时钟效果

    在本文中，我们将探讨如何使用JavaScript实现一个动态时钟的效果，这涉及到DOM操作、时间戳处理以及定时器的概念。 首先，CSS部分用于设置时钟的样式。`#box` 是一个CSS选择器，它指向具有ID为"box"的HTML元素。在...

    倒影时钟 javascript 倒影 时钟 源码 html IE

    通过以上分析，我们可以预期这个项目是一个基于HTML和JavaScript的简单倒影时钟教程，适合初学者学习如何用代码创建动态视觉效果，并了解JavaScript与HTML、CSS的互动方式，以及考虑浏览器兼容性的实践。

    罗盘时钟 JavaScript实现

    1.一个网页动态时钟，可图一乐

    数字时钟 0-9数字图片收藏 javascript实现的时钟图片

    本文将深入探讨如何使用JavaScript来实现一个数字时钟，并重点介绍0-9数字图片的运用，以及如何通过编程技巧将这些图片与时间显示相结合。 首先，我们需要理解JavaScript中的Date对象。Date对象是JavaScript内置的...

    动态时钟_动态时钟_网页版时钟_sceneafx_

    3. jquery.min.js：这是一个轻量级的JavaScript库——jQuery的压缩版本，它简化了DOM操作、事件处理和动画效果的创建，可能在这个动态时钟项目中用于实现时间和动画效果的控制。 4. clock.js：这是JavaScript文件，...

Magicbox
Global site tag (gtag.js) - Google Analytics