【小工具】获取当前时间

最新推荐文章于 2023-05-12 10:18:46 发布
最新推荐文章于 2023-05-12 10:18:46 发布
阅读量285 收藏
点赞数
分类专栏： 小工具
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zuncle/article/details/54965157
版权

这里写图片描述


【小工具】获取当前时间

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="time"></div>
    <script type="text/javascript">
        function time(){
            var oDate = new Date();
            var year = oDate.getFullYear();
            var mounth = oDate.getMonth()+1;
            var day = oDate.getDate();
            var hours = oDate.getHours();
            var minute = oDate.getMinutes();
            var seconds = oDate.getSeconds();
            var time = null;
            var week = new Array(7);
            week[0]='星期天';
            week[1]='星期一';
            week[2]='星期二';
            week[3]='星期三';
            week[4]='星期四';
            week[5]='星期五';
            week[6]='星期六';
            var weeks = week[oDate.getDay()];
            var data = document.getElementById('time');
            data.innerHTML =year+'年'+mounth+'月'+day+'日'+'  '+weeks+'  '+fillZero(hours)+':'+fillZero(minute)+':'+fillZero(seconds);
            function fillZero(n){
                if(n<10){
                    return '0'+n
                }
                else{
                    return ''+n
                }
            }

        }
        time();
        setInterval(time,1000)
    </script>
</body>
</html>

cavas时钟

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="canvas" style="width:500px;">当前浏览器不支持canvas，请更换浏览器后再试</canvas>

<script>
    var digit=
    [
        [
            [0,0,1,1,1,0,0],
            [0,1,1,0,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,0,1,1,0],
            [0,0,1,1,1,0,0]
        ],//0
        [
            [0,0,0,1,1,0,0],
            [0,1,1,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [1,1,1,1,1,1,1]
        ],//1
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,0,0,0],
            [0,1,1,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,0,0,0,1,1],
            [1,1,1,1,1,1,1]
        ],//2
        [
            [1,1,1,1,1,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,0,0,1,1,0],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//3
        [
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,1,0],
            [0,0,1,1,1,1,0],
            [0,1,1,0,1,1,0],
            [1,1,0,0,1,1,0],
            [1,1,1,1,1,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,1,1]
        ],//4
        [
            [1,1,1,1,1,1,1],
            [1,1,0,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,1,1,1,1,0],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//5
        [
            [0,0,0,0,1,1,0],
            [0,0,1,1,0,0,0],
            [0,1,1,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,0,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//6
        [
            [1,1,1,1,1,1,1],
            [1,1,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0]
        ],//7
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//8
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,1,1,0,0,0,0]
        ],//9
        [
            [0,0,0,0,0,0,0],
            [0,0,1,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,0,0,0,0,0],
            [0,0,0,0,0,0,0],
            [0,0,1,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,0,0,0,0,0]
        ]//:
    ];
    var canvas = document.getElementById('canvas');
    if(canvas.getContext){
        var cxt = canvas.getContext('2d');
    }
    //声明canvas的宽高
    var H = 100,W = 700;
    canvas.height = H;
    canvas.width = W;
    //存储时间数据
    var data = [];
    //存储运动的小球
    var balls = [];
    //设置粒子半径
    var R = canvas.height/20-1;
    (function(){
        var temp = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date());
        //存储时间数字，由十位小时、个位小时、冒号、十位分钟、个位分钟、冒号、十位秒钟、个位秒钟这7个数字组成
        data.push(temp[1],temp[2],10,temp[3],temp[4],10,temp[5],temp[6]);   
    })();

    /*生成点阵数字*/
    function renderDigit(index,num){
        for(var i = 0; i < digit[num].length; i++){
            for(var j = 0; j < digit[num][i].length; j++){
                if(digit[num][i][j] == 1){
                    cxt.beginPath();
                    cxt.arc(14*(R+2)*index + j*2*(R+1)+(R+1),i*2*(R+1)+(R+1),R,0,2*Math.PI);
                    cxt.closePath();
                    cxt.fill();
                }
            }
        }       
    }

    /*更新时钟*/
    function updateDigitTime(){
        var changeNumArray = [];
        var temp = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date());
        var NewData = [];
        NewData.push(temp[1],temp[2],10,temp[3],temp[4],10,temp[5],temp[6]);
        for(var i = data.length-1; i >=0 ; i--){
            //时间发生变化 
            if(NewData[i] !== data[i]){
                //将变化的数字值和在data数组中的索引存储在changeNumArray数组中
                changeNumArray.push(i+'_'+(Number(data[i])+1)%10);
            }
        }
        //增加小球
        for(var i = 0; i< changeNumArray.length; i++){
            addBalls.apply(this,changeNumArray[i].split('_'));
        }   
        data = NewData.concat();
    }

    /*更新小球状态*/
    function updateBalls(){
        for(var i = 0; i < balls.length; i++){
            balls[i].stepY += balls[i].disY;
            balls[i].x += balls[i].stepX;
            balls[i].y += balls[i].stepY;   
            if(balls[i].x > W + R || balls[i].y > H + R){
                balls.splice(i,1);
                i--;
            }               
        }
    }

    /*增加要运动的小球*/
    function addBalls(index,num){
        var numArray = [1,2,3];
        var colorArray =  ["#3BE","#09C","#A6C","#93C","#9C0","#690","#FB3","#F80","#F44","#C00"];
        for(var i = 0; i < digit[num].length; i++){
            for(var j = 0; j < digit[num][i].length; j++){
                if(digit[num][i][j] == 1){
                    var ball = {
                        x:14*(R+2)*index + j*2*(R+1)+(R+1),
                        y:i*2*(R+1)+(R+1),
                        stepX:Math.floor(Math.random() * 4 -2),
                        stepY:-2*numArray[Math.floor(Math.random()*numArray.length)],
                        color:colorArray[Math.floor(Math.random()*colorArray.length)],
                        disY:1
                    };
                    balls.push(ball);           
                }
            }
        }   
    }

    /*渲染*/
    function render(){
        //重置画布宽度，达到清空画布的效果
        canvas.height = 100;
        //渲染时钟
        for(var i = 0; i < data.length; i++){
            renderDigit(i,data[i]);
        }       
        //渲染小球
        for(var i = 0; i < balls.length; i++){
            cxt.beginPath();
            cxt.arc(balls[i].x,balls[i].y,R,0,2*Math.PI);
            cxt.fillStyle = balls[i].color;
            cxt.closePath();
            cxt.fill();             
        }
    }

    clearInterval(oTimer);
    var oTimer = setInterval(function(){
        //更新时钟
        updateDigitTime();
        //更新小球状态
        updateBalls();
        //渲染
        render();
    },50);
</script>

</body>
</html>
邹大叔
关注
专栏目录
微信小程序 - 获取当前日期时间（函数封装）
王佳斌
01-29 2264
效果图 前言 摘自微信小程序 demo 程序中 utils.js 方法。 普通 new Date() 出来的日期时间，并不是我们想要的格式，所以要进行格式整理。 解决方案 打开 utils.js 文件（随意），复制以下代码： /** * 获取当前时间 * @description 自定义日期分钟秒数 * @param {Object} date - newData()对象 * @return String */ function formatTime(date) { // 年月日
获取系统当前时间
qq_43024669的博客
01-24 3374
获取系统当前时间 public Text textCurentTime; // Use this for initialization void Start () { } // Update is called once per frame void Update () { //获取系统当前时间 DateTime NowTime = DateTime.Now.ToLocalTim...
c语言获取本机当前时间
04-19
不需要资源分，编写着玩的，有需要的可以下载，在其他的地方可能会有用的
得当前时间的工具类
愿我如星君如月 ... 夜夜流光相皎洁 ...
09-09 389
Date date=new Date();DateFormat format=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");String time=format.format(date); 不同的方法介绍如下： 1、通过Date类来获取当前时间。 Date day=new Date() SimpleDateFormat df = new Simp...
获取时间工具类
helpluozhao123的博客
09-28 116
/ 获取第二天截至时间23:59:59:999。// 获取当天23:59:59:999。
求本周，上周，下周所有日期时间
crazy_Sxk的博客
07-18 529
//求本周，周一，时间 public static Date getThisWeekMonday(Date date) { Calendar cal = Calendar.getInstance(); cal.setTime(date); // 获得当前日期是一个星期的第几天 int dayWeek = cal.get(Calendar.DAY_OF_WEEK); if (1 ...
获取时间区间所有日期的小工具
weixin_44486632的博客
12-12 264
根据两个日期 获取日期区间的所有日期和星期 假设我们要获取2019-10-10 到 2019-12-12之间的所有日期,直接上代码先 //给Date对象的原型加一个时间格式化为 YYYY-MM-DD的函数 Date.prototype.format=function(){ var y=this.getFullYear(); //获取年份 var m=this.getMonth()+1>=...
获取当前时间
12-18
自己写的小程序，感觉特别好用，将当前时间置剪贴板。。。。。。。 解压密码：lemisky
springboot 获取当前日期_SpringBoot - 实用工具类库common-util使用详解2（时间工具类：DateTimeUtil）...
weixin_32820101的博客
02-04 9147
二、日期时间工具类(DateTimeUtil)1，基本介绍DateTimeUtil是对时间转换操作的统一封装，首先其内部定义一些常用的时间格式表达式，具体如下：public static final String DATE_FORMAT_MINITE = "yyyy-MM-dd HH:mm";public static final String DATE_FORMAT_DAY = "yyyy-MM...
java 使用Date类获取系统的当前时间
06-21
// 创建Date对象，自动获取当前时间 Date currentDate = new Date(); // 使用默认的本地化格式打印日期和时间 System.out.println("当前时间：" + currentDate); // 使用自定义格式打印日期和时间 String ...
系统时间获取软件
10-10
系统时间获取更改
获取时间日期工具类Utils
Huerfano的博客
07-31 326
DateUtils package com.al.utils; import java.text.SimpleDateFormat; import java.util.*; /** * 日期操作工具类 */ public class DateUtils { /** * 日期转换- String -> Date * * @param dateSt...
获取日期工具类
qq_37337633的博客
04-23 180
import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.ArrayList; import java.util.Calendar; import java.util.Date; import java.util.List; /** * 时间工具类：获取上周一周时间及上月时间 *...
Java日期工具类，获取昨天、本周、本月、上月等各种时间段的方法归结【过期】
最新发布
qwerasdctds的博客
05-12 1242
java日期工具类
java 日期格式化工具类
csdn565973850的博客
07-18 1174
java 日期工具类代码如下 代码如下 package com.dongao.project.utils; import com.ruoyi.common.utils.StringUtils; import org.apache.commons.lang3.time.DateFormatUtils; import java.lang.management.ManagementFactory; import java.text.ParseException; import java.text.Simple
Java DateUtil 时间工具类
qisuanli0846的博客
03-29 2940
public class DateUtil { public static String parseStr(String str) { String sDate = ""; SimpleDateFormat sdf1 = new SimpleDateFormat ("EEE MMM dd HH:mm:ss Z yyyy", Locale.UK); try { Date date = sdf1.parse (str); .
日期工具类
weixin_34082854的博客
05-22 173
时间日期格式工具类,整理收集,整体应该比较齐全了. 1. 使用列表 1.当前时间相关 getNowString : 获取当前日期 String 类型,默认返回格式2019-05-17 18:48:24,可自定义返回样式 getNowDate :获取当前日期 Date 类型 getNowMills :获取当前时间的时间戳(毫秒) getNowY :获取当...
js获取系统当前时间的工具
贪吃小明的博客
03-05 456
js获取系统当前时间的工具 <!-- 渲染时间 --> <script type="text/javascript"> function getTime() { var date = new Date(); var time = date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.ge...
工具篇——DateUtil（用于获取时间）
热门推荐
一个灵活的胖子MrWang
09-25 1万+
写代码的四点： 1.明确需求。要做什么？ 2.分析思路。要怎么做？（1,2,3……） 3.确定步骤。每一个思路要用到哪些语句、方法和对象。 4.代码实现。用具体的语言代码将思路实现出来。 学习新技术的四点： 1.该技术是什么？ 2.该技术有什么特点？（使用需注意的方面） 3.该技术怎么使用？（写Demo） ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值