1、HTML部分

<div id="div1">显示当前时间!</div>

2、css部分

#div1 {
width: 700px;
height: 50px;
border: 1px solid #000;
margin: 100px auto;
text-align: center;
font-size: 20px;
line-height: 50px;
}

3、JavaScript部分

function showTime(){
var d = new Date();
var year = d.getFullYear();
var month = d.getMonth() + 1;//0~11
var date = d.getDate(); var week = d.getDate();//0~6 0是周末 week = numOfChinese(week); var hour = doubleNum(d.getHours());
var min = doubleNum(d.getMinutes());
var sec = doubleNum(d.getSeconds()); var str = year + "年" + month + "月" + date + "日 星期" + week + " " + hour + ":" + min + ":" + sec;
return str;
} setInterval(function(){
var timer = document.getElementById("div1");
timer.innerHTML = showTime();
},1000);

JavaScript实时显示当前时间的更多相关文章

  1. JavaScript实时显示当前时间的例子

    用javascript代码在当前页面中实时显示当前时间.代码如下: <html> <head> <title>JavaScript 实时显示当前时间-www.jbx ...

  2. Vue页面上实时显示当前时间,每秒更新

    有时候我们需要在页面上添加一个类似时钟的东西来实时显示当前时间,这个时候我们可以利用定时器来完成这个功能 <div id="app"> {{date}} </di ...

  3. Qt 实时显示系统时间

    前言 我们用一个label控件来实时显示系统时间,用到 QTimer 和 QDateTime 这个两个类. 正题 头文件: #ifndef MAINWINDOW_H #define MAINWINDO ...

  4. vue实时显示当前时间且转化为“yyyy-MM-dd hh:mm:ss”格式

    在实际运用中时间格式"yyyy-MM-dd hh:mm:ss"用的最多,如果需要其他格式可根据需求自行修改,下面直接上代码: 引入相应的js即可运行 <!DOCTYPE ht ...

  5. Android学习总结——实时显示系统时间

    我们都知道System.currentTimeMillis()可以获取系统当前的时间,这里要实时显示就可以开启一个线程,然后通过handler发消息,来实时的更新TextView上显示的系统时间.具体 ...

  6. Javascript 客户端实时显示服务器时间

    <!doctype html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

  7. js实时显示系统时间

    刚刚在做后台页面最上面要动态显示时间刚写了这个代码 将这段代码加入<head></head> <!--时间显示代码 --><script>functio ...

  8. 用JS实现实时显示系统时间

    废话我就不多说了,直接上图和代码了 效果图: 代码视图: 下面为大家附上代码,复制即可用: <!DOCTYPE html> <html lang="en"> ...

  9. php随笔6-thinkphp OA系统 JS 实时显示当前时间

    不多说,直入主题: JS. // JavaScript Document function showtime() { var today,hour,second,minute,year,month,d ...

随机推荐

  1. 微服务实战SpringCloud之Spring Cloud Feign替代HTTP Client

    简介 在项目中我们有时候需要调用第三方的API,微服务架构中这种情况则更是无法避免--各个微服务之间通信.比如一般的项目中,有时候我们会使用 HTTP Client 发送 HTTP 请求来进行调用,而 ...

  2. BootStrap-select插件动态添加option无法显示

    问题描述: 在使用bootstrap-select插件时出现下拉框无法显示动态追加的option,经过查看element元素发现,select标签已经append进去了所需的option选项,但是页面 ...

  3. element.ui 自定义样式问题

    方法有很多种 自定义类名 <el-button class="search_button" @click="search">查询</el-bu ...

  4. JS实现斐波那契数列的五种方式

    下面是五种实现斐波那契数列的方法 循环   function fibonacci(n){ var res1 = 1; var res2 = 1; var sum = res2; for(var i = ...

  5. Mybatis源码学习第六天(核心流程分析)之Executor分析(补充)

    补充上一章没有讲解的三个Executor执行器; 还是贴一下之前的代码吧;我发现其实有些分析注释还是写在代码里面比较好,方便大家理解,之前是我的疏忽,不好意思 @Override public < ...

  6. Pycharm安装opencv与 无法安装PIL以及安装Pillow之后依然报错的解决办法

    Pycharm 安装opencv pycharm里自带了很方便的安装第三方库的方法,不需要自己去下载opencv包再pip install 在pycharm的File/Settings/Project ...

  7. padding-top:100%解决高度塌陷问题

    <div class="img_box"> <img src="http://sms-shop.oss-cnbeijing.aliyuncs.com/$ ...

  8. Robotframework自动化6-基础关键字介绍3

    这一章节介绍一下断言时用到的关键字,断言是写测试用例的必备,没有断言的测试用例是没有灵魂的. 一:Should Be Equal  Should Be Equal 是用来判断实践结果和预期结果是否一致 ...

  9. display值的分类

    整体来讲,display的值可以分为6个大类,1个全局类,一共是7大类: 外部值 内部值 列表值 属性值 显示值 混合值 全局值 外部值,指的是这些值只会直接影响一个元素的外部表现,而不影响元素里面的 ...

  10. Java8学习小记

    转载自https://segmentfault.com/a/1190000006985405 2014年,Oracle发布了Java8新版本.对于Java来说,这显然是一个具有里程碑意义的版本.尤其是 ...