js+html+css实现简单电子时钟

本文实例为大家分享了js+html+css实现简单电子时钟的具体代码，供大家参考，具体内容如下

最终结果：

HTML部分

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>2.1简单电子时钟的设计与实现</title>
        <link rel="stylesheet" type="text/css" href="css/clock.css"/>
    </head>
    <body onload="getCurrentTime()">
        <h3>简单电子时钟的设计与实现</h3>
        <hr >
        <!-- 电子时钟区域 -->
        <div id="clock">
            <div class="box1" id="h"></div>
            <div class="box2">:</div>
            <div class="box1" id="m"></div>
            <div class="box2">:</div>
            <div class="box1" id="s"></div>
        </div>
    </body>
</html>

css部分

/* 电子时钟的总体样式设置 */
#clock{
    width:800px;
    font-size: 80px;
    font-weight: bold;
    color: #008B8B;
    text-align: center;
    margin: 20px;
}
/* 时分秒数字区域的样式设置 */
.box1{
    margin-right: 10px;
    width: 100px;
    height: 100px;
    line-height: 100px;
    float: left;
    border: gray 1px solid;
}
/* 冒号区域的样式设置 */
.box2{
    width: 30px;
    float: left;
    margin-right: 10px;
}

js部分

——使用外链时不需加<script>标签，不使用外链则直接写在<body>标签内

<script>
            //获取显示小时的区域框对象
            var hour=document.getElementById('h');
            //获取显示分钟的区域框对象
            var minute=document.getElementById('m');
            //获取显示秒的区域框对象
            var second=document.getElementById('s');
            
            //获取当前时间
            function getCurrentTime(){
                var date=new Date();
                var h=date.getHours();
                var m=date.getMinutes();
                var s=date.getSeconds();
                
                if(h<10) h='0'+h;//确保0-9时也显示成两位数
                if(m<10) m='0'+m;//确保0-9分钟也显示成两位数
                if(s<10) s='0'+s;//确保0-9秒也显示成两位数
                
                hour.innerHTML=h;
                minute.innerHTML=m;
                second.innerHTML=s;
            }
            //每秒更新一次时间
            setInterval('getCurrentTime()',1000);
</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 使用Javascript在HTML中显示实时时间

    本文实例为大家分享了用Javascript在HTML中显示实时时间的具体代码,供大家参考,具体内容如下 方法如下: 1. 在script中建立方法time:2. 创建新的Date对象date,并通过使用Date的内置方法给year.month等赋值:3. 通过连接符号将各个时间连接起来:4. 使用document.getElementById(“time”).innerHTML将其显示到HTML主页中:5. 使用setInterval设置动态更新时间,即实时时间: 注意: (1)获取年份的方法前

  • JS加载解析Markdown文档过程详解

    网上有很多网站会通过.md文档来做页面内容,很好奇,这是怎么做的? 出于好奇,建了一个test.md文件: # Hello World! asdfa asd *斜体文本* **粗体文本** ***斜粗体文本*** 分隔线(如下) *** * * * **** - - - ----------- GOOGLE.COM ~~删除线~~ <u>下划线</u> 用浏览器打开之后,结果就被原封不动的输出来了,浏览器根本不会解析这玩意... 跟阮老师的blog相差好大啊~呵呵~还是太天真了!

  • 一文详解JavaScript 如何将 HTML 转成 Markdown

    一文详解JavaScript 如何将 HTML 转成 Markdown

    目录 npm script 参数配置 前言: 本篇带来:在 JavaScript 如何将 HTML 转成 Markdown?先收藏,总有一天要用到!! npm 我们主要是借助 Turndown这个库来实现的 npm 安装 npm i turndown es6 import 引入: import TurndownService from 'turndown' CommonJs require 引入: const TurndownService = require('turndown'); 接下来我

  • JavaScript markdown 编辑器实现双屏同步滚动

    JavaScript markdown 编辑器实现双屏同步滚动

    目录 前言 百分比滚动 双屏同时渲染占用面积大的元素 赋上一个索引 踩坑 前言 由于一直在使用 markdown 编辑器写技术文章,所以对于编写体验很敏感.我发现各大社区的 markdown 编辑器基本都有同步滚动功能.只不过有些做得好,有些做得马马虎虎.出于好奇,我就打算自己亲自实现一下这个功能. 思考了一段时间,最后想出来了三种方案: 百分比滚动 双屏同时渲染占用面积大的元素 每一行的元素都赋上一个索引,根据索引来精确同步每一行的滚动高度 百分比滚动 假设现在正在滚动 a 屏,那 a 屏的滚

  • JS+HTML实现经典游戏吃豆人

    JS+HTML实现经典游戏吃豆人

    目录 前言 HTML代码 JS代码 游戏截图 前言 很早就知道canvas,当时一直没应用到,最近闲来无事就顺便写写看.吃豆游戏可以说是我们80,90后共同的回忆录,小时候常常在学习机上玩,所以也就有了强烈的欲望去写.为了写这个游戏,看了很多吃豆人游戏的相关信息,包括游戏规则,历史,其它相关游戏设计.又去了各个小游戏平台玩了下,找些灵感!!!就连最简单的配色,也是反复斟酌几个小时确定的方案……哈哈,不容易啊代码分两部分,游戏引擎和游戏主程序,引擎用来类的定义,管理动画场景,事件定义等等……游戏主

  • Vuejs中使用markdown服务器端渲染的示例

    啊哈,又是来推荐一个 vuejs 的 package,miaolz123/vue-markdown. 对应的应用场景是:你想使用一个编辑器或者是在评论系统中支持 markdown.这个 package 的有点还是挺多了,比如默认就支持 emoji,这个就很完美啦!laravist 的新版就使用了 vue-markdown 来渲染评论. 安装 直接使用 npm 来安装: npm install --save vue-markdown 使用 也是很简单的,可以直接这样: import VueMark

  • nodejs+axios爬取html出现中文乱码并解决示例

    目录 一.乱码原因 二.解决办法 一.乱码原因 当使用 nodejs + axios 来爬取某个 url 对应的 html 时,出现中文乱码. 在 HTML 页面的 head 中没有设置 <meta charset="UTF-8"> ,而 html 页面默认是 GBK 的编码. 使用 axios 发送请求 responseEncoding 默认是 utf8,造成编码不一致,导致最后获取到的 html 内容出现中文乱码. 二.解决办法 以二进制流的形式获取 HTML 内容,再

  • js正则匹配markdown里的图片标签的实现

    js正则匹配markdown里的图片标签的实现

    其实前端后端需要将markdown文本转换为html文本都有相应的库,几句代码就ok,但有时我们又必须获取到markdown里的某个标签来进行相应的转换,有几种办法,可以从已经转换好的html文本里获取,还有的就是直接从markdown文本里获取,这里说的是第二种. 1. 一个markdown里只有一个图片的情况 const str = "asddsad![标题](url)asdasddasd"; //一段markdown文本,包含一个图片"![标题](url)"

  • JavaScript+Node.js写一款markdown解析器

    目录 1. 准备工作 2. 处理图片&超链接 3. 处理blockquote 4. 处理标题 5. 处理字体 6. 处理代码块 7. 处理列表 8. 处理表格 9. 调用方法 1. 准备工作 首先编写getHtml函数,传入markdown文本字符串,这里使用fs读取markdown文件内容,返回值是转换过后的字符串. const fs = require('fs'); const source = fs.readFileSync('./test.md', 'utf-8'); const get

  • js+html+css实现简单电子时钟

    js+html+css实现简单电子时钟

    本文实例为大家分享了js+html+css实现简单电子时钟的具体代码,供大家参考,具体内容如下 最终结果: HTML部分 <!DOCTYPE html> <html>     <head>         <meta charset="utf-8">         <title>2.1简单电子时钟的设计与实现</title>         <link rel="stylesheet"

  • 动态加载js、css的简单实现代码

    一.原生js: /** * 加载js和css文件 * @param jsonData.path 前缀路径 * @param jsonData.url 需要加载的js路径或css路径 * @param jsonData.type 需要加载的类型 js或css */ function loadWriteFiles(jsonData) { jsonData.path = jsonData.path != undefined ? jsonData.path : ""; if(jsonData.

  • js实现电子时钟功能

    js实现电子时钟功能

    电子时钟是网上常见的功能,在学习date对象和定时器功能时,来完成一个电子时钟的制作是不错的选择.学习本教程之前,读者需要具备html和css技能,同时需要有简单的javascript基础. 先准备一个html元素,用来放置时钟.新建一个div元素,它的id命名为clock,如下所示: <div id="clock" class="clock_con"></div><!--基础时钟元素--> 本实例电子时钟的格式设定为 (yyyy

  • js实现简单圆盘时钟

    js实现简单圆盘时钟

    本文实例为大家分享了js实现简单圆盘时钟的具体代码,供大家参考,具体内容如下 预览图: 代码: css: <style> .disc { position: relative; margin: 200px auto; width: 300px; height: 300px; border: 1px solid #000; border-radius: 50%; } .axis { position: absolute; top: 150px; left: 150px; transform: t

  • 原生js实现电子时钟

    原生js实现电子时钟

    本文实例为大家分享了js实现电子时钟的具体代码,供大家参考,具体内容如下 index.html <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta

  • JS+CSS实现简单滑动门(滑动菜单)效果

    JS+CSS实现简单滑动门(滑动菜单)效果

    本文实例讲述了JS+CSS实现简单滑动门的方法.分享给大家供大家参考.具体如下: 这是一款超简约设计的滑动门菜单,鼠标放到主菜单上,里面的内容会跟着变化,实际上本演示是一个范例,从代码中的注释你就能感觉到,每一步都有注释,对学习JavaScript和CSS都有帮助,也为你以后写出比这更漂亮.更实用的滑动门做铺垫. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-jdhd-menu-style-codes/ 具体代码如下: <!DOC

  • 一个简单的动态加载js和css的jquery代码

    一个简单的动态加载js和css的jquery代码,用于在生成页面时通过js函数加载一些共通的js和css文件. //how to use the function below: //$.include('file/ajaxa.js');$.include('file/ajaxa.css'); //or $.includePath = 'file/';$.include(['ajaxa.js','ajaxa.css']);(only if .js and .css files are in the

  • JS+CSS实现简单的二级下拉导航菜单效果

    JS+CSS实现简单的二级下拉导航菜单效果

    本文实例讲述了JS+CSS实现简单的二级下拉导航菜单效果.分享给大家供大家参考.具体如下: 这是一款CSS配合JavaScript实现二级下拉导航菜单,好像CSS要配合JS才能写出好效果来,本款菜单同样用到了JS,菜单目前支持两级,下拉导航是我们经常用的一种菜单形式,把这个修改一下你就能用了,结构挺简单,相信你会做好的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-2l-fade-down-menu-codes/

  • JS+CSS实现滚动数字时钟效果

    JS+CSS实现滚动数字时钟效果

    本篇内容我们用js配合css样式表来实现一个滚动时钟的动画效果,这个效果一般都是用在网页开场动画以及区域的时间显示中,非常好看,动画效果也很个性,我们先来看下运行后的效果: 下面就是这个滚动时钟动画的全部代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &

  • Python+Pyqt实现简单GUI电子时钟

    Python+Pyqt实现简单GUI电子时钟

    本文实例为大家分享了Python+Pyqt实现简单GUI电子时钟的具体代码,供大家参考,具体内容如下 突发奇想想用GUI做一个简单的电子时钟界面,利用pyqt模块也很方便,代码如下: from PyQt5.QtGui import * from PyQt5.QtCore import * from PyQt5.QtWidgets import QWidget,QApplication,QLCDNumber,QVBoxLayout,QMessageBox,QPushButton import sy

随机推荐