<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>考勤管理</title>

    <style>

        .round-button {

			background-color: #4CAF50;

			border: none;

			color: white;

			text-align: center;

			text-decoration: none;

			display: inline-block;

			font-size: 16px;

			width: 100px;

			height: 100px;

			line-height: 100px;

			border-radius: 50%;

			cursor: pointer;

		}

    </style>

</head>

<body>

    <button id="checkInButton" class="round-button">

        <span id="timeDisplay"></span>

    </button>

    <script>

	function getNowTime () {

	  let now = new Date();

	  let year = now.getFullYear(); //获取完整的年份(4位,1970-????)

	  let month = now.getMonth() + 1; //获取当前月份(0-11,0代表1月)

	  let today = now.getDate(); //获取当前日(1-31)

	  let hour = now.getHours(); //获取当前小时数(0-23)

	  let minute = now.getMinutes(); //获取当前分钟数(0-59)

	  let second = now.getSeconds(); //获取当前秒数(0-59)

	  let nowTime = ''

	  nowTime = fillZero(hour) + ':' + fillZero(minute) + ':' + fillZero(second)

	  return nowTime

	};

	function fillZero (str) {

	  var realNum;

	  if (str < 10) {

		realNum = '0' + str;

	  } else {

		realNum = str;

	  }

	  return realNum;

	}

	console.log(getNowTime())

	// 2021-10-27 18:17:46

    function updateTime() {

		const now = new Date();

		const hours = now.getHours();

		const timeDisplay = document.getElementById('timeDisplay');

		if (hours >= 9 && hours < 18) {

			timeDisplay.textContent = '上班打卡';

		} else {

			timeDisplay.textContent = '下班打卡';

		}

		timeDisplay.textContent = timeDisplay.textContent+getNowTime ();

	}

	function showAlert() {

		alert('打卡成功');

	}

	document.getElementById('checkInButton').addEventListener('click', showAlert);

	updateTime();

	setInterval(updateTime, 1000);

    </script>

</body>

</html>

使用html+css+js实现一个仿钉钉打卡按钮的更多相关文章

  1. HTML+CSS+JS制作一个黑灰色简约时钟

    HTML+CSS+JS制作一个黑灰色简约时钟 1. 效果图: 2. 特点:这次借鉴了网络上的代码,利用JS动态创建元素,减少html语句的数量,也便于与vue.react等语言进行结合. 3. 代码实 ...

  2. HTML+CSS+JS制作一个灰白色简约时钟

    HTML+CSS+JS制作一个灰白色简约时钟 1. 效果图: 2. 特点:这次借鉴了网络上的代码,利用JS动态创建元素,减少html语句的数量,也便于与vue.react等语言进行结合. 3. 代码实 ...

  3. html+css+js实现一个简易日历

    0.效果预览 只实现了日历最基础的功能,当前日期红色显示,可通过上方的左右按钮查看上一月或下一月的日期. 1.HTML部分 1 <body> 2 <div id="cldF ...

  4. 用html+css+js实现一个无限级树形控件

    https://blog.csdn.net/cc_fys/article/details/81284638 树形菜单示例: <!DOCTYPE html> <head> < ...

  5. HTML/CSS+JS制作一个高考倒计时页面

    2020-07-09更新 修复倒计时归零后出现负数的bug 自动切换至下一年日期 ##效果展示 前言 在B站上找视频学习的,勉强搞出来了,写下此篇文章作为笔记,也希望有更多感兴趣的人能够有所收获. ( ...

  6. html+css+js实现科学计算器

    代码地址如下:http://www.demodashi.com/demo/13751.html 项目描述 纯html+css+js实现一个科学计算器,支持平方开方指数对数等基本函数,支持键盘输入,有简 ...

  7. 一个小公司的前端笔试HTML CSS JS

    网上有这套题的答案,版本也很多,我做了很多参考.本文就当个小笔记,可能有错误,还望指正~ 第1章  Html篇 1. 你做的网页在哪些浏览器测试过?这些浏览器的内核分别是什么? 浏览器类型 内核 Fi ...

  8. 利用前端三大件（html+css+js）开发一个简单的“todolist”项目

    一.介绍 todolist,即待办事项.在windows android ios上参考微软家出的那个To-Do应用,大概就是那样的.我这个更简单,功能只有“待办” “已完成”两项,并且是在浏览器打开的 ...

  9. css,js文件后面加一个版本号

    由于前几天,更新了项目,更新的文件有js文件,今天客人截图过来,我发现修改之后的效果没有显示出来,我回复说清理浏览器缓存.到了晚上,客人找老板,说还没有处理到這个,说客人不懂這个.所以想到之前自己为了 ...

  10. JavaWeb(HTML +css+js+Servlet....)

    注意 1.不要把函数命名为add(),不然容易和自带的冲突报错 2.是createElement 不要把create中的e写掉了 3.记得是getElementsByTaxName和getElemen ...

随机推荐

  1. redis-持久化-RDB-AOF.png

  2. 百度网盘(百度云)SVIP超级会员共享账号每日更新（2023.12.11）

    一.百度网盘SVIP超级会员共享账号 可能很多人不懂这个共享账号是什么意思,小编在这里给大家做一下解答. 我们多知道百度网盘很大的用处就是类似U盘,不同的人把文件上传到百度网盘,别人可以直接下载,避免 ...

  3. [转帖]彻底搞明白 GB2312、GBK 和 GB18030

    https://zhuanlan.zhihu.com/p/453675608 日常工作的过程中,关于字符编码的问题经常让人头疼不已,这篇文章就来捋一捋关于 GB2312.GBK.GB18030 相关的 ...

  4. [转帖]Nginx中if语句中的判断条件

    https://www.cnblogs.com/songxingzhu/p/6382007.html 一.if语句中的判断条件(nginx) 1.正则表达式匹配: ==:等值比较; ~:与指定正则表达 ...

  5. kafka的学习之一_带SASL鉴权的集群安装与启动

    kafka的学习之一_带SASL鉴权的集群安装与启动 背景 想开始一段新的里程. 可能会比现在累, 可能会需要更多的学习和努力. kafka可能就是其中之一. 自己之前总是畏缩不前. 不想面对很多压力 ...

  6. 【转帖】ARM 虚拟化技术简介

    一. 虚拟化技术二. 虚拟化技术的比较2.1 全虚拟化和二进制重写(Pure virtualization and binary rewriting)2.2 半虚拟化( Para-virtualiza ...

  7. [转帖]ebpf 月报 - 2023 年 1 月

    https://segmentfault.com/a/1190000043355631 本刊物旨在为中文用户提供及时.深入.有态度的 ebpf 资讯. 如果你吃了鸡蛋觉得好吃,还想认识下蛋的母鸡,欢迎 ...

  8. [转帖]从DDR到DDR4，内存核心频率基本上就没太大的进步!

    https://zhuanlan.zhihu.com/p/84194049 从2001年DDR内存面世以来发展到2019年的今天,已经走过了DDR.DDR2.DDR3.DDR4四个大的规格时代了(DD ...

  9. [转帖]深入理解Redis的scan命令

    熟悉Redis的人都知道,它是单线程的.因此在使用一些时间复杂度为O(N)的命令时要非常谨慎.可能一不小心就会阻塞进程,导致Redis出现卡顿. 有时,我们需要针对符合条件的一部分命令进行操作,比如删 ...

  10. [转帖]Native Memory Tracking 详解（3）:追踪区域分析(二)

    https://www.modb.pro/db/539804 上篇文章 Native Memory Tracking 详解(2):追踪区域分析(一) 中,分享了NMT追踪区域的部分内存类型--Java ...