`
just4you
  • 浏览: 65632 次
社区版块
存档分类
最新评论

备忘:显示时间的JS

阅读更多
无聊的五一做无聊的事。
<html>
<head>
<title> 显示年月日还有时间 </title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script>
function date(){
	//arguments JS自带的变量
	this.length = arguments.length;
	for(var  i= 0; i < this.length; i ++){
		this[i] = date.arguments[i];
	}
}

function displaytime(){	
	var d  = new Date();
	var h = d.getHours();
	var m = d.getMinutes();
	var s = d.getSeconds();
	//无聊,所以把时间分的细一点,看着比较专业:)
	//0-2 午夜 2-5 凌晨 5-9 早上 9-12 上午 12-14 中午 14-18 下午 18-24 晚上	
	var ampm = "上午";
	if (h >= 0 && h < 2) ampm = "午夜";
	if (h >= 2 && h < 5) ampm = "凌晨";
	if (h >= 5 && h < 9) ampm = "早上";
	if (h >= 9 && h < 12) ampm = "上午";
	if (h >= 12 && h < 14) ampm = "中午";
	if (h >= 14 && h < 18) ampm = "下午";
	if (h >= 18) ampm = "晚上";
	//12小时制
	if (h >12) h -= 12;
	//补0
	if (m < 10) m = "0" + m;
	//补0
	if (s < 10) s = "0" + s;
	var time = ampm + h + ":" + m + ":" + s;
	//年月日和星期
	var day  = new date("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
	var ymd = d.getYear() + "年" + (d.getMonth() + 1) + "月" + d.getDate() + "日" +  day[d.getDay()];
	//取得显示位置
	var tiemarea = document.getElementById("timearea");
	timearea.innerHTML = ymd + "  "  + time;

	setTimeout("displaytime()",1000);
}
//setInterval("displaytime()",1000);
//上面的setInterval作用同setTimeout,使用setTimeout的话需要在body处onload="displaytime();"
//5.21修改:用setInterval的话,在页面下载完JS后便会执行,可此时<div id="timeare"/>还没有被载入,getElementById("timearea")会找不到对象,所以还是用setTimeout()和onload吧。
//在onload时调用setInterval()应该也可以,不过没有试用
</script>
<style type="text/css">
#timearea{
	font-size:14px;
	color:red;
	font-weight:bold;
}
</style>
</head>
<body onload="displaytime();">
<div id="timearea">time</div>
</body>
</html>
分享到:
评论

相关推荐

    备忘:jquery的一些实例

    Dialogs.js可能包含实现对话框效果的代码,这些对话框通常用于显示警告、确认信息或者弹出窗口。 基于以上信息,我们可以讨论以下jQuery的相关知识点: 1. **选择器**:jQuery的核心是其强大的CSS选择器,使得...

    集成闹钟及备忘录功能的js日历

    【集成闹钟及备忘录功能的js日历】是一个基于JavaScript实现的多功能日历组件,它将传统的日历视图与闹钟和备忘录功能相结合,为用户提供了一个便捷的时间管理和提醒工具。这个组件特别适合于网页应用,能够帮助用户...

    HTML网页助手,包括JS万年历、闹钟、备忘录 常用查询.rar

    用户可以设置提醒时间,JavaScript将在指定时间触发提醒事件,显示通知或者播放声音。这涉及到JavaScript事件处理和时间管理。 3. **备忘录**:备忘录功能通常涉及到HTML表单用于输入数据,JavaScript处理表单提交...

    jQuery日历表设置日期备忘录代码

    在这个例子中,我们只是简单地在控制台打印信息并弹出一个警告框显示备忘录。在实际应用中,你可能需要将这些数据保存到服务器或者使用浏览器的localStorage或sessionStorage来保存。 为了使日历功能更加完善,你还...

    微信小程序推荐demo:备忘录:适用1028版本.rar

    备忘录应用可能涉及到微信小程序提供的诸多API,如数据存储(`wx.setStorageSync`、`wx.getStorageSync`)、网络请求(`wx.request`)、日期时间处理(`Date`对象)等。例如,备忘录的创建和读取功能会用到本地存储...

    原生JS代码制作带记事备忘功能的双月份显示效果的日历

    在本项目中,我们将探讨如何使用原生JavaScript(不依赖任何外部库)创建一个具有记事备忘功能的双月视图日历。这个日历不仅能够显示当前和接下来的月份,还允许用户添加、编辑和删除备忘录,提供了一个实用的交互式...

    微信小程序项目实例——备忘录

    开发者可以利用微信小程序的wx.requestAnimationFrame或setTimeout来设定提醒时间,并结合wx.showModal或wx.showToast等方法显示提醒通知。此外,微信小程序还支持获取系统权限,如提醒权限,确保应用能够正常发送...

    微信小程序开发-备忘录案例源码.zip

    4. index.js:首页的逻辑文件,编写JavaScript代码处理业务逻辑和数据。 5. index.json:首页的局部配置文件,可覆盖app.json的部分配置。 在备忘录案例中,主要涉及以下几个知识点: 1. 数据绑定:WXML与JS之间的...

    jquery+bootstrap 实现简单备忘录

    例如,我们可以利用Bootstrap的模态框(Modal)作为提醒窗口,显示用户的备忘内容;使用输入框(Input Groups)和按钮(Buttons)创建添加和编辑备忘的表单。 HTML5是现代网页开发的标准,其特性如本地存储...

    超强的日历控件,修改下可做备忘录,

    在网页应用或桌面软件中,日历控件是必不可少的元素,尤其对于那些需要时间管理功能如备忘录、日程规划的应用。"超强的日历控件,修改下可做备忘录"这个标题揭示了该资源可能是一个强大且可定制的日历插件,经过简单...

    .NET的Calendar控件+AJAX打造简单版日历备忘录

    在.NET框架中,Calendar控件是用于展示日期和时间选择的一种常见组件,它允许用户方便地选择日期并进行交互。本项目将深入探讨如何利用.NET的Calendar控件、JavaScript和AJAX技术,来构建一个简单版的日历备忘录应用...

    运用jsp实现万年历包含简易万年历、带阴历的万年历和带有备忘录的万年历

    这些库提供了将公历转换为农历的方法,通过调用这些方法,我们可以在生成的日历中同时显示公历和农历日期。 带有备忘录功能的万年历则需要数据库支持来存储用户的备忘录。可以使用关系型数据库如MySQL,或者NoSQL...

    微信小程序源码-小工具类:备忘录.rar

    列表可能使用wx:for循环渲染,每个备忘项包含标题、内容、创建时间等信息。 5. 事件处理: 在微信小程序中,通过绑定事件处理函数来响应用户的交互,比如点击事件。在备忘录应用中,用户可能需要点击新建按钮来...

    备忘录.zip

    3. **页面组件**:在备忘录小程序中,常见的组件可能包括输入框(input)用于用户输入备忘内容,日期选择器(picker)用于设置提醒时间,列表(list)用于显示多条备忘记录,以及按钮(button)进行操作交互。...

    微信小程序课程设计-备忘录.zip

    它由WXML(Weixin Markup Language)和WXSS(Weixin Style Sheet)负责视图层的渲染,JS(JavaScript)文件处理业务逻辑,JSON配置文件定义页面或全局的配置。在这个项目中,"todolist-master"可能代表项目的主目录...

    微信小程序开发-工具类-备忘录案例源码.zip

    3. **数据绑定与事件处理**:WXML中的数据绑定机制使得界面上的元素可以动态显示后台数据,而JavaScript文件中会定义事件处理器,如点击添加、删除按钮时触发的操作。 4. **状态管理与数据持久化**:在JavaScript...

    微信小程序 备忘录 (源码).rar

    3. **时间格式化**:显示备忘录创建或修改的时间,可能需要用到日期时间处理函数。 4. **网络请求**:如果需要同步云端数据,可能会涉及API接口的调用,如登录验证、数据同步等。 学习这个源码可以帮助我们了解微信...

    备忘录

    4. 搜索备忘:提供搜索框,输入关键词后,JavaScript遍历所有备忘,只显示包含关键词的条目。 5. 时间戳和排序:备忘可能带有创建或修改的时间戳,可以用JavaScript的`Date`对象处理。用户可能还需要按时间顺序查看...

    微信小程序事件倒计时,备忘录小程序ComingEvent-develop.zip

    - 倒计时渲染:通过监听时间变化,不断更新界面显示的倒计时数值,这通常通过setInterval函数实现。 - UI展示:在WXML中,结合WXSS样式,动态展示倒计时的数值。 4. 备忘录功能实现: - 数据存储:利用微信小程序的...

Global site tag (gtag.js) - Google Analytics