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

2024-11-27 05:57:42

本文实例为大家分享了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>

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

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

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

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

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

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

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

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

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

电子时钟是网上常见的功能,在学习date对象和定时器功能时,来完成一个电子时钟的制作是不错的选择.学习本教程之前,读者需要具备html和css技能,同时需要有简单的javascript基础. 先准备一个html元素,用来放置时钟.新建一个div元素,它的id命名为clock,如下所示: <div id="clock" class="clock_con"></div> 本实例电子时钟的格式设定为 (yyyy
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实现电子时钟的具体代码,供大家参考,具体内容如下 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实现简单滑动门的方法.分享给大家供大家参考.具体如下: 这是一款超简约设计的滑动门菜单,鼠标放到主菜单上,里面的内容会跟着变化,实际上本演示是一个范例,从代码中的注释你就能感觉到,每一步都有注释,对学习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实现简单的二级下拉导航菜单效果.分享给大家供大家参考.具体如下: 这是一款CSS配合JavaScript实现二级下拉导航菜单,好像CSS要配合JS才能写出好效果来,本款菜单同样用到了JS,菜单目前支持两级,下拉导航是我们经常用的一种菜单形式,把这个修改一下你就能用了,结构挺简单,相信你会做好的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-2l-fade-down-menu-codes/
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电子时钟的具体代码,供大家参考,具体内容如下突发奇想想用GUI做一个简单的电子时钟界面,利用pyqt模块也很方便,代码如下: from PyQt5.QtGui import * from PyQt5.QtCore import * from PyQt5.QtWidgets import QWidget,QApplication,QLCDNumber,QVBoxLayout,QMessageBox,QPushButton import sy

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

相关推荐

随机推荐