js 实现简易时钟效果
大江东去,浪淘尽,千古风流人物。故垒西边,人道是,三国周郎赤壁。乱石穿空,惊涛拍岸,卷起千堆雪。江山如画,一时多少豪杰。遥想公瑾当年,小乔初嫁了,雄姿英发。羽扇纶巾,谈笑间,樯橹灰飞烟灭。故国神游,多情应笑我,早生华发。人生如梦,一尊还酹江月。--来自奔跑的panda部落,panda每天与您一起进步
<div id="time"></div>
3 <script>
4 time();
5 setInterval(time,1000)
6 function time() {
7 var t = new Date();
8 var y = t.getFullYear(),
9 m = t.getMonth() + 1,
10 d = t.getDate(),
11 h = t.getHours(),
12 min = t.getMinutes(),
13 s = t.getSeconds();
14 if( y < 10 ){ y = '0' + y }
15 if( d < 10 ){ d = '0' + d }
16 if( h < 10 ){ h = '0' + h }
17 if( min < 10 ){ min = '0' + min }
18 if( s < 10 ){ s = '0' + s }
19 var full_time = y + '-' + m + '-' + d + ' ' + h + ':' + min + ':' + s;
20 document.getElementById('time').innerText = full_time;
21 }
22 </script>
js 实现简易时钟效果的更多相关文章
- 史上最简单的js+css3实现时钟效果
今天我看到百度搜索的时间那个效果不错,于是就产生了模仿一下的效果,不过为了节省时间,就随便布了下局,废话不多说,先看看效果吧,顺便把百度的效果也拿过来. 对比样子差了好多啊,但是基本功能都是实现了的, ...
- 通过Canvas + JS 实现简易时钟实战
最近通过各种渠道学习了下html5中的canvas元素,为了练练手就随手写了一个简易的时钟.时钟本身不复杂,没有使用图片进行美化,下面就与大家分享一下具体的代码: 这是最终实现的效果: 部分的启发点来 ...
- JS实现简单时钟效果
老师上课需要我们做一个时钟的小作业 ,我把它放在上面记录一下啦 表盘和时针我都是用的背景图的形式,然后绝对定位,通过调整left和top确定时针.分针.秒针的位置,transform-origin设置 ...
- canvas实现简易时钟效果
代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...
- js 分享一个 时钟效果
<style> *{ margin: 0; padding: 0; } #outLine{ ...
- 用js枚举实现简易菜单效果
用js枚举实现简易菜单效果,左侧显示菜单,右侧显示用户选择的菜单,一图胜千言,还是直接来张效果图吧: 以下是代码: <DOCTYPE html> <html> <head ...
- 基于canvas的原生JS时钟效果
概述 运用html5新增画布canvas技术,绘制时钟效果,无需引用任何插件,纯js. 详细 代码下载:http://www.demodashi.com/demo/11935.html 给大家介绍一个 ...
- 原生js简易日历效果实现
这里我们将用原生js实现简易的日历,原理和之前的原生js选项卡差不多,不过也有些区别: 首先html代码: <div class="container"> <di ...
- JS实现时钟效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 圆盘时钟效果 原生JS
圆盘时钟 旋转时钟 数字时钟 写在前面 仿荣耀手机时钟,设计的同款时钟效果 实现效果 实现原理 数字时钟 利用Date内置对象获取当下的时间,通过处理呈现在页面上 这一步获取时间是非常简单的,通过Da ...
随机推荐
- Hadoop HDFS 3.2的部署
之前写过HDFS 2.6的部署,最近项目中尝试使用最新的HDFS 3.2.1做离线存储,部署方式略有不同,所以这里再简单写一下,这里只涉及到存储因此不再配置yarn,只配置HDFS最基本的服务Name ...
- win11设置笔记本合盖不睡眠
win11设置笔记本合盖不睡眠 直接搜索控制面板,类型选择大图标,找到电源选项 点击进入电源选项,然后点击选择电源按钮的功能 然后就可以看到一个关闭盖子时,设置成不采取任何操作 然后就可以了
- 【笔记】go语言--Map
go语言--Map //基本结构,定义 m := map[string] string { "name" : "ccmouse",//这些是无序的,是hashm ...
- WPF 通过 WindowsAppSDK 使用 WinRT 的手写识别功能
本文告诉大家如何在基于 .NET 6 的 WPF 使用 WinRT 的手写识别功能 在开始之前需要先创建 WPF 项目,创建完成之后,可替换 csproj 项目文件为以下代码,用来安装初始化环境 &l ...
- WPF 解决 ObservableCollection 提示 Cannot change ObservableCollection during a CollectionChanged event 异常
本文告诉大家在使用 ObservableCollection 时,抛出 InvalidOperationException 异常,提示 Cannot change ObservableCollecti ...
- 2019-4-29-Roslyn-将这个文件放在你的项目文件夹,无论哪个控制台项目都会输出林德熙是逗比...
title author date CreateTime categories Roslyn 将这个文件放在你的项目文件夹,无论哪个控制台项目都会输出林德熙是逗比 lindexi 2019-4-29 ...
- Istio微服务入门---通过istio部署微服务实现灰度发布(15)
一.Istio简介 1.1 Istio介绍 官方文档:https://istio.io/docs/concepts/what-is-istio/ 中文官方文档:https://istio.io/zh/ ...
- RT-Thread 时钟管理
一.时钟节拍 任何操作系统都需要提供一个时钟节拍,以供系统处理所有和时间有关的事件,如线程的延时.线程的时间片轮转调度以及定时器超时等.时钟节拍是特定的周期性中断,这个中断可以看做是系统心跳,中断之间 ...
- 关于QQ群炸了的说明
ABAP 7.5学习群不幸被腾讯封了,想要聊天的群友可以加以下两个群, ABAP 7.5历史研究小组 728466742 ABAP 7.5 备份群 582240105
- Linux上OcenBase单机版部署及基本信息查询
OceanBase单机版部署可以通过在线和离线两种方式部署.在线部署可以通过yum源或者apt源部署,直接拉取官方源码即可.实际使用中,大部分环境连不了外网,本文介绍离线方式安装. 下载"O ...