How to implement counter and clock function code in html
The content of this article is about how to implement the function code of counter and clock in HTML. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
In many web pages, we will see counters and clocks, so how can we implement this function ourselves?
Let’s talk about the counter first. The logical function of the counter is very simple, that is, the second hand increments by one every second, and it advances by one every time it reaches 60. The code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div></div>
<script>
var index = 0;
var i=0;
/**
* 对时间进行预先处理，逢60进一
*/
function counter(){
second = index;
minute=i;
index++;
if(second==60){
second=0;
i++;
index=0;
}
if(second<10){
second = "0"+second;
}
if(minute<10){
minute="0"+minute;
}
return time = minute +":"+second;
}
/**
* 将获得的时间插入到div的区域
*/
function show(){
var time = counter();
document.getElementsByTagName("div")[0].innerHTML=time;
}
/**
* 每秒钟获得一次时间，实现计数功能
*/
function set(){
setInterval("show()",1000);
}
show();
set();
</script>
</body>
</html>In this way, a simple counter is completed.
Code for clock function:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
/**
* 向Date类中添加获取当前时间的方法
*/
Date.prototype.currentTime = function(){
var year = this.getFullYear();
var month = this.getMonth()+1;
var day = this.getDate();
var week = this.getDay();
week = "星期"+"日一二三四五六".charAt(week);
month = month<10 ? "0"+month : month;
day = day < 10 ? "0"+day : day;
var hour = this.getHours();
var second = this.getSeconds();
var minute = this.getMinutes();
hour = hour<10 ? "0"+hour : hour;
second = second < 10 ? "0"+second : second;
minute = minute < 10 ? "0"+minute : minute;
return year+"-"+month+"-"+day+" "+week+" "+hour+":"+minute+":"+second;
}
function showTime(){
var time = new Date().currentTime();
document.getElementById("show").innerHTML = time;
}
function setTime(){
showTime();
setInterval("showTime()",1000);
}
window.onload = function(){
setTime();
}
</script>
</head>
<body>
<span id="show"></span>
</body>
</html>In this way, the clock is complete!
Related recommendations:
How to use a timer to implement the countdown function in js
The clock effect implemented by jQuery css (compatible with all browser)_jquery
The above is the detailed content of How to implement counter and clock function code in html. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1655
14
1413
52
1306
25
1252
29
1226
24
Clock app missing in iPhone: How to fix it
May 03, 2024 pm 09:19 PM
Is the clock app missing from your phone? The date and time will still appear on your iPhone's status bar. However, without the Clock app, you won’t be able to use world clock, stopwatch, alarm clock, and many other features. Therefore, fixing missing clock app should be at the top of your to-do list. These solutions can help you resolve this issue. Fix 1 – Place the Clock App If you mistakenly removed the Clock app from your home screen, you can put the Clock app back in its place. Step 1 – Unlock your iPhone and start swiping to the left until you reach the App Library page. Step 2 – Next, search for “clock” in the search box. Step 3 – When you see “Clock” below in the search results, press and hold it and
How to use multiple timers on iPhone with iOS 17
Jun 21, 2023 am 08:18 AM
What are multi-timers on iOS17? In iOS17, Apple now offers users the ability to set multiple timers at once on their iPhone. This is a welcome change, one that many have been waiting for for years. The Clock app, which before iOS 16 only allowed users to set one timer at a time, can now be used to activate any number of timers, making it ideal for completing multiple tasks at once. You can set any number of timers in the timer screen. Once the timer is started, all active timers will appear as "Live Activity" notifications on the lock screen and Notification Center. From here, you can view the remaining time until the timer is off, pause, or stop the timer without opening the Clock app. when you are on the clock
iOS 17: How to change iPhone clock style in standby mode
Sep 10, 2023 pm 09:21 PM
Standby is a lock screen mode that activates when the iPhone is plugged into the charger and oriented in horizontal (or landscape) orientation. It consists of three different screens, one of which is displayed full screen time. Read on to learn how to change the style of your clock. StandBy's third screen displays times and dates in various themes that you can swipe vertically. Some themes also display additional information, such as temperature or next alarm. If you hold down any clock, you can switch between different themes, including Digital, Analog, World, Solar, and Floating. Float displays the time in large bubble numbers in customizable colors, Solar has a more standard font with a sun flare design in different colors, and World displays the world by highlighting
![How to turn off alarms on iPhone [2023]](https://img.php.cn/upload/article/000/465/014/169259550735100.png?x-oss-process=image/resize,m_fill,h_207,w_330)
How to turn off alarms on iPhone [2023]
Aug 21, 2023 pm 01:25 PM
Since the advent of smartphones, they have undoubtedly replaced alarm clocks. If you own an iPhone, you can use the Clock app to easily set as many alarms for multiple occasions throughout the day. The app lets you configure the alarm time, the tone, how often it repeats, and whether you want to delay them using the Snooze option. If you want to turn off the alarm you have set, the following post should help you disable and delete regular alarms and wake-up alarms on your iPhone. How to Turn Off a Regular Alarm on iPhone By default, when you add an alarm on the Clock app or ask Siri to add an alarm for you, you're actually creating a regular alarm. You can create as many alarm clocks on your iPhone as you like and put them
How to customize standby color in iOS 17
Sep 23, 2023 pm 12:53 PM
Apple offers a new lock screen mode in iOS 17 called Standby Mode, which activates when your iPhone is plugged into a charger (wired or wireless) and placed on a stand in landscape orientation. This mode will show more information at a glance than the standard lock screen by showing the clock, weather data, calendar, and some widgets. After enabling this feature in settings, your iPhone will automatically enter standby mode when placed in landscape orientation while charging. How to change standby colors in iOS 17 Standby mode offers a set of three pages (Widgets, Photos, and Clock) that you can switch back and forth by swiping on the screen. Of these pages, only the Clock screen lets you customize the colors displayed on the screen so you can
What should I do if my win10 computer clock is always inaccurate? Several ways to adjust the win10 computer time
Mar 27, 2024 pm 05:10 PM
1. First click on the Start menu and select the Settings button in the Start menu. 2. After opening, select time and language settings. 3. Change it to automatically set the time. 4. You can also turn off the automatic time setting and choose the time you want to change. Method 2: 1. Open the [Other Date, Time and Regional Settings] option. 2. Select [Set time and date]. 3. Select [Internet Time] and open [Change Settings Options]. 4. Check [Synchronize with Internet Time Server (S)], click [Update Now], and then click OK.
Implementing distributed counters using Redis
May 11, 2023 am 08:06 AM
What is a distributed counter? In a distributed system, multiple nodes need to update and read a common state, and counters are one of the most widely used states. In layman's terms, a counter is a variable whose value is incremented or decremented by 1 every time it is accessed. It is an indicator used to track the progress of a certain system. Distributed counters refer to the operation and management of counters in a distributed environment. Why use Redis to implement distributed counters? With the popularity of distributed computing, many detailed issues in distributed systems have also
How to implement distributed counters using Redis
Nov 07, 2023 am 09:02 AM
Redis is a high-performance cache database that is widely used in web applications. Among them, a common scenario is to use Redis to implement distributed counters. In this article, we will introduce how to implement distributed counters using Redis and provide specific code examples. 1. What is a distributed counter? A distributed counter is a shared resource used for counting, which is characterized by being accessed by multiple clients at the same time. In a traditional stand-alone environment, counters can be implemented through simple variables or files. But in a distributed ring
