`
流星剑
  • 浏览: 94636 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

时间效果

    博客分类:
  • js
阅读更多

在网页上显示系统当前时间或者,显示年月日时分秒,都可以用js实现;主要用到Date对象和window对象里面的setTimeout()方法.

<script type="text/javascript" language="javascript">
function show()
{
	var date=new Date();
	var month=date.getMonth();//月
	var year=date.getYear();//年
	var day=date.getDate();//天
	var week=date.getDay();//获取星期
	var now="";
	if(week=="0"){now="星期天"}
	if(week=="1"){now="星期一"}
	if(week=="2"){now="星期二"}
	if(week=="3"){now="星期三"}
	if(week=="4"){now="星期四"}
	if(week=="5"){now="星期五"}
	if(week=="6"){now="星期六"}
	var hour=date.getHours();//时
	var minute=date.getMinutes();//分
	var second=date.getSeconds();//秒
	var span=document.getElementById("date");
	span.innerHTML="现在时间是:"+year+"年"+(parseInt(month)+1).toString()+"月"+"<strong style=\"color:#f00;\">"+now+"</strong>"+day+"日"+hour+"时"+minute+"分"+second+"秒"
	
	var div=document.getElementById("time");
	div.innerHTML=date.toLocaleString();
	div.style.fontSize="30px";
	div.style.color="#fff";
	div.style.width="316px";
	div.style.backgroundColor="#f0f";
	div.style.fontWeight="bold";
	window.setTimeout(show,1000);//关键在这里
	
	//setInterval(show,1000);
	}
	window.onload=show;//加载页面时显示时间
</script>

 以下是html页面的代码:

<body>
显示时钟<br />
<span id="date">年月日</span>
<div id="time">系统当前时间</div>
</body>

 

分享到:
评论

相关推荐

    网页播放器源码(类似优酷土豆等视频网控制广告和时间效果)

    网页播放器源码(类似优酷土豆等视频网控制广告和时间效果),个人感觉不错,做视频站的朋友能用的上。

    js实现动态显示时间效果

    在网页开发中,动态显示时间效果是一个常见的需求,它可以让用户实时看到当前的时间,增强用户体验。本文将深入探讨如何使用JavaScript来实现动态显示时间的效果。 首先,我们需要创建一个HTML页面作为展示的容器。...

    js双色时间效果代码

    #### 一、JS双色时间效果概述 在Web开发中,为了增加用户体验并使页面更具吸引力,开发者常常会利用JavaScript(简称JS)来实现各种动态效果。本文介绍的一种名为“JS双色时间效果”的功能就是一个很好的例子。这种...

    css3实现3D时间轴效果

    在CSS3中,3D时间轴效果是一种富有视觉吸引力且能清晰展示项目进度或历史事件序列的设计技术。这种效果利用了CSS3的transform、perspective和伪元素等特性,为网页添加了深度和动态感。下面我们将深入探讨如何通过...

    iOS 时间线效果的组件.zip

    这个开源项目“iOS 时间线效果的组件”提供了一种实现方式,它基于UITableViewCell构建了一个简单的时间线视图。这个组件可以帮助开发者快速集成时间线功能,提升应用的用户体验。 时间线视图通常包含一系列沿着一...

    Android时间轴效果的实现

    在Android应用开发中,时间轴效果通常用于展示一系列事件或数据按照时间顺序排列的情况,比如新闻更新、社交媒体动态等。这种效果能为用户提供直观、易理解的信息浏览方式。本篇文章将详细探讨如何在Android中实现...

    跟随滚动条显示时间效果

    源码实现了可以支持跟随滚动条显示时间效果,源码ScrollBarPanelWithClock,ScrollBarPanelWithClock实现path右侧时间效果,跟随滚动条旁边显示时间,也可以使用在一下时间滚动的时候使用。

    CSS-实现椭圆环形跑道式炫酷时间轴特效效果.rar

    "CSS-实现椭圆环形跑道式炫酷时间轴特效效果"是一种创新且引人注目的设计技术,它将时间轴展示在一个动态的椭圆环形跑道上,为用户带来独特的交互体验。这种效果主要依赖于CSS(Cascading Style Sheets)的高级特性...

    Unity 中实现子弹时间效果-附件资源

    Unity 中实现子弹时间效果-附件资源

    ExpandableListView实现时间轴效果

    在Android应用开发中,创建一个具有时间轴效果的界面可以极大地提升用户体验,特别是在展示一系列按时间顺序排列的数据时。本文将深入探讨如何利用ExpandableListView控件实现这种效果。ExpandableListView是Android...

    java 时间效果

    onFocus="WdatePicker({isShowClear:false,readOnly:true})" /&gt; 请选择时间 &lt;/div&gt;

    Android时间轴(Timeline)效果的实现代码示例

    本示例将详细解释如何在Android应用中实现一个自定义的时间轴效果。 首先,我们需要创建一个自定义的布局来表示时间轴的样式。时间轴通常由三个主要部分组成:时间点、时间线和时间线上的内容。在XML布局文件中,...

    时间轴效果 html+css+js时间轴效果 仿百度经验时间轴效果

    在网页设计中,时间轴效果是一种常见的展示序列事件或历史进程的方式,它通过线性布局将各个事件点按时间顺序排列,使用户能够清晰地理解信息的演变过程。本资源提供了一个HTML、CSS和JavaScript实现的时间轴效果,...

    安卓实现翻转时间显示效果

    在Android平台上,实现翻转时间显示效果是一种独特的用户体验设计,常用于时钟或者计时器应用。这种效果通常通过动画来实现,使时间数字在更新时有一种翻转或旋转的视觉感受,使得用户界面更加生动有趣。下面我们将...

    黑客帝国的两种js效果

    2. **子弹时间效果**:电影中的“子弹时间”是指主角在极端慢动作中躲避子弹的场景,这一概念被引入到前端开发中,通常表现为用户交互时,某个区域的时间流动显著变慢,其他部分则保持正常速度。实现这一效果,首先...

    时间轴效果

    在IT行业中,时间轴效果是一种常见且重要的视觉呈现方式,特别是在网页设计、数据可视化和用户界面(UI)设计中。这种效果通常用于展示一系列按时间顺序排列的事件或步骤,帮助用户更好地理解和跟踪信息流。在Java...

    安卓时间轴时光轴相关-时间轴的实现效果Android的时间顶部往上推动的效果.rar

    本资源"安卓时间轴时光轴相关-时间轴的实现效果Android的时间顶部往上推动的效果.rar"提供了实现Android时间轴效果的示例代码。尽管由于文件数量限制,无法逐一验证所有代码,但我们可以深入探讨时间轴的实现原理和...

    android 时间轴效果Demo(ExpandableListView实现)

    时间轴效果是一种流行的设计模式,它能清晰地呈现一系列事件或步骤,使用户能够跟踪和理解信息的流程。本教程将详细介绍如何使用ExpandableListView组件来实现一个Android时间轴效果,并支持标题置顶功能。 首先,...

    UITableView实现时间轴效果

    本教程将深入探讨如何利用UITableView实现时间轴效果,这种效果常用于日志、消息记录或活动更新等场景,能够清晰地按照时间顺序展示信息。 首先,理解时间轴的基本构成。一个时间轴通常包含时间点(时间戳)和与之...

Global site tag (gtag.js) - Google Analytics