Server Status

heyhey83 · 29. November 2020

Hallo Liebe Community.

Ich habe ein Online ,Offline Server Status, nun möchte ich über CSS das so machen das wenn es Online ist Grüner Text und wenn es Offline ist Roter Text.

CSS

Code

p
{
  font-size: 18;
}

#server-status
{
  color: pink;
  font-size: 16;
  font-weight: bold;
}

Alles anzeigen

JS.

Code

 var site = 'https://seti-sachsen.de';
// var site = 'https://google.com';

$.ajax
({
  url: site,
  dataType: "jsonp",
  statusCode: {
      200: function (response) {
          $('#server-status').html('Online');
        console.log(response);
      },
      404: function (response) {
          $('#server-status').html('Offline');
        console.log(response);
      }
  } 
 });

Alles anzeigen

Ich hoffe ihr könnt mir da weiter helfen. Ich sage schon mal Danke.

Mit freundlichen Grüßen

Roberto.

m.scatello · 29. November 2020

Siehe https://www.w3schools.com/jque…me=tryjquery_css_setcolor

heyhey83 · 29. November 2020

ja

Zitat von m.scatello

Siehe https://www.w3schools.com/jque…me=tryjquery_css_setcolor

Das ist ja fast das selbe wie ich es gepostet habe. Aver wie setzt ich es im css, wenn es offline ist dann ist es rot und wenn es online ist dann ist es Grün.

m.scatello · 29. November 2020

Zitat von heyhey83

Das ist ja fast das selbe wie ich es gepostet habe.

Ja, genau. Aber dort wird per JavaScript eine Hintegrundfarbe gesetzt, man kann das aber auch so anpassen, dass die Textfarbe geändert wird. Und schon kannst du mit etwas Mitdenken eine Zeile aus dem Beispiel kopieren, bei dir einfügen und anpassen.

heyhey83 · 29. November 2020

Zitat von m.scatello

Ja, genau. Aber dort wird per JavaScript eine Hintegrundfarbe gesetzt, man kann das aber auch so anpassen, dass die Textfarbe geändert wird. Und schon kannst du mit etwas Mitdenken eine Zeile aus dem Beispiel kopieren, bei dir einfügen und anpassen.

Habe es so gelöst, in JS #Server-status Online einfach normal #Server-status ,bei Offline einfach #Server-status-off. Und schon geht es so wie es soll.

Im CSS.

Code

#server-status-off
{
  color: red;
  font-size: 16;
  font-weight: bold;
  background-color: black;
}

#server-status
{
  color: green;
  font-size: 16;
  font-weight: bold;
  background-color: black;
}

Alles anzeigen

in index.html

Code

<p><font size="4" color="#17D4FE">Server Status: <span id="server-status"></span><span id="server-status-off"></span></p>

JS

Code

var site = 'https://seti-sachsen.de';
// var site = 'https://google.com';

$.ajax
({
  url: site,
  dataType: "jsonp",
  statusCode: {
      200: function (response) {
          $('#server-status').html('Online');
        console.log(response);
      },
      404: function (response) {
          $('#server-status-off').html('Offline');
        console.log(response);
      }
  } 
 });

Alles anzeigen

Server Status

Jetzt mitmachen!

Teilen

Tags