Revamp your JavaScript code to trigger when the clock strikes bold!

Having trouble setting up JavaScript to automatically bold the next clock time. Any tips on rewriting the JavaScript? For instance, if it is currently 6:49, I want the next clock time of 7:32 to be automatically bolded. And when the time reaches 7:32, I want 8:01 to be automatically bolded next. So, essentially, always bolding the upcoming time once the current time has passed.

jQuery(document).ready(function($) {
  var hour = new Date().getHours();

  $('table td:nth-child(1)').each(function(index, td) {
    if ($(td).text().indexOf(hour) == 00) {
      $(td).addClass('highlight-time');
    } else {
      $(td).removeClass('highlight-time');
    }
  });
});
.highlight-time {
  font-weight: bold;
}
<table>
  <tbody>
    <tr>
      <td style="padding-left: 0px;width: 75px;">6:49</td>
      <td style="padding-left: 0px; padding-right: 0px;">BLERI-COM</td>
    </tr>
    <tr>
      <td style="padding-left: 0px;width: 75px;">7:32</td>
      <td style="padding-left: 0px; padding-right: 0px;">ENDRITI</td>
    </tr>
    <tr>
      <td style="padding-left: 0px;width: 75px;">8:01</td>
      <td style="padding-left: 0px; padding-right: 0px;">BEKA-KAQANIK</td>
    </tr>
    <tr>
      <td style="padding-left: 0px;width: 75px;">8:21</td>
      <td style="padding-left: 0px; padding-right: 0px;">MEDINA</td>
    </tr>
    <tr>
      <td style="padding-left: 0px;width: 75px;">8:59</td>
      <td style="padding-left: 0px; padding-right: 0px;">METI-COMERC</td>
    </tr>
    <tr>
      <table>
        <tbody>

javascript

Answer №1

To make your Javascript code execute at intervals, you can place it within a function and then call that function after a specified time period. For example, if you have a function called setBold() containing the code you want to run every three seconds, you can set up an interval like this:

var myVar=setInterval(function(){setBold()}, 3000);

This will ensure that the setBold() function is executed every three seconds. You can adjust the interval to suit your needs - for instance, if you want to bold text every hour, you can set the interval to the equivalent of one hour:

For a one-hour interval, you would use the following code:

var myVar=setInterval(function(){setBold()}, (1000*60*60));

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

The field 'XXX' is not a valid property on the type 'CombinedVueInstance<Vue, {}, {}, {}, Readonly<Record<never, any>>>'

When creating a Vue component with TypeScript, I encountered an error message in the data() and methods() sections: Property 'xxx' does not exist on type 'CombinedVueInstance<Vue, {}, {}, {}, Readonly<Record<never, any>>>& ...

javascriptnode.jstypescriptvue.jsvue-component

The curious case of jQuery.parseJSON() failing to decode a seemingly valid Json string on a Windows-based server

I am currently running a WordPress JavaScript function code on a Linux server that also includes a PHP function called "get_form_data". jQuery.ajax({ type: "POST", url: MyAjax.ajaxurl, data: {action: "get_fo ...

javascriptjqueryjsonwordpressiis

Transforming XML into Json using HTML string information in angular 8

I am currently facing a challenge with converting an XML document to JSON. The issue arises when some of the string fields within the XML contain HTML tags. Here is how the original XML looks: <title> <html> <p>test</p> ...

javascriptjsonangularxmltypescript

What's the best way to include various type dependencies in a TypeScript project?

Is there a more efficient way to add types for all dependencies in my project without having to do it manually for each one? Perhaps there is a tool or binary I can use to install all types at once based on the dependencies listed in package.json file. I ...

javascriptnode.jstypescriptvisual-studio-code

Generate HTML content using AngularJS

Is there a way to format a string as HTML when using it in the following syntax: <div> {{ text }} </div> Instead of displaying the actual HTML, only the text is shown - for example " ab " ...

javascripthtmlangularjshtml-rendering

Troubleshooting: Issue with jQuery not retrieving the value of input:nth-child(n)

My goal is to dynamically change the price when the model number changes, requiring the id number and quantity to calculate it accurately. Here is the HTML code I have: <div class="col-sm-9 topnav"> <span> ...

javascriptjqueryhtmlcss-selectors

Utilize the controller data to display information on a day-by-day basis

In my attempt to design a weekly calendar using AngularJS, I am facing challenges when it comes to inserting events into the 7 boxes representing each day of the week on the calendar. The current HTML structure is as follows: <div class="week"> ...

javascripthtmlcssangularjs

What is the method for specifying a null value in Typescript?

I'm curious if this code snippet is accurate, or if there's a better way to define it. Is there an alternative to using error!? I'm unsure of its meaning and would appreciate clarification. ...

javascripttypescript

Access the angular controller using the radio button option

I am looking to showcase data in an HTML table retrieved from an Angular controller. I have the controller set up but I am unsure about how to display the data when a radio button is selected. <div class="radio"> <label class="radio-inline" ...

javascriptangularjs

Managing various swipe interactions using HTML and JavaScript/jQuery

I'm in the process of creating a mobile multiplayer game using HTML5 and Javascript. The jQuery Plugin "touchwipe" is utilized to manage swipe events in various divs like this: $('#play1').touchwipe({ wipeLeft: function(){ if ...

javascriptandroidhtmliosswipe

What is the most effective approach for addressing errors in both the server and client sides while utilizing nodejs and express?

Seeking the most effective approach for handling errors in a response - request scenario. Here is an example of a route that receives a request: app.get('/getInfo', function (req, res, next) { let obj = {} try { obj = { ...

javascriptnode.jsreactjsexpresstry-catch

Display the URL with proper formatting in the print function

I am trying to create a table with clickable URLs in a "Link" column, but the URLs are too long and I want to show a custom title instead. So far, I have used the following code: str = "Test Title"; link = str.link("https://my_long_url.com/v1.0/ui/index. ...

javascriptapache-zeppelin

Guide on updating the URL for the login page in the Next-Auth configuration

I successfully integrated authentication using Next-Auth in my Next.js project. In the index.js file (as per the Next-Auth documentation), I only return a User if there is an active session export default function Home({characters}) { const {data: ses ...

javascriptreactjsnext.jsnext-auth

Using Vuejs to dynamically render a select dropdown based on the initial selection made in the first dropdown menu

I am facing an issue with two drop-down menus. The second menu's choices need to be filtered and displayed based on the selection made in the first drop-down. The RoomID value from the first drop-down is used to filter an array of objects for the seco ...

javascriptvue.jsvuejs2

Discovering the URL of an AJAX request on any given website

Is there a way to retrieve the URLs of AJAX requests that are sent by the current page on a website using a browser or another tool? ...

javascriptajax

Is there a way to sort search outcomes by a drop-down menu in Next.js?

I am currently working on implementing a filter for my data based on selections made in a drop-down menu. Here's the setup: I have MSSQL data being pulled into NextJS using Prisma (ORM). My goal is to create a dropdown filter that will refine the di ...

javascriptnext.js

Unexpected token N error was thrown while using the Jquery .ajax() function

While working on a form submission feature using JQuery .ajax() to save data into a MySQL database, I encountered an error message that says "SyntaxError: Unexpected token N". Can someone please explain what this means and provide guidance on how to fix it ...

javascriptjqueryajaxsubmitform-submit

How to handle a Node.js promise that times out if execution is not finished within a specified timeframe

return await new Promise(function (resolve, reject) { //some work goes here resolve(true) }); Using Delayed Timeout return await new Promise(function (resolve, reject) { //some work goes here setTimeout(function() { resolve(true); }, 5000); } ...

javascriptnode.jstypescriptpromise

Add a CSS class to an innerHTML element just a single time

I currently have 2 files available: data.php page.php The data.php file is responsible for fetching a row from a SQL database and sending it to the page.php file. Within the page.php file, there is a JavaScript script that receives this row through AJAX ...

javascriptphphtmlcssajax

What is the best way to combine objects that share the same id?

View Image: Displaying Image POST ID's https://i.stack.imgur.com/JO5OF.png I attempted to resolve this using jQuery each, but I am uncertain about the next steps. Check out my Code: jQuery(document).ready(function($) { var data, exampleData, , ...

javascriptjqueryobjectmerge