Tips for customizing the appearance of a timer using javascript and css

Check out this fiddle linked here: jsfiddle

First, have a look at the initial HTML code below. For the JavaScript part, refer to the fiddle:

<div id="test_time_left">Time Left :<b><span id="time_value" style="padding-left:5px;"></span> </b> </div>

I am trying to change the font color to red and make the whole timer blink only when it reaches 00:05:00. Currently, the second colon (after min:) is blinking from the beginning and only the minute value has the red font color. Can someone assist me in fixing the issues I've encountered in the fiddle and adjusting the functionality? Thank you in advance. Looking forward to your responses.

Answer №2

Are you searching for this information?

http://jsfiddle.net/RJdwh/10/

Function.prototype.Timer = function (interval, calls, onend) {
  var count = 0;
  var payloadFunction = this;
  var startTime = new Date();
  var callbackFunction = function () {
    return payloadFunction(startTime, count);
  };
  var endFunction = function () {
    if (onend) {
      onend(startTime, count, calls);
    }
  };
  var timerFunction =  function () {
    count++;
    if (count < calls && callbackFunction() != false) {
      window.setTimeout(timerFunction, interval);
    } else {
      endFunction();
    }
  };
  timerFunction();
};

function leadingzero (number) {
    return (number < 10) ? '0' + number : number;
}
function countdown (seconds, target) {
  var element = document.getElementById(target);
  var calculateAndShow = function () {
    if (seconds > 0) {
      var h = Math.floor(seconds / 3600);
      var m = Math.floor((seconds % 3600) / 60);
      var s = seconds % 60;
        if(seconds <= 300 ){
             element.style.color ="#FF0000";
            if((seconds%2)>0){
               element.style.color ="#FFFFFF";                
            }
        }
      element.innerHTML='<span>'+
        leadingzero(h) + ':' +
        leadingzero(m) + ':' +
        leadingzero(s)+'</span>';
      seconds--;
    } else {
      return false;
    }
  };
  var completed = function () {
    element.innerHTML = "<strong>Liftoff!<\/strong>";
  };
  calculateAndShow.Timer(1000, Infinity, completed);
}


  new countdown(305, 'time_value');

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

AngularJS allows for the creation of 2D arrays using the $Index

Currently, I am working on a project using AngularJS that involves creating a spreadsheet from a 2D array generated by the ng-repeat function. As part of this project, I am developing a function to update the initial values of the array when users input ne ...

Why is IE waiting to load XML content until I access Developer tools?

I'm encountering an issue with my webpage where the product information loaded from an XML file using a jQuery AJAX get request works fine in Firefox and Chrome, but for some reason it doesn't load in Internet Explorer. Oddly enough, it does load ...

What is the best way to extract a JSON object and save it as a standard JavaScript object?

Can someone help me convert this JSON format data into a regular JavaScript object? {"vehicles":[{"name":"motorcycle","wheels":2,"maxCapacity":2,"currentPassengers":1,"maxSpeed":"260 km/h"},{"name":"car","wheels":4,"maxCapacity":4,"currentPassengers":3,"m ...

Is there a way to filter out elements that are not visible from a jQuery selector?

I am currently working on a form that includes a checkbox for toggling a "nickname" field. My goal is to ensure that all fields are filled out before enabling a button on the page. The challenge I face is that some input fields are hidden from the user by ...

How to Navigate Downward with the Arrow Key in Python Selenium on a Mac Operating System

I am attempting to access a Drop-Down Menu on a website and choose a specific value. I am not sure how to click on an item within a Drop-Down Menu, so my idea was to instruct the WebDriver to use the Arrow-Down Key multiple times before pressing the ENTER/ ...

Employing pNotify as a seamless substitute for the traditional JavaScript confirmation pop-up

I have successfully implemented inline JavaScript confirmations and also as a function. However, I am struggling to figure out how to integrate PNotify confirmation dialog. My goal is to replace the existing confirm('Sure?') with pconfirm('S ...

Using javascript to navigate back to the previous page without redirecting to the main page

When utilizing an iframe, I've implemented a back button that triggers the following JavaScript code when clicked: document.getElementById("myframe").contentWindow.history.go(-1); // back While this works as intended, if there are no previous pa ...

Strategies for navigating dynamic references in Angular 2 components

I am working with elements inside an ngFor loop. Each element is given a reference like #f{{floor}}b. The variable floor is used for this reference. My goal is to pass these elements to a function. Here is the code snippet: <button #f{{floor}}b (click) ...

Automatically adjusting the locale settings upon importing the data

Is there a way to create a dropdown menu of languages where clicking on one language will change the date format on the page to match that country's format? In my React app, I am using moment.js to achieve this. My plan is to call moment.locale( lang ...

What is the method for attaching a keypress event to an HTML document?

Looking to add an interactive touch to my website by creating a "press any key" page. When a key is pressed, I want it to kick off animations that bring the page to life - like sliding elements in from different directions. Open to using jQuery or plain ...

Using the jQuery before() method to manipulate form fields

Is it possible to utilize the jQuery before method to insert a form? An example scenario could be as shown below: <script> $(document).ready(function() { $("button").click(function() { $("button").before('<form><input type="text ...

Regular expression for ng-pattern to validate file paths

I have created a regex for file paths with specific conditions: It must match the regex ^(\\\\[^\\]+\\[^\\]+|https?://[^/]+), which means it can be a network path like \server\share (optionally ...

Unit testing a React component by using the `renderToString` method

Context My React application is built using the React Starter Kit. In the server.js file, components are rendered using renderToStaticMarkup and then passed to the Html component, which includes it using dangerouslySetInnerHTML as shown here. I am facing ...

What's the best way to correct a word that is positioned at the bottom of a banner image?

https://i.sstatic.net/3gSoi.pngI am a newcomer to all of this. I have a banner image and I want to position a word at the bottom center of the banner. I've tried using padding, position, and text-align, but it's not responsive - when I widen the ...

Change XMLHttpRequest to jQuery for more efficient handling of data requests

I'm currently working on this code and looking to convert it into Jquery function GetServerTime() { var xhr; if(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject("Microsoft.XMLHTTP"); ...

Is the row removed from the table after successful deletion?

I am struggling to remove the deleted row from the table. The code I tried is not working as expected. Here is the scenario: When a user clicks on the delete link/button, it sends a delete request and removes the data from the Database. After successful de ...

What is the reason behind the for of loop breaking within an async function instead of properly awaiting the execution?

Update 2: I made changes to use setTimeOut instead, which fixed the issue. Check out the accepted answer for details on what was causing the error. The code below is now functioning properly. async function getSlices() { const imgBuffs = await sliceImg ...

How to efficiently import Xlsx and csv files using AngularJS

I am looking for a way to extract data in json format from each line of xlsx and csv files using AngularJS. Currently, I am utilizing the angular-file-upload library to access the file as shown below: $scope.LatLongUploader = new FileUploader({ //url ...

Allow the javascript callback function to complete before proceeding

Utilizing the Google Storage API, I am saving a file in a GCP bucket within an asynchronous function. My objective is to wait until I receive an error or success callback before proceeding with the subsequent lines of code. However, I am encountering the i ...

Is it possible to have several users using JW Player simultaneously?

Struggling to incorporate multiple players using JW Player. I've attempted various methods and consulted the documentation, but I can't seem to pinpoint why the code is malfunctioning. Check out the snippets below: In the head section: <scr ...