Electronic clock is a common function on the Internet. When learning date object and timer function, it is a good choice to complete the production of an electronic clock. Before learning this tutorial, you need to have html and css skills, as well as a simple javascript foundation.
Prepare an html element to place the clock. Create a new div element, whose id is named clock, as follows:
<div id="clock" class="clock_con"></div><!--Basic clock element-->
In this example, the format of the electronic clock is set to (yyyy MM DD HH: mm: SS). js is used to combine a simple clock string into the clock element.
This example encapsulates the clock function into the function, so create a createclock function first, and then write the specific code in createclock.
It is suggested that when a front-end function is completed, the specific operation of the function should be analyzed first. Then according to the specific operation, the method of realizing the function is divided into several steps, and the next step is to complete it step by step. Let's take a look at the steps needed to combine such a string of characters with js:
1 call the date object to get the local time of the computer
1.1 Call date object
1.2 get current year
1.3 get the current month. The month counts from 0, so you need to add 1 to get the correct month
1.4 get current date
1.5 get current hour
1.6 get minutes
1.7 acquire seconds
2. Format the acquired time data
2.1 add string 0 before single digit to conform to clock format
2.2 combine time data as string
3. Real time display of time in clock element
3.1 get the clock element
3.2 modify time in clock element
3.3 use timer to update time in real time
The specific code is as follows:
function fnCreatClock(){ //Declare time dependent variables var dLocal,nYear,nMonth,nDate,nHours,nMinutes,nSeconds; //1 Get computer local time function fnGetDate(){ //1.1 call date object dLocal = new Date(); //1.2 Get current year nYear = dLocal.getFullYear(); //1.3 Get the current month. The month counts from 0, so you need to add 1 to get the correct month nMonth = dLocal.getMonth() + 1; //1.4 Get current date nDate = dLocal.getDate(); //1.5 Get current hour nHours = dLocal.getHours(); //1.6 Get minutes nMinutes = dLocal.getMinutes(); //1.7 Get seconds nSeconds = dLocal.getSeconds(); } //2.1 Encapsulates a function that adds the string 0 before a single number, for example, 1 to 01 function fnToDouble(num){ //Declare a return result var sResult = ''; if(num<10){ //If the number is less than 10, it is a single number. You need to add the string 0 before it sResult = '0' + num; }else{ //Convert numbers above 10 to strings sResult = '' + num; } //Returns the formatted string return sResult; } function fnFormatDate(){ //2.2 The combined time data is a string. This example is mainly for beginners, so the simplest format is used here, that is, to use all data+No. connected return nYear + '-' + fnToDouble(nMonth) + '-' + fnToDouble(nDate) + ' ' + fnToDouble(nHours) + ':' + fnToDouble(nMinutes) + ':' + fnToDouble(nSeconds); } //3.1 Obtain clock element var eClock = document.getElementById('clock'); //Get time fnGetDate(); //3.2 modify clock Time in element eClock.innerHTML = fnFormatDate(); //Use timer to update time in real time setInterval(function(){ //3.3 Update time per second fnGetDate(); //3.3 modify clock Time in element eClock.innerHTML = fnFormatDate(); },1000); } fnCreatClock();
The effect is as shown in the figure:
Now the clock looks a little crude. You can also try to change the numbers into pictures, so the effect will be much better. Ignore the date part for the time part, and add the image effect for the time part. Let's see what html elements are needed first. The code is as follows:
<div id="imgClock" class="clock_container"><!--Picture clock element--> <div id="imgHours" class="img_box"> <span class="img_0"></span> <span class="img_0"></span> </div> <div class="img_point"></div> <div id="imgMinutes" class="img_box"> <span class="img_0"></span> <span class="img_0"></span> </div> <div class="img_point"></div> <div id="imgSeconds" class="img_box"> <span class="img_0"></span> <span class="img_0"></span> </div> </div>
You also need to prepare 10 pictures from 0-9. You can make digital pictures with similar effects by yourself. The css code can be written on its own, or the following code can be copied for use:
.clock_container{ margin-top:60px; font-size:0; text-align:center; } .clock_container div{ display:inline-block; } .clock_container .img_box span{ display:inline-block; width:80px; height:100px; margin:0 2px; border-radius:8px; background-color:#77a6b6; } .clock_container .img_0{ background:url(img/img_0.png) no-repeat; } .clock_container .img_1{ background:url(img/img_1.png) no-repeat; } .clock_container .img_2{ background:url(img/img_2.png) no-repeat; } .clock_container .img_3{ background:url(img/img_3.png) no-repeat; } .clock_container .img_4{ background:url(img/img_4.png) no-repeat; } .clock_container .img_5{ background:url(img/img_5.png) no-repeat; } .clock_container .img_6{ background:url(img/img_6.png) no-repeat; } .clock_container .img_7{ background:url(img/img_7.png) no-repeat; } .clock_container .img_8{ background:url(img/img_8.png) no-repeat; } .clock_container .img_9{ background:url(img/img_9.png) no-repeat; } .clock_container .img_point{ width:60px; height:100px; background:url(img/img_point.png) no-repeat center; }
As a rule, organize the steps before completing the function. Add another step here to complete the clock effect after image beautification in imgClock element. The steps are as follows:
4. In the imgClock element, use the picture as the background to modify the time in real time
4.1 obtain the time (imgHours), minute (imgMinutes) and second (imgSeconds) elements respectively
4.2 modify the class of hour, minute and second elements according to time to change the background style
4.3 update element background with timer
The modified code is as follows:
function fnCreatClock(){ //Declare time dependent variables var dLocal,nYear,nMonth,nDate,nHours,nMinutes,nSeconds; //1 Get computer local time function fnGetDate(){ //1.1 call date object dLocal = new Date(); //1.2 Get current year nYear = dLocal.getFullYear(); //1.3 Get the current month. The month counts from 0, so you need to add 1 to get the correct month nMonth = dLocal.getMonth() + 1; //1.4 Get current date nDate = dLocal.getDate(); //1.5 Get current hour nHours = dLocal.getHours(); //1.6 Get minutes nMinutes = dLocal.getMinutes(); //1.7 Get seconds nSeconds = dLocal.getSeconds(); } //2.1 Encapsulates a function that adds the string 0 before a single number, for example, 1 to 01 function fnToDouble(num){ //Declare a return result var sResult = ''; if(num<10){ //If the number is less than 10, it is a single number. You need to add the string 0 before it sResult = '0' + num; }else{ //Convert numbers above 10 to strings sResult = '' + num; } //Returns the formatted string return sResult; } //Get time fnGetDate(); //4.1 Get the hour element of the picture background var eImgHours = document.getElementById('imgHours'); //Get the first element of the hour var eHours1 = eImgHours.getElementsByTagName('span')[0]; //Get the second element of the hour var eHours2 = eImgHours.getElementsByTagName('span')[1]; //4.1 Get the minute element of the picture background var eImgMinutes = document.getElementById('imgMinutes'); //Get the first element of the minute var eMinutes1 = eImgMinutes.getElementsByTagName('span')[0]; //Get the second element of the minute var eMinutes2 = eImgMinutes.getElementsByTagName('span')[1]; //4.1 Get the second element of the picture background var eImgSeconds = document.getElementById('imgSeconds'); //Get the first element of the second var eSeconds1 = eImgSeconds.getElementsByTagName('span')[0]; //Get second element of second var eSeconds2 = eImgSeconds.getElementsByTagName('span')[1]; // 4.2 Modify the time, minute and second element's class，Used to change the background style function fnChangeImgBg(){ eHours1.className = 'img_' + fnGetImgNum(nHours,0); eHours2.className = 'img_' + fnGetImgNum(nHours,1); eMinutes1.className = 'img_' + fnGetImgNum(nMinutes,0); eMinutes2.className = 'img_' + fnGetImgNum(nMinutes,1); eSeconds1.className = 'img_' + fnGetImgNum(nSeconds,0); eSeconds2.className = 'img_' + fnGetImgNum(nSeconds,1); } //This function is used to calculate the number based on the current time function fnGetImgNum(num,bit){ //Declare a return result var nResult = 0; //Judge whether it is a bit or a ten bit, 0 stands for ten bit, 1 stands for one bit if(bit===0){ //Use Math.floor Can be rounded down, i.e. no matter 0.1 Or 0.9，All take the integer 0. This method is used to get ten bits of time nResult = Math.floor(num/10); }else{ //adopt fnToDouble Function to format the time double string, and then take the next character to get the bits+Number is used to convert to a number nResult = +fnToDouble(num).slice(1); } return nResult; } fnChangeImgBg(); //Use timer to update time in real time setInterval(function(){ //3.3 Update time per second fnGetDate(); fnChangeImgBg(); //4.3 Update element background with timer },1000); } fnCreatClock();
At this time, the effect will be more colorful than the individual text, as shown in the figure:
I want the effect to be more beautiful. Let the picture not change abruptly, but have a rolling animation. To achieve this effect, the picture needs to be changed into a 0-9 vertical arrangement chart, with the height of each number consistent with the height of the clock element. By changing the position of the element background picture, the rolling animation effect can be produced.
The html elements required for this effect are as follows:
<div id="animationClock" class="clock_container"><!--Animation clock element--> <div id="animationHours" class="animation_box"> <span></span> <span></span> </div> <div class="img_point"></div> <div id="animationMinutes" class="animation_box"> <span></span> <span></span> </div> <div class="img_point"></div> <div id="animationSeconds" class="animation_box"> <span></span> <span></span> </div> </div>
Add the same background image to each element in css, and the transition transition style needs to be added to produce the animation effect, as shown below:
.clock_container .animation_box span{ display:inline-block; width:80px; height:100px; margin:0 2px; border-radius:8px; background-color:#77a6b6; background-image:url(img/img_all.png); background-repeat:no-repeat; transition:.2s; }
Then change the position of the background image for each time element with time, that is, change the style of background repeat y. By convention, or first:
5. In the animationClock element, scroll the animation to show the real-time change of the clock
5.1 obtain the time (imgHours), minute (imgMinutes) and second (imgSeconds) elements respectively
5.2 modify the background picture position of hour, minute and second elements according to time
5.3 use timer to update element background picture position
The modified code is as follows:
function fnCreatClock(){ //Declare time dependent variables var dLocal,nYear,nMonth,nDate,nHours,nMinutes,nSeconds; //1 Get computer local time function fnGetDate(){ //1.1 call date object dLocal = new Date(); //1.2 Get current year nYear = dLocal.getFullYear(); //1.3 Get the current month. The month counts from 0, so you need to add 1 to get the correct month nMonth = dLocal.getMonth() + 1; //1.4 Get current date nDate = dLocal.getDate(); //1.5 Get current hour nHours = dLocal.getHours(); //1.6 Get minutes nMinutes = dLocal.getMinutes(); //1.7 Get seconds nSeconds = dLocal.getSeconds(); } //2.1 Encapsulates a function that adds the string 0 before a single number, for example, 1 to 01 function fnToDouble(num){ //Declare a return result var sResult = ''; if(num<10){ //If the number is less than 10, it is a single number. You need to add the string 0 before it sResult = '0' + num; }else{ //Convert numbers above 10 to strings sResult = '' + num; } //Returns the formatted string return sResult; } //Get time fnGetDate(); //This function is used to calculate the number based on the current time function fnGetImgNum(num,bit){ //Declare a return result var nResult = 0; //Judge whether it is a bit or a ten bit, 0 stands for ten bit, 1 stands for one bit if(bit===0){ //Use Math.floor Can be rounded down, i.e. no matter 0.1 Or 0.9，All take the integer 0. This method is used to get ten bits of time nResult = Math.floor(num/10); }else{ //adopt fnToDouble Function to format the time double string, and then take the next character to get the bits+Number is used to convert to a number nResult = +fnToDouble(num).slice(1); } return nResult; } //5.1 Get the hour element of the animation clock var eAnimationHours = document.getElementById('animationHours'); //Get the first element of the hour var eHours3 = eAnimationHours.getElementsByTagName('span')[0]; //Get the second element of the hour var eHours4 = eAnimationHours.getElementsByTagName('span')[1]; //5.1 Get the minute element of the animation clock var eAnimationMinutes = document.getElementById('animationMinutes'); //Get the first element of the minute var eMinutes3 = eAnimationMinutes.getElementsByTagName('span')[0]; //Get the second element of the minute var eMinutes4 = eAnimationMinutes.getElementsByTagName('span')[1]; //5.1 Get the second element of the animation clock var eAnimationSeconds = document.getElementById('animationSeconds'); //Get the first element of the second var eSeconds3 = eAnimationSeconds.getElementsByTagName('span')[0]; //Get second element of second var eSeconds4 = eAnimationSeconds.getElementsByTagName('span')[1]; // 5.2 Modify the background picture position of hour, minute and second elements according to time function fnAnimationBg(){ eHours3.style.backgroundPositionY = -fnGetImgNum(nHours,0) * 100 + 'px'; eHours4.style.backgroundPositionY = -fnGetImgNum(nHours,1) * 100 + 'px'; eMinutes3.style.backgroundPositionY = -fnGetImgNum(nMinutes,0) * 100 + 'px'; eMinutes4.style.backgroundPositionY = -fnGetImgNum(nMinutes,1) * 100 + 'px'; eSeconds3.style.backgroundPositionY = -fnGetImgNum(nSeconds,0) * 100 + 'px'; eSeconds4.style.backgroundPositionY = -fnGetImgNum(nSeconds,1) * 100 + 'px'; } fnAnimationBg(); //Use timer to update time in real time setInterval(function(){ //3.3 Update time per second fnGetDate(); //5.3 Update element background picture position with timer fnAnimationBg(); },1000); } fnCreatClock();