Определение шрифта внутри кода JavaScript с помощью другого кода JavaScript

Question

У меня есть этот Javascript в моем HTML, и я хотел бы изменить шрифт с другим кодом Javascript.

Это сценарий, который я использую, который показывает предложение за час.

<SCRIPT LANGUAGE="JavaScript"> 
day = new Date() 
hr = day.getHours() 
if (hr == 1) document.write("You can also work at night!") 
if (hr == 2) document.write("Go on! You can still push it!") 
if (hr == 3) document.write("Go go go, do not give up now!") 
if (hr == 4) document.write("Are you tired? pussy!") 
if (hr == 5) document.write("It's after 5.. just go and work some more, sleeping is almost usless now") 
if (hr == 6) document.write("Goodmorning! You made it true the night. Now GO GO GO!") 
if (hr == 7) document.write("Goedemorgen, het is 7 uur geweest.") 
if (hr == 8) document.write("Stay awake!") 
if (hr == 9) document.write("It's after 9! School starts! GO GO GO") 
if (hr == 10) document.write("Take no koffiebrake.") 
if (hr == 11) document.write("Hurry! Morning is almost finnised!") 
if (hr == 12) document.write("Damn! half of the day is alreddy gone! You are not working fast enouth!") 
if (hr == 13) document.write("No no, if you are a real good student you don't take brakes!") 
if (hr == 14) document.write("The morning is alreddy over, time is tikking!.") 
if (hr == 15) document.write("Go and get your coffie, drink it behind your computer so you wont't lose anney time!") 
if (hr == 16) document.write("No 4 o'clock for you! You still have no musch work to do!") 
if (hr == 17) document.write("What do you want to eat? Think quiq, lose no time!") 
if (hr == 18) document.write("Eat faster!") 
if (hr == 19) document.write("And back to work! To much stuff to do for tomorrow morging.") 
if (hr == 20) document.write("Take a koffie end procide") 
if (hr == 21) document.write("Eavening is almost done, have you finnised enouth work?") 
if (hr == 22) document.write("Stay strong, you can still finisch some work. Keep you focus.") 
if (hr == 23) document.write("It's nog that late yet, you dont need 9 hours sleep you pussy!") 
if (hr == 0) document.write("Come on you can still do it, finish that last parts!") 
</SCRIPT>

Тогда я бы хотел, чтобы результат был стилизован под этот радужный Javascript:

<script type="text/javascript">

function toSpans(span) {
  var str=span.firstChild.data;
  var a=str.length;
  span.removeChild(span.firstChild);
  for(var i=0; i<a; i++) {
    var theSpan=document.createElement("SPAN");
    theSpan.appendChild(document.createTextNode(str.charAt(i)));
    span.appendChild(theSpan);
  }
}

function RainbowSpan(span, hue, deg, brt, spd, hspd) {
    this.deg=(deg==null?360:Math.abs(deg));
    this.hue=(hue==null?0:Math.abs(hue)%360);
    this.hspd=(hspd==null?3:Math.abs(hspd)%360);
    this.length=span.firstChild.data.length;
    this.span=span;
    this.speed=(spd==null?50:Math.abs(spd));
    this.hInc=this.deg/this.length;
    this.brt=(brt==null?255:Math.abs(brt)%256);
    this.timer=null;
    toSpans(span);
    this.moveRainbow();
}


RainbowSpan.prototype.moveRainbow = function() {
  if(this.hue>359) this.hue-=360;
  var color;
  var b=this.brt;
  var a=this.length;
  var h=this.hue;

  for(var i=0; i<a; i++) {

    if(h>359) h-=360;

    if(h<60) { color=Math.floor(((h)/60)*b); red=b;grn=color;blu=0; }
    else if(h<120) { color=Math.floor(((h-60)/60)*b); red=b-color;grn=b;blu=0; }
    else if(h<180) { color=Math.floor(((h-120)/60)*b); red=0;grn=b;blu=color; }
    else if(h<240) { color=Math.floor(((h-180)/60)*b); red=0;grn=b-color;blu=b; }
    else if(h<300) { color=Math.floor(((h-240)/60)*b); red=color;grn=0;blu=b; }
    else { color=Math.floor(((h-300)/60)*b); red=b;grn=0;blu=b-color; }

    h+=this.hInc;

    this.span.childNodes[i].style.color="rgb("+red+", "+grn+", "+blu+")";
  }
  this.hue+=this.hspd;
}

</script>



<script type="text/javascript">

var r1=document.getElementById("r1"); //get span to apply rainbow
var myRainbowSpan=new RainbowSpan(r1, 55, 0, 255, 50, 200); //apply static rainbow effect
myRainbowSpan.timer=window.setInterval("myRainbowSpan.moveRainbow()", myRainbowSpan.speed);

</script>

Я понятия не имею, как объединить эти сценарии. Кто может помочь?

Answer 1

Способ сделать это будет рефакторинг вашего исходного кода, а затем просто вызвать изменения

Этот фрагмент кода создаст ожидаемый промежуток с некоторыми данными в targetElement на вашей веб-странице, и результат затем может быть передан конструктору RainbowSpan

function setTextBasedOnHour( target ) {
  var el = document.getElementById( target );
  var span = document.createElement('span');
  span.data = getTextBasedOnHour (getHour());
  el.appendChild(span);
  return el;
}

как это

new RainbowSpan(setTextBasedOnHour( "textBasedOnHour" ));

Я добавил небольшой фрагмент, чтобы показать, как вы можете это сделать.

function setTextBasedOnHour( target ) {
  var el = document.getElementById( target );
  var span = document.createElement('span');
  span.data = getTextBasedOnHour (getHour());
  el.appendChild(span);
  return el;
}

function getHour() {
  return (new Date()).getHours();
}

function getTextBasedOnHour( hour ) {
  var texts = [
    "Come on you can still do it, finish that last parts!",
    "You can also work at night!",
    "Go on! You can still push it!",
    "Go go go, do not give up now!",
    "Are you tired? pussy!",
    "It's after 5.. just go and work some more, sleeping is almost usless now",
    "Goodmorning! You made it true the night. Now GO GO GO!",
    "Goedemorgen, het is 7 uur geweest.",
    "Stay awake!",
    "It's after 9! School starts! GO GO GO",
    "Take no koffiebrake.",
    "Hurry! Morning is almost finnised!",
    "Damn! half of the day is alreddy gone! You are not working fast enouth!",
    "No no, if you are a real good student you don't take brakes!",
    "The morning is alreddy over, time is tikking!.",
    "Go and get your coffie, drink it behind your computer so you wont't lose anney time!",
    "No 4 o'clock for you! You still have no musch work to do!",
    "What do you want to eat? Think quiq, lose no time!",
    "Eat faster!",
    "And back to work! To much stuff to do for tomorrow morging.",
    "Take a koffie end procide",
    "Eavening is almost done, have you finnised enouth work?",
    "Stay strong, you can still finisch some work. Keep you focus.",
    "It's nog that late yet, you dont need 9 hours sleep you pussy!"
  ];
  return texts[hour || 0];
}

function toSpans(span) {
  var str=span.firstChild.data;
  var a=str.length;
  span.removeChild(span.firstChild);
  for(var i=0; i<a; i++) {
    var theSpan=document.createElement("SPAN");
    theSpan.appendChild(document.createTextNode(str.charAt(i)));
    span.appendChild(theSpan);
  }
}

function RainbowSpan(span, hue, deg, brt, spd, hspd) {
    this.deg=(deg==null?360:Math.abs(deg));
    this.hue=(hue==null?0:Math.abs(hue)%360);
    this.hspd=(hspd==null?3:Math.abs(hspd)%360);
    this.length=span.firstChild.data.length;
    this.span=span;
    this.speed=(spd==null?50:Math.abs(spd));
    this.hInc=this.deg/this.length;
    this.brt=(brt==null?255:Math.abs(brt)%256);
    this.timer=null;
    toSpans(span);
    this.moveRainbow();
}


RainbowSpan.prototype.moveRainbow = function() {
  if(this.hue>359) this.hue-=360;
  var color;
  var b=this.brt;
  var a=this.length;
  var h=this.hue;

  for(var i=0; i<a; i++) {

    if(h>359) h-=360;

    if(h<60) { color=Math.floor(((h)/60)*b); red=b;grn=color;blu=0; }
    else if(h<120) { color=Math.floor(((h-60)/60)*b); red=b-color;grn=b;blu=0; }
    else if(h<180) { color=Math.floor(((h-120)/60)*b); red=0;grn=b;blu=color; }
    else if(h<240) { color=Math.floor(((h-180)/60)*b); red=0;grn=b-color;blu=b; }
    else if(h<300) { color=Math.floor(((h-240)/60)*b); red=color;grn=0;blu=b; }
    else { color=Math.floor(((h-300)/60)*b); red=b;grn=0;blu=b-color; }

    h+=this.hInc;

    this.span.childNodes[i].style.color="rgb("+red+", "+grn+", "+blu+")";
  }
  this.hue+=this.hspd;
}

new RainbowSpan(setTextBasedOnHour( "textBasedOnHour" ));

<div id="textBasedOnHour"></div>