Counting up in ASP.NET using Javascript

I have been searching for a solution to this online, but haven't had any luck yet. I am in need of a simple JavaScript code (HH:MM:SS) that counts seconds upwards. My web application is ASP.NET with C#. I would like this count to start upon page load. The JavaScript should be able to do the following: - Change the background of the timer to yellow when it reaches 2 minutes - Change the background of the timer to red when it reaches 4 minutes - Play a .mp3 or wav file when it reaches 10 minutes

Can someone point me in the right direction? It doesn't have to be specifically done in JavaScript. If it can be achieved in C# ASP.NET, that works for me.

Thank you

c#javascriptasp.nettimer

Answer №1

Counter: 

 let counter = 0;
 counter++;

Timer: 

let intervalID = window.setInterval(everySecond, 1000);

function everySecond()
{  // do something
}

Determine if the counter has surpassed either 120 seconds or 240 seconds:

if (counter > 120)
{ ....
}

Changing color: utilize 2 CSS styles based on class and switch classes as required... For example, using JQuery.addClass - 

$("#myText").addClass("myRedBackground");

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

How to Verify If a Combobox Value is Chosen in C# .NET?

I have been working on enhancing my application by improving exception handling. In my form, I want to display a message box to the user if any fields are left incomplete. However, my current code isn't working as expected. Even when all the fields ar ...

c#.netif-statementcomboboxmessagebox

Utilizing C# to Decode Nested HTML Elements from JSON

I recently came across a very helpful JQuery function that allows me to serialize nested elements. However, I am facing an issue when trying to deserialize it using c#. Upon running the code, I encountered the error message: No parameterless constructor ...

c#json

Sending Arrays Using WebClient in C# and .NET

My issue lies with a .net application utilizing WebRequest that adds the same key multiple times in a POST request, resulting in an array in PHP, Java Servlets, and similar platforms. I attempted to switch to using WebClient, but found that when I call Web ...

c#.netarraysfile-uploadwebclient

JavaScript 'await' throws error 'then is not defined'

Just starting out with async programming and I've noticed a common issue in similar threads - the problem of not returning anything. However, in my case, I am facing a different error message 'Cannot read property 'then' of undefined&ap ...

javascriptajax

The phonegap page redirection is failing, as the 'location' property of the object does not function correctly

I'm attempting to implement a straightforward page redirection in PhoneGap using JavaScript. Within an iframe, I have the following code: window.parent.location("event_select.html"); Unfortunately, this approach is unsuccessful and results in the fo ...

javascriptcordova

Obtain the current value of the style attribute, append 'X' to it, and update the attribute with the new

When the load-more button is clicked by the user and the card-wrapper has the class list-view. I need to retrieve the mason style attribute value and add 300px to it, then set that new value to the mason div. The problem I'm facing is that I can ret ...

javascriptjquery

Experience the power of CanJS Observable data objects with the added feature of

When working with canJS Observable, I encountered an issue where I cannot use dots in object keys because canJS interprets them as nesting. For example, if I try to create a new observable like this: var obs = new can.Observe( { "div.test-class": { "color ...

javascriptobservablecanjs

Load Bootstrap 4 Modal with Ajax

I recently upgraded from Bootstrap 3 to Bootstrap 4.1 Within my applications, I utilize ajax loaded modals. In the layout, I have: <div class="modal fade" id="myModalToFillInfo" tabindex="-1" role="dialog" aria-labelledby="myModalToFillInfoLabel" ari ...

javascriptjqueryhtmlajaxbootstrap-4

Is it possible to observe a collection of variables that are not within the current scope, but are still being utilized in Angular?

Consider the following scenario with data coming from a service: myService.var1 myService.var2 myService.var3 Typically, you would need to monitor each variable individually like this: $scope.$watch(function(){ return myService.var1 }, fun ...

javascriptangularjswatch

Initiating a AJAX upload upon selection of a specific option from a select menu

Recently, I have been exploring ways to enhance my layout page by implementing an option for users to upload new logos on the spot. Currently, users are able to choose their desired image through a drop-down selection feature. I am interested in adding a f ...

javascriptjqueryajaxuploadajax-upload

Caution: Additional server attributes detected: style

Alert in my Next.js project, I encountered the following message: Notice: Server is sending additional attributes: style I am uncertain about the source of this warning and therefore unable to provide any code snippet. ...

javascripthtmlnext.jsjsx

The structure of NodeJS Express API calls revolves around handling asynchronous events

Currently, I am working on a hobby project using NodeJS and Express, but I am finding it challenging to manage asynchronous calls. There is a bug that I would like the community's help in resolving. I have set up an Express layout where I send post r ...

javascriptnode.jsapiexpressasynchronous

jQuery Autocomplete with Link Options

Can anyone help me with creating a search function for my charity's internal website? I've managed to get it partially working, but I'm struggling to make the results link to the right places. Below is the code I have so far, including test ...

javascriptjqueryhyperlinkautocompletejquery-ui-autocomplete

What is the most efficient way to use jQuery to retrieve the count of tags associated with a variable

I am trying to filter my data retrieved from ajax using a function. Here is the initial code: var csvf = data.filter(function (el) { return ['TRUCK_CPX'].indexOf(el.TAG) >= 0 && ['CA5533'].indexOf(el.Chave) >= 0 }); Now ...

javascriptjquery

Struggling to transfer information from asp.net webforms to client-side through ajax

I have been attempting to send data to the client-side using AJAX, but I am encountering an issue. The browser displays an error stating "failed to load resource", even though I have confirmed that jQuery is loaded properly. [HttpGet] public string Get ...

c#asp.net.netajax

Tips for consolidating JavaScript assets in Mean.io

Recently, I started using Mean.io and encountered an issue while trying to include an external .js file in my package. Unfortunately, I seem to be doing it incorrectly as the file is not being added to aggregated.js. This is the approach I have taken: im ...

javascriptangularjsnode.jsexpressmean.io

What methods are available to track CPU and memory usage for a specific method in C#?

Apologies for any language barriers, English is not my primary language. I am interested in creating a server framework to run on my Ubuntu server. My goal is to develop remote profiling tools that can display the CPU and memory usage of each method. Are ...

c#.net.net-coreprofiling

Saving data for editing on a Laravel page can be achieved by leveraging the powerful features

I have implemented my create page using vue.js. I called the vue.js file using a component. Now, for the edit page, I followed the same procedure by calling the vue component in the blade. However, I am unsure how to save data for the edit page. Can anyone ...

javascriptlaravelvue.jslaravel-blade

Looking for assistance with transferring a data attribute to a form redirection

I'm seeking assistance with a coding dilemma I've encountered. To provide some background, I have a list of items on my website, each featuring a 'Book Now' button that redirects users to different pages. Recently, I incorporated a mod ...

javascriptjqueryhtmlformsexpressionengine

Issue with VueJS: Cannot modify a component property within a watcher function

I am currently developing a Vue 2 Webpack application that utilizes Vuex. My aim is to update the local state of a component by observing a computed property which retrieves data from the Vuex store. Here's an excerpt from the <script></scrip ...

javascriptvue.jsvuejs2