<!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>Show Time</title>

</head>

<body onload="showTime()">

   <script type="text/javascript">

   	//javascript实现页面无刷新让时间走动

    function showTime()

    { 

		var date = new Date();  //获取时间对象

		var year = date.getFullYear(); //获取年

		var month = date.getMonth()+1;//获取月份。获取的月份比真实的月份少一个月。所以这里得+1 

		var day = date.getDate();  //获取日

		var week = date.getDay();//返回0--6。当中0表示星期天，1--6代表星期一到星期六

		var weekStr="未知"; 

		var hours = date.getHours(); //获取时（24小时制）

		var minutes = date.getMinutes();  //获取分

        var seconds = date.getSeconds();  //获取秒

		var milliseconds = date.getMilliseconds();//获得毫秒 

		//处理星期的显示

		switch(week){

				case 1:

					weekStr="一 "

				break;

				case 2:

					weekStr="二 "

				break;

				case 3:

					weekStr="三 "

				break;

				case 4:

					weekStr="四 "

				break;

				case 5:

					weekStr="五 "

				break;

				case 6:

					weekStr="六 "

				break;

				default:

				  weekStr="日 ";

			}			

		document.getElementById("timeMsg").innerHTML = 

        year + "年" + month + "月" + day + "日 "+"  星期"+weekStr+hours + ":" + minutes + ":" + seconds + ":" + milliseconds; 

    }

      //setInterval动作的作用是每隔一定时间就调用函数，方法或对象

	 setInterval("showTime()", 1);//设置每隔1豪秒调用一下上面的方法

    </script>

    <div id="timeMsg" style="font-size: 36px;color:#00C"></div>

</html>

JavaScript实现页面无刷新让时间走动的更多相关文章

  1. 页面无刷新Upload File

    页面无刷新Upload File. 利用jquery.form.js的ajaxForm提交文件. 具体参考以下代码: 前台html <%@ Page Language="C#" ...

  2. HTTP与AJAX深入揭秘，不使用AJAX实现页面无刷新

    AJAX的原理是什么? 实际上就是发起HTTP请求,既然就是发起HTTP请求,那只要我们能够实现发起HTTP请求就可以在不使用AJAX的情况下实现相同的效果. 在前端有好多方式可以发起HTTP请求,比 ...

  3. JQuery 实现页面无刷新

    对于JQuery实现页面无刷新的效果,即:应用这个JQuery这个组件,可以实现在页面上加载数据库中的数据信息,但是并没有给用户页面刷新的感觉,这样既可以有效的进行数据交互,也可以不妨碍用户的其他操作 ...

  4. 自己动手用Javascript写一个无刷新分页控件

    .NET技术交流群:337901356 ,欢迎您的加入! 对 于一个用户体验好的网站来说,无刷新技术是很重要的,无刷新,顾名思义,就是局部刷新数据,有用过Asp.net Web Form技术开发网页的 ...

  5. Asp.net页面无刷新请求实现

    Asp.net页面无刷新请求实现 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind=&qu ...

  6. 浅谈页面无刷新技术ajax

    现在一般网站都是用ajax来实现页面无刷新操作的. 什么是无刷新:ajax可以实现页面与后台的数据交互,用户完全感觉不出页面有任何的刷新,这就是AJAX的无刷新. ajax方法实现: 可以对ajax进 ...

  7. Ajax下载文件(页面无刷新)

    说明:Ajax是无法实现文件传输的,本文只是模拟了Ajax不刷新页面就可以请求并返回数据的效果.实质上还是通过提交form表单来返回文件流的输出. 分步实现逻辑: ajax请求服务器,访问数据库,根据 ...

  8. 基于jQuery的ajax系列之用FormData实现页面无刷新上传

    接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方 ...

  9. PHP + JavaScript + Ajax 实现无刷新页面加载效果

    数据源工厂 Json生成方式1 Json生成方式2 数据搬运工 数据加工师 转换类型 加工展示 结果展示 初始页面 点击按钮之后 总结 今天这个实验的思路就是实现一个无刷新的页面加载效果.具体的思路是 ...

随机推荐

  1. Jmeter接口测试---webservices

    Jmeter与LR相比来说,测试webservices接口要简单很多. 下面说下具体的操作流程: 1.创建一个线程组 2.创建一个soap/xml请求 3.填写要进行测试webservice的请求内容 ...

  2. Navicat Premium 12 破解方法

    基本安装下一步下一步,破解方法参考:地址

  3. Shell script之How to write

    Write shell script: 1) Editor like vi or mcedi 2) Set execute permission for your script chmod  perm ...

  4. 【转】非常好的Java反射例子

    转自 http://www.douban.com/note/306848299/ 原文: 1.Java反射的概念 反射含义:可以获取正在运行的Java对象. 2.Java反射的功能 1)可以判断运行时 ...

  5. 【百度编辑器ueditor】工具，如何去掉百度编辑器 ueditor 元素路径、字数统计等

    去掉如下截图: 在百度编辑器 ueditor 根目录下: ueditor.config.js 文件中 搜索并将参数elementPathEnabled设置成false即可 常用功能开关如下: ,ele ...

  6. ThinkPHP---layer插件

    [概论] (1)layer是基于jquery开发的一款美化弹框的插件,主要用于弹框效果的交互.但其他功能和组件也日益完善 官网:http://layer.layui.com 在线手册:http://w ...

  7. JAVA基础——集合类汇总

    一.集合与数组 数组(可以存储基本数据类型)是用来存现对象的一种容器,但是数组的长度固定,不适合在对象数量未知的情况下使用. 集合(只能存储对象,对象类型可以不一样)的长度可变,可在多数情况下使用. ...

  8. iOS多媒体框架介绍

    媒体层 媒体层包含图形技术.音频技术和视频技术,这些技术相互结合就可为移动设备带来最好的多媒体体验,更重要的是,它们让创建外观音效俱佳的应用程序变得更加容易.您可以使用iOS的高级框架更快速地创建高级 ...

  9. xmpp之配置Xcode（1）

    介绍 ios上的XMPPFramework你能够在Xcode/iPhoneXMPP 目录找到,它只是实现了XMPP的一小部分功能. 下面主要介绍在开发XMPPFramework ios应用之前的配置工 ...

  10. (1) GoJS入门

    GoJS的官方下载,若下载失败,可尝试通过我的个人网盘分享下载. GoJS是一款功能强大,快速且轻量级的流程图控件,可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图,且极大地 ...