用jQuery实现一个小时钟

我们试着用jQuery实现一个简单的时钟页面，实现思路很简单：

  • 引入jquery库

jquery库将创建一个全局对象：$。开发者需要的API都挂接在这个对象上。 它其实是一个类工厂，负责将指定的DOM对象转化为jquery对象。

  • 在DOM文档就绪后，启动一个定时器

使用$(document).ready()可以监听DOM文档就绪事件，通常简写成$(...)。

  • 在定时器里更新div#clock的文本

"div#clock"是一个选择符，使用这个选择符，jquery库可以找到那个 特定的DOM对象，并将其转化为jQuery对象。

jquery封装后的DOM对象有一堆的方法供你调用，我们使用text()方法更新其文本。

编辑器（→_→）预置了实现代码，不妨对照注释查看一下。 比起纯JavaScript，使用jQuery 的代码确实更简洁一些。

//监听DOM就绪事件
$(function(){
//启动定时器
setInterval(function(){
//取当前时间
var d = new Date();

//使用text()方法更新DOM对象的文本内容
$("#clock").text(d.toString());

},1000/*1000毫秒触发1次*/);
});

 

<html>
<head>
<!--引入jquery库，这将创建一个全局的对象：$ -->
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<!--div#clock作为我们的时钟模板，将被定时刷新-->
<div id="clock"></div>
</body>
</html>

 

div#clock{
padding:10px;
width:400px;
background:#000;
color:#0f0;
}

 

posted @ 2015-03-21 21:01  HH番茄  阅读(493)  评论(0)    收藏  举报