javascript用js简单的实现电子时钟_4、编写程序,实现电子时钟效果,要求每隔1秒获取一次当前时间,并提供一个按钮控制-程序员宅基地

技术标签: javascript  

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <!-- 给div一个简单样式 -->

    <style>

        div{

            width: 600px;

            height: 80px;

            background: black;

            color: white;

            font-size: 20px;

            text-align: center;

            line-height: 80px;

        }

    </style>

</head>

<body>

    <div></div>



 

    <script>

        // @getTime 获取时间数据对象 

        // @return  返回值为object  年 月 日 星期  时 分 秒 

        // 封装一个简单的时间函数  没有参数时获取当地时间  有参数时获取参数时间

        function getTime(time){

            // 未添加参数时  time的值为 undefined

            if(time === undefined){

                // 获取当地时间

                time = new Date()

            }else{

                // 获取自定义时间

                time = new Date(time)

            }

            // 获取年份

            var year = time.getFullYear();

            // 获取月份

            var month = time.getMonth() + 1;

            //获取天

            var day = time.getDate();

            // 获取具体的星期

            var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];

            var week = arr[time.getDay()];

            // 获取小时

            var hours = time.getHours();

            // 此处是一个前导补零操作 根据个人要求可写可不写  以下相同

            hours = hours < 10 ? '0' + hours : hours;

            // 获取分钟

            var minutes = time.getMinutes();

            minutes = minutes < 10 ? '0' + minutes : minutes;

            // 获取秒

            var second = time.getSeconds();

            second = second < 10 ? '0' + second : second;

            

            return {year,month,day,week,hours,minutes,second};

        }

        // 时间对象函数封装完成后

        // 调用封装函数  获取时间对象  

        // 并将我们封装的时间对象写入获取的div标签中

        var object = getTime();

        var oDiv = document.querySelector('div');

        oDiv.innerHTML = `当前时间是${object.year}年${object.month}月${object.day}日,${object.week} ${object.hours}:${object.minutes}:${object.second}`;

        // 设定时间函数,对以上程序  每一秒执行一次  

        // 从而达到更新时间的效果

        setInterval(function(){

        var object = getTime();

        var oDiv = document.querySelector('div');

        oDiv.innerHTML = `当前时间是${object.year}年${object.month}月${object.day}日,${object.week} ${object.hours}:${object.minutes}:${object.second}`;

        },1000)


 

        // 到此简单电子时钟实现

        // @码上成功~   一天一个简单小案例  祝大家代码越敲越顺

    </script>

</body>

</html>

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_43502384/article/details/119462874

智能推荐

arm-linux-androideabi-readelf_mac arm-linux-androideabi-readelf-程序员宅基地

文章浏览阅读1.9k次。使用arm-linux-androideabi-readelf读取信息:arm-linux-androideabi-readelfUsage: readelf elf-file(s) Display information about the contents of ELF format files Options are: -a --all Equi_mac arm-linux-androideabi-readelf

使用模板方法 java实现二维码生成 并进行二维码白边的裁剪_裁剪二维码的白边-程序员宅基地

文章浏览阅读1.1k次。java 模板方法 实现二维码生成 并进行二维码白边自定义的裁剪:由于自己最近在学设计模式,就想着如何能运用到自己工作的项目中。找了半天,想起自己之前写的一段关于生成二维码图片的代码。后面由于同事的需求不同,他们在里面添加了一下其它逻辑的代码。现在感觉这段代码已经不太好被扩展维护了。于是就用选择了设计模式中的模板方法重新进行设计。package **;import java.awt.Re..._裁剪二维码的白边

IntelliJ IDEA创建maven web项目-程序员宅基地

文章浏览阅读608次。IntelliJ IDEA创建maven web项目不妨先了解下Maven 项目是什么什么是maven项目?简单来说,就是maven工具构建的项目就是maven项目。maven是一个跨平台的项目管理软件。为什么要用maven构建项目?当你的项目很大,当你需要模块化拆分,部署,当你的jar包乱的跟粥似的,开发人员使用jar冲突等等问题出现时……你用maven就是合适的,但前...

中文短文本分类实例十二-HAN(Hierarchical Attention Networks for Document Classification)_中文短文本模型-程序员宅基地

文章浏览阅读3.1k次,点赞2次,收藏10次。一.概述HAN(Hierarchical Attention Networks for Document Classification),层次化注意力机制等,是Zichao Yang等2016年提出的一种新型文本分类模型。它主要使用词(字)语级别,和句子级别的注意力机制Attention,构建文本特征表示,层次化文本(即字、词、句子),十分符合人类直觉,也是近年来图像、NLP等..._中文短文本模型

SQL直接操作excel表(查询/导入/插入)-程序员宅基地

文章浏览阅读619次。--配置权限 exec sp_configure 'show advanced options',1reconfigureexec sp_configure 'Ad Hoc Distributed Queries',1reconfigureexec sp_configure 'xp_cmdshell',1reconfigurego

Airtest工具安装教程-自用_安装airtesttool-程序员宅基地

文章浏览阅读2.4k次。Airtest工具安装教程最近需要获取某些手机APP的输入下拉框词,所以需要控制手机,并获取信息。这里记录一下安装流程,以防以后忘记。步骤1. 安装JDK因为之前安装别的包(hanlp), 所以已经安装过JDK了。2. 安装SDK我下载http://tools.android-studio.org/index.php/sdk下载好了,到安装目录,运行SDK Manager.exe勾选 Android SDK Platform-tools,点右下角的install。注意需要翻墙。最后_安装airtesttool

随便推点

关于神经网络中的网络训练过程中的验证集validation_data的认识-程序员宅基地

文章浏览阅读3w次,点赞8次,收藏60次。validation_data中包含了 幅数字图像,这些图像和训练数据集中的 幅图像以及测试数据集中的 幅都不相同。我们会使用 validation_data 来防止过匹配。我们会使用和上面应用在 test_data 的策略。我们每个回合都计算在 validation_data 上的分类准确度。一旦分类准确度已经饱和,就停止训练。这个策略被称为 提前停止(Early stopping)。当然,实际..._validation_data

Java答题技巧(一)-程序员宅基地

文章浏览阅读128次。答题技巧第一章 Java编程基础1,方法是一种定义了某种具体抽象的运算。利用具有属性和行为的类,java实现了抽象。行为有抽象的操作来定义。2,对象是类的实例。对象根据实现抽象的类定义来创建。所以创建对象的那些抽象的具体实现。3,对象通常是通过new运算符创建的。引用变量的声明创建一个变量,而不管是否向该变量赋值。4,实例成员是一个字段或一个实...

在 Internet Explorer 5.5 中创建可编辑的 Web 页-程序员宅基地

文章浏览阅读78次。现在,您可以直接将 Microsoft(R) Internet Explorer 复杂的 HTML 编辑功能合并到 Web 页中!Microsoft 的 HTML 编辑器是对 Internet Explorer 中 HTML 分析和展现引擎的内置扩展。从 Internet Explorer 4.0 开始,MSHTML 编辑器已经为主机应用程序提供了开发基于 HTML 的文本编辑器和 Web 创作应..._internet explore能制作网页吗

Oracle 10g 11c 12c的自动统计任务问题_oracle 12c gather_stats_job-程序员宅基地

文章浏览阅读555次。先来看下oracle 10g中的自动统计任务的问题。从Oracle Database 10g开始,Oracle在建库后就默认创建了一个名为GATHER_STATS_JOB的定时任务,用于自动收集CBO的统计信息。这个自动任务默认情况下在工作日晚上10:00-6:00和周末全天开启。调用DBMS_STATS.GATHER_DATABASE_STATS_JOB_PROC收集统计信息。该过程首先检测统计信息缺失和陈旧的对象。然后确定优先级,再开始进行统计信息。可以通过以下查询这个JOB的运行情况:se._oracle 12c gather_stats_job

libsvm 多分类遇到的问题_weka libsvm分类器的c和g-程序员宅基地

文章浏览阅读2k次。现在已经完全正确的调用了libsvm,我所处理的问题是利用libsvm进行文本分类1 首先利用CHI进行特征提取2 利用TFIDF进行权重提取3 把文章组织成libsvm可以识别的格式4 利用上面的三个步骤,就可以把数据传入libsvm进行训练,但是训练之前,还要进行参数调优,得到最好的c和g5 参数调优的过程就是利用 python grid._weka libsvm分类器的c和g

JSON与cJSON_json 结束符-程序员宅基地

文章浏览阅读691次。该文主要记录是JSON的基本概念以及对应的cJSON API。一、什么是JSON ?详细的介绍见 https://www.json.org/ ,可以看到, JSON 可分为两类,一类是object ,一类是array。1.1 object引用官网的图,object 的定义为以'{'为起始符,'}'为结束符, 中间包含以','为间隔符的数个键-值对的集合,当然也可为空。1.2..._json 结束符