<!--...-->定义注释。 STF
<!DOCTYPE> 定义文档类型。 STF
<a>定义锚。 STF
<abbr>定义缩写。 STF
<acronym>定义只取首字母的缩写。 STF
<address>定义文档作者或拥有者的联系信息。 STF
<applet>不赞成使用。定义嵌入的 applet。 TF
<area>定义图像映射内部的区域。 STF
<b>定义粗体字。 STF
<base>定义页面中所有链接的默认地址或默认目标。 STF
<basefont>不赞成使用。定义页面中文本的默认字体、颜色或尺寸。 TF
<bdo>定义文字方向。 STF
<big>定义大号文本。 STF
<blockquote>定义长的引用。 STF
<body>定义文档的主体。 STF
<br>定义简单的折行。 STF
<button>定义按钮 (push button)。 STF
<caption>定义表格标题。 STF
<center>不赞成使用。定义居中文本。 TF
<cite>定义引用(citation)。 STF
<code>定义计算机代码文本。 STF
<col>定义表格中一个或多个列的属性值。 STF
<colgroup>定义表格中供格式化的列组。 STF
<dd>定义定义列表中项目的描述。 STF
<del>定义被删除文本。 STF
<dir>不赞成使用。定义目录列表。 TF
<div>定义文档中的节。 STF
<dfn>定义定义项目。 STF
<dl>定义定义列表。 STF
<dt>定义定义列表中的项目。 STF
<em>定义强调文本。 STF
<fieldset>定义围绕表单中元素的边框。 STF
<font>不赞成使用。定义文字的字体、尺寸和颜色。 TF
<form>定义供用户输入的 HTML 表单。 STF
<frame>定义框架集的窗口或框架。 F
<frameset>定义框架集。 F
<h1>to <h6>定义 HTML 标题。 STF
<head>定义关于文档的信息。 STF
<hr>定义水平线。 STF
<html>定义 HTML 文档。 STF
<i>定义斜体字。 STF
<iframe>定义内联框架。 TF
<img>定义图像。 STF
<input>定义输入控件。 STF
<ins>定义被插入文本。 STF
<isindex>不赞成使用。定义与文档相关的可搜索索引。 TF
<kbd>定义键盘文本。 STF
<label>定义 input 元素的标注。 STF
<legend>定义 fieldset 元素的标题。 STF
<li>定义列表的项目。 STF
<link>定义文档与外部资源的关系。 STF
<map>定义图像映射。 STF
<menu>不赞成使用。定义菜单列表。 TF
<meta>定义关于 HTML 文档的元信息。 STF
<noframes>定义针对不支持框架的用户的替代内容。 TF
<noscript>定义针对不支持客户端脚本的用户的替代内容。 STF
<object>定义内嵌对象。 STF
<ol>定义有序列表。 STF
<optgroup>定义选择列表中相关选项的组合。 STF
<option>定义选择列表中的选项。 STF
<p>定义段落。 STF
<param>定义对象的参数。 STF
<pre>定义预格式文本。 STF
<q>定义短的引用。 STF
<s>不赞成使用。定义加删除线的文本。 TF
<samp>定义计算机代码样本。 STF
<script>定义客户端脚本。 STF
<select>定义选择列表（下拉列表）。 STF
<small>定义小号文本。 STF
<span>定义文档中的节。 STF
<strike>不赞成使用。定义加删除线文本。 TF
<strong>定义强调文本。 STF
<style>定义文档的样式信息。 STF
<sub>定义下标文本。 STF
<sup>定义上标文本。 STF
<table>定义表格。 STF
<tbody>定义表格中的主体内容。 STF
<td>定义表格中的单元。 STF
<textarea>定义多行的文本输入控件。 STF
<tfoot>定义表格中的表注内容（脚注）。 STF
<th>定义表格中的表头单元格。 STF
<thead>定义表格中的表头内容。 STF
<title>定义文档的标题。 STF
<tr>定义表格中的行。 STF
<tt>定义打字机文本。 STF
<u>不赞成使用。定义下划线文本。 TF
<ul>定义无序列表。 STF
<var>定义文本的变量部分。 STF
<xmp>不赞成使用。定义预格式文本。
<body><div id="timer"></div>
<script type="text/javascript" language="javascript">
var endDate=new Date(2010,11,11,17,05,40)//年月日时分秒，月要减去1
(function daoJiShi()
{
var now=new Date()
var oft=Math.round((endDate-now)/1000)
var ofd=parseInt(oft/3600/24)
var ofh=parseInt((oft%(3600*24))/3600)
var ofm=parseInt((oft%3600)/60)
var ofs=oft%60
document.getElementById('timer').innerHTML='还有 '+ofd+' 天 ' +ofh+ ' 小时 ' +ofm+ ' 分钟 ' +ofs+ ' 秒'
if(ofs<0){document.getElementById('timer').innerHTML='倒计时结束！'return}
setTimeout('daoJiShi()',1000)
}())
</script>
</body>
倒计时的html代码：
<!DOCTYPE HTML><html>
<head>
<meta charset="utf-8">
<title>CSS3圆环倒计时-源码搜藏网</title>
<style>
.pie { width:200px height:200px background-color:blue border-radius:100px position:absolute }
.pie1 { clip:rect(0px,200px,200px,100px) -o-transform:rotate(0deg) -moz-transform:rotate(0deg) -webkit-transform:rotate(0deg) background:-moz-radial-gradient(20% 50% 0deg, #333, #0000ff) background:-webkit-gradient(radial, 100 100, 0, 100 100, 110, from(#000), to(#0000ff)) }
.pie2 { clip:rect(0px,100px,200px,0px) -o-transform:rotate(0deg) -moz-transform:rotate(0deg) -webkit-transform:rotate(0deg) background:-moz-radial-gradient(80% 50% 0deg, #333, #0000ff) background:-webkit-gradient(radial, 100 100, 0, 100 100, 110, from(#000), to(#0000ff)) }
.hold { width:200px height:200px position:absolute z-index:1 }
.hold1 { clip:rect(0px,200px,200px,100px) }
.hold2 { clip:rect(0px,100px,200px,0px) }
.bg { width:200px height:200px background-color:red border-radius:100px position:absolute box-shadow:0px 0px 8px #333 background:-moz-radial-gradient(0% 50% 0deg, #900, #ff0000) background:-webkit-gradient(radial, 100 100, 0, 100 100, 110, from(#900), to(#ff0000)) }
.time { width:160px height:160px margin:20px 0 0 20px background-color:#fff border-radius:100px position:absolute z-index:1 box-shadow:0px 0px 8px #333 inset text-align:center line-height:160px font-family:"Book Antiqua", Palatino, serif font-size:35px font-weight:bold text-shadow: 1px 1px 3px #333 }
.time em { background:#fff position:absolute top:62px left:12px height:18px width:140px opacity:0.4 }
</style>
</head>
<body>
<div class="hold hold1">
<div class="pie pie1"></div>
</div>
<div class="hold hold2">
<div class="pie pie2"></div>
</div>
<div class="bg"> </div>
<div class="time"><span></span><em></em></div>
<script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
<script>
i = 0
j = 0
count = 0
MM = 4
SS = 59
MS = 9
totle = (MM+1)*600
d = 180*(MM+1)
MM = "0" + MM
function showTime(){
totle = totle - 1
if(totle==0){
clearInterval(s)
clearInterval(t1)
clearInterval(t2)
$(".pie2").css("-o-transform","rotate(" + d + "deg)")
$(".pie2").css("-moz-transform","rotate(" + d + "deg)")
$(".pie2").css("-webkit-transform","rotate(" + d + "deg)")
}else{
if(totle>0 && MS>0){
MS = MS - 1
if(MS < 10){MS = "0" + MS}
}
if(MS==0 && SS>0){
MS = 10
SS = SS - 1
if(SS < 10){SS = "0" + SS}
}
if(SS==0 && MM>0){
SS = 60
MM = MM - 1
if(MM < 10){MM = "0" + MM}
}
}
$(".time span").html(MM + ":" + SS + ":" + MS)
}
s = setInterval("showTime()",100)
function start1(){
i = i + 0.6
count = count + 1
if(count==300){
count = 0
clearInterval(t1)
t2 = setInterval("start2()",100)
}
$(".pie1").css("-o-transform","rotate(" + i + "deg)")
$(".pie1").css("-moz-transform","rotate(" + i + "deg)")
$(".pie1").css("-webkit-transform","rotate(" + i + "deg)")
}
function start2(){
j = j + 0.6
count = count + 1
if(count==300){
count = 0
clearInterval(t2)
t1 = setInterval("start1()",100)
}
$(".pie2").css("-o-transform","rotate(" + j + "deg)")
$(".pie2").css("-moz-transform","rotate(" + j + "deg)")
$(".pie2").css("-webkit-transform","rotate(" + j + "deg)")
}
t1 = setInterval("start1()",100)
</script>
<input onclick="window.open('view-source:' + window.location.href)" type="button" value="查看源代码" style="position:absolute right:0 top:0 width:80px height:30px">
</body>
</html>
直接复制代码，创建html文件，然后复制进去，就可以看到效果了。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）