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 ...
随机推荐
- 力扣693(java)-交替位二进制数(简单)
题目: 给定一个正整数,检查它的二进制表示是否总是 0.1 交替出现:换句话说,就是二进制表示中相邻两位的数字永不相同. 示例 1: 输入:n = 5输出:true解释:5 的二进制表示是:101示例 ...
- 深入浅出讲解MSE Nacos 2.0新特性
简介: 随着云原生时代的到来,微服务已经成为应用架构的主流,Nacos也凭借简单易用.稳定可靠.性能卓越的核心竞争力成为国内微服务领域首选的注册中心和配置中心:Nacos2.0更是把性能做到极致,让业 ...
- 基于MaxCompute SQL 的半结构化数据处理实践
简介: MaxCompute作为企业级数据仓库服务,集中存储和管理企业数据资产.面向数据应用处理和分析数据,将数据转换为业务洞察.通过与阿里云内.外部服务灵活组合,可构建丰富的数据应用.全托管的数据 ...
- WPF 探索任务管理器的进程分组逻辑
在看到 Win10 或 Win11 的 Task Manager 任务管理器时,不知大家是否有一个疑问,在 进程 标签里的应用进程是如何分组的.为什么有些组能包含很多个不同的进程,有些只能包含一个.本 ...
- LabView之MQTT协议使用
一.MQTT概述 MQTT协议是一种消息列队传输协议,采用订阅.发布机制,订阅者只接收自己已经订阅的数据,非订阅数据则不接收,既保证了必要的数据的交换,又避免了无效数据造成的储存与处理.因此在工业物联 ...
- 检索增强生成RAG-书生浦语大模型实战营学习笔记3&大语言模型8
大语言模型学习-8.检索增强生成RAG 书生浦语大模型实战营学习笔记3 本文主要涉及检索增强生成相关基础知识,也包括第二期实战营的第3课的内容 动机 当今大语言模型存在幻觉现象,即大模型会无意义或不忠 ...
- Linux下Nginx 配置前后端接口
一.编辑nginx.conf配置文件命令 ## /usr/local/nginx/ nginx的安装路径 vim /usr/local/nginx/conf/nginx.conf 二.后端接口配置信息 ...
- 2019年最新前端面试题,js程序设计题
都说机会是留给有准备的人的. 一年之计在于春,面对众多的前端技术,需要时刻充电自己. 我现在整理一些前端js面试程序题. 1.判断一个字符串中出现最多的字符,并计算出现的次数? 2.用css伪类实现下 ...
- fastposter v2.8.3 发布 电商海报生成器
fastposter v2.8.3 发布 电商海报生成器 fastposter海报生成器,电商海报编辑器,电商海报设计器,fast快速生成海报 海报制作 海报开发.贰维海报,图片海报,分享海报贰维码推 ...
- 【AnaTraf 分享】什么是 AnaTraf?为什么设计 AnaTraf?
网络流量分析与 AnaTraf "2013年,网络流量分析技术(NTA, Network Traffic Analysis)的概念被首次提出,在2016年逐渐兴起.2017年,NTA被Gar ...