Pomóźcie bo wysiadam :(

0

Witam, Jak do licha przestawić wskazówki o 6 godzin do tyłu w stosunku do naszego czasu, oto cały kod:

<!DOCTYPE html>

<title>Polish TV clock recreation</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
  body {
    background: rgb(0, 0, 38);
    overflow: hidden;
    padding: 0;
    margin: 0;
  }
  .clock {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url(clock/background.png);
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
  }

  .clock > * {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .clock > * > * {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    transform-origin: 50% 50%;
  }

  .clock .second-hand {
    z-index: 100;
  }
  .clock .second-hand-inner {
    background-image: url(clock/hand-second.png);
  }

  .clock .minute-hand {
    z-index: 99;
  }
  .clock .minute-hand-inner {
    background-image: url(clock/hand-minute.png);
  }

  .clock .hour-hand {
    z-index: 98;
  }
  .clock .hour-hand-inner {
    background-image: url(clock/hand-hour.png);
  }
</style>

<script>
  var TRANSFORM_NAME

  function easeOutElastic(t) {
    var p = .3
    return Math.pow(2, -10 * t) * Math.sin((t - p / 4) * (2 * Math.PI) / p) + 1
  }
window.onload
  function updateClock() {
    var clockEl = document.body.querySelector('.clock')

    var time = new Date().getTime()

    var milliSeconds = (time % 1000) * 1.0 / 1000

    if (milliSeconds > .5) {
      milliSeconds = .5 + easeOutElastic((milliSeconds - .5) / .5) * .33
    } else {
      milliSeconds = -.17
    }

    var seconds = Math.floor((time / 1000) % 60)
    var rotation = (360 / 60) * seconds + (milliSeconds + .17) / 60 * 360
    clockEl.querySelector('.second-hand-inner').style[TRANSFORM_NAME] = 'rotate(' + rotation + 'deg)'

    var minutes = ((time / 1000 / 60) % 60)
    var rotation = (360 / 60) * minutes
    clockEl.querySelector('.minute-hand-inner').style[TRANSFORM_NAME] = 'rotate(' + rotation + 'deg)'

    var hours = ((time / 1000 / 60 / 60) % 1) + new Date().getHours()
    var rotation = (360 / 12) * hours
    clockEl.querySelector('.hour-hand-inner').style[TRANSFORM_NAME] = 'rotate(' + rotation + 'deg)'

    window.requestAnimationFrame(updateClock)
  }
</script>

<body>
  <div class='clock'>
    <div class='hour-hand'><div class='hour-hand-inner'></div></div>
    <div class='minute-hand'><div class='minute-hand-inner'></div></div>
    <div class='second-hand'><div class='second-hand-inner'></div></div>
  </div>

  <script>
    if (typeof document.body.style.transform == 'undefined') {
      TRANSFORM_NAME = 'webkitTransform'
    } else {
      TRANSFORM_NAME = 'transform'
    }

    updateClock()
  </script>
</body>
6

time = time - 21600;

0
Freja Draco napisał(a):

time = time - 21600;

Dziękuję bardzo, pozdrawiam :)

0
Freja Draco napisał(a):

time = time - 21600;

a która to część kodu będzie?

2
Przemysław Osiecki napisał(a):
Freja Draco napisał(a):

time = time - 21600;

a która to część kodu będzie?

No ja bym to zdecydowanie do CSSa wrzucił...

0
serek napisał(a):
Przemysław Osiecki napisał(a):
Freja Draco napisał(a):

time = time - 21600;

a która to część kodu będzie?

No ja bym to zdecydowanie do CSSa wrzucił...

ale dołożyć do istniejącego time do tego CSS czy dopisać nowy, sorki ale noga w tym jestem

1

Zamień:

var time = new Date().getTime();

na:

var time = new Date().getTime() - 21600;
0
Freja Draco napisał(a):

Zamień:
var time = new Date().getTime();

na:
var time = new Date().getTime() - 21600;

Dziękuję :) Dobrej Nocy życzę :)

0
Freja Draco napisał(a):

Zamień:

var time = new Date().getTime();

na:

var time = new Date().getTime() - 21600;

niestety, ale wskazówka nic się nie przesunęła, ten kod jest odporny na jakiekolwiek zmiany, ale dzięki raz jeszcze za pomoc. Może jakaś komenda na przestawienie tych wskazówek i ruszenie go z miejsca

0

Możesz spróbować użyć: https://momentjs.com

Ale samo odejmowanie też powinno dać radę. Może coś źle robisz.

EDIT:

Zmień:

  var hours = ((time / 1000 / 60 / 60) % 1) + new Date().getHours()

na

  var hours = ((time / 1000 / 60 / 60) % 1) + new Date().getHours() - 6;

To tak źle zadziała. Zaraz podam gotowy kod...

0
serek napisał(a):

Możesz spróbować użyć: https://momentjs.com

Ale samo odejmowanie też powinno dać radę. Może coś źle robisz.

EDIT:

Zmień:

  var hours = ((time / 1000 / 60 / 60) % 1) + new Date().getHours()

na

  var hours = ((time / 1000 / 60 / 60) % 1) + new Date().getHours() - 6;

To tak źle zadziała. Zaraz podam gotowy kod...

EDIT2:

(time / 1000 / 60 / 60) % 1

To jest równe 0 zawsze xD

Działa, ale zobaczę czy na stałe, ale to mogę sprawdzić przy przeskoku z 59 sekundy na 00 - czyli o pełnej godzinie :)

0

Nie zadziała, bo się spierdzieli, bo nie istnieje godzina minusowa^^

Używając moment.js wystarczy takie coś:

var date = moment().subtract(6, 'hours');
var hours = date.hours();
var minutes = date.minutes();
var seconds = date.seconds();

alert(hours + ' ' + minutes + ' ' + seconds);
0
Przemysław Osiecki napisał(a):
serek napisał(a):

Możesz spróbować użyć: https://momentjs.com

Ale samo odejmowanie też powinno dać radę. Może coś źle robisz.

EDIT:

Zmień:

  var hours = ((time / 1000 / 60 / 60) % 1) + new Date().getHours()

na

  var hours = ((time / 1000 / 60 / 60) % 1) + new Date().getHours() - 6;

Działa, zamykam temat, dziękuję

To tak źle zadziała. Zaraz podam gotowy kod...

EDIT2:

(time / 1000 / 60 / 60) % 1

To jest równe 0 zawsze xD

Działa, ale zobaczę czy na stałe, ale to mogę sprawdzić przy przeskoku z 59 sekundy na 00 - czyli o pełnej godzinie :)

0

@Przemysław Osiecki: Weź usuń to z Twoich postów to co napisałem w EDIT2, bo to bzdury straszne, źle popatrzyłem na kod xD

0
Przemysław Osiecki napisał(a):
Przemysław Osiecki napisał(a):
serek napisał(a):

Możesz spróbować użyć: https://momentjs.com

Ale samo odejmowanie też powinno dać radę. Może coś źle robisz.

EDIT:

Zmień:

  var hours = ((time / 1000 / 60 / 60) % 1) + new Date().getHours()

na

  var hours = ((time / 1000 / 60 / 60) % 1) + new Date().getHours() - 6;

Działa, zamykam temat, dziękuję
Działa, ale zobaczę czy na stałe, ale to mogę sprawdzić przy przeskoku z 59 sekundy na 00 - czyli o pełnej godzinie :)

0

Ale zwykłe odejmowanie wam nie działa?

Z:

var time1 = new Date().getTime();
var time2 = new Date().getTime() - 21600;
console.log(time1);
console.log(time2);

dostaję:
1009.356 1573983789354
1009.356 1573983767754

Pod FF i Chromem.

0
Freja Draco napisał(a):

Ale zwykłe odejmowanie wam nie działa?

Z:

var time1 = new Date().getTime();
var time2 = new Date().getTime() - 21600;
console.log(time1);
console.log(time2);

dostaję:
1009.356 1573983789354
1009.356 1573983767754

Pod FF i Chromem.

czyli to samo, to znaczy jeśli chodzi o wynik podany w godzinach, bo ten w milisekundach - to zgadza się odjęło, ale już u mnie jest ok :)

1
Freja Draco napisał(a):

Ale zwykłe odejmowanie wam nie działa?

Ale popatrz na kod, tam potem dodaje liczbę godzin, która nie jest obliczana ze zmiennej time.

Ogólnie strasznie przeinżynierowany ten kod i mało czytelny.

0

A jeszcze mam taką prośbę, bo też ostatnio szukałem i nie znalazłem odpowiedzi, a tu jak w dym i się nie zawiodłem, dlatego zwracam się do Was

czy mógłby mi ktoś napisać, co mógłbym dopisać ewentualnie zmienić aby licznik wskazywał wiodące zero (leading zero) przy godzinach, minutach i sekundach

<script type="text/javascript"> 
k=+new Date(2019,03,26,8,45,27);
(function(){sec=(k-new Date())/-1000; 
document.getElementById('odliczanie').innerHTML=~~(sec/(36e2*24))+'| '+~~(sec/3600)%24+': '+~~(sec/60)%60+': '+~~sec%60+' ';
setTimeout(arguments.callee,1000)})() 
</script>

z góry dziękuję za pomoc

2

document.getElementById('odliczanie').innerHTML=~~(sec/(36e2*24))+'| '+(~~(sec/3600)%24 < 10 ? '0' + ~~(sec/3600)%24 : ~~(sec/3600)%24)+': '+(~~(sec/60)%60 < 10 ? '0'+~~(sec/60)%60 : ~~(sec/60)%60)+': '+(~~sec%60 < 10 ? '0' + ~~sec%60 : ~~sec%60)+' ';

0
mmilch napisał(a):

document.getElementById('odliczanie').innerHTML=~~(sec/(36e2*24))+'| '+(~~(sec/3600)%24 < 10 ? '0' + ~~(sec/3600)%24 : ~~(sec/3600)%24)+': '+(~~(sec/60)%60 < 10 ? '0'+~~(sec/60)%60 : ~~(sec/60)%60)+': '+(~~sec%60 < 10 ? '0' + ~~sec%60 : ~~sec%60)+' ';

DZIĘKI WIELKIE :) a ten symbol co pytał się o niego Freja, to pojęcia nie mam

2

Pojedynczy operator "~" to negacja bitów (liczby). Podwójny operator to podwójna negacja tejże liczby. Przy podwójnej negacji tracone są bity odpowiedzialne za resztę po przecinku. Nie jest to typowy element języka tylko "trick" wykorzystujący zachowanie kompilatora i stosowany tam gdzie ważny jest narzut czasowy wykonywania operacji. Operacje bitowe są zawsze szybsze niż jakiekolwiek funkcje (chyba że też są napisane z ich wykorzystaniem). Podobnie jest np. z przesunięciami bitów w lewo i w prawo do uzyskania x-krotności pierwotnej liczby szybciej niż podczas zwykłych operacji matematycznych.

0
mmilch napisał(a):

Pojedynczy operator "~" to negacja bitów (liczby). Podwójny operator to podwójna negacja tejże liczby. Przy podwójnej negacji tracone są bity odpowiedzialne za resztę po przecinku. Nie jest to typowy element języka tylko "trick" wykorzystujący zachowanie kompilatora i stosowany tam gdzie ważny jest narzut czasowy wykonywania operacji. Operacje bitowe są zawsze szybsze niż jakiekolwiek funkcje (chyba że też są napisane z ich wykorzystaniem). Podobnie jest np. z przesunięciami bitów w lewo i w prawo do uzyskania x-krotności pierwotnej liczby szybciej niż podczas zwykłych operacji matematycznych.

Ja też za wszystko Wam pięknie dziękuję

1

Przy podwójnej negacji tracone są bity odpowiedzialne za resztę po przecinku.

Bity nie są "tracone", tylko następuje zwyczajne rzutowanie float -> int.

Operacje bitowe są zawsze szybsze niż jakiekolwiek funkcje

Nie jest to prawdą od momentu w którym weszliśmy do XXI wieku (https://jsperf.com/tilde-vs-floor/16)

Podobnie jest np. z przesunięciami bitów w lewo i w prawo do uzyskania x-krotności pierwotnej liczby szybciej niż podczas zwykłych operacji matematycznych.

Ponownie, nie w XXI wieku.

0

Wyniki wychodzą mi prawie identyczne dla Math.trunc() oraz '~~' więc mamy oszczędność 10 znaków ;)

Zgoda że efektem ubocznym ~~ jest rzutowanie na typ całkowity i utrata części ułamkowej z tego powodu.

0

Mam pytanie, bo skrypt dobrze działa na zliczanie, ale jak dałem teraz na odliczanie np. do swoich 40 urodzin wychodzi coś takiego jeśli chodzi o godziny minuty i sekundy

-272| 0-12: 0-53: 0-56
I moje pytanie brzmi jak usunąć te niepotrzebne 0- z zachowaniem zera z przodu przy wartościach mniejszych niż 10

Podaję cały skrypt:

<span style="background-color="#000000"><center><h2><b><font 
color="black"></font><font color="black" face="DIN Pro" size="5">40 YEARS<br />ON 
PRZEMOS
</font><font color="#686868" face="DIN Pro" size="6px"><br />
<span style="background-color: black" id="odliczanie"></span> 
<script type="text/javascript"> 
k=+new Date(2020,09,08, 6,27,00);
(function(){sec=(k-new Date())/-1000; 
document.getElementById('odliczanie').innerHTML=~~(sec/(36e2*24))+'| '+(~~
(sec/3600)%24 < 10 ? '0' + ~~(sec/3600)%24 : ~~(sec/3600)%24)+': '+(~~(sec/60)%60 < 10 ? 
'0'+~~(sec/60)%60 : ~~(sec/60)%60)+': '+(~~sec%60 < 10 ? '0' + ~~sec%60 : ~~sec%60)+' ';
setTimeout(arguments.callee,1000)})() 
</script><br /></font></b></h2></center>

Z góry dziękuję

0

Mam pytanie, bo skrypt dobrze działa na zliczanie, ale jak dałem teraz na odliczanie np. do swoich 40 urodzin wychodzi coś takiego jeśli chodzi o godziny minuty i sekundy

-272| 0-12: 0-53: 0-56
I moje pytanie brzmi jak usunąć te niepotrzebne 0- z zachowaniem zera z przodu przy wartościach mniejszych niż 10

Podaję cały skrypt:


<span style="background-color="#000000"><center><h2><b><font color="black"></font><font color="black" face="DIN Pro" size="5">40 YEARS<br />ON PRZEMOS
</font><font color="#686868" face="DIN Pro" size="6px"><br />
<span style="background-color: black" id="odliczanie"></span> 
<script type="text/javascript"> 
k=+new Date(2020,09,08, 6,50,00);
(function(){sec=(k-new Date())/-1000; 
document.getElementById('odliczanie').innerHTML=~~(sec/(36e2*24))+'| '+(~~(sec/3600)%24 < 10 ? '0' + ~~(sec/3600)%24 : ~~(sec/3600)%24)+': '+(~~(sec/60)%60 < 10 ? '0'+~~(sec/60)%60 : ~~(sec/60)%60)+': '+(~~sec%60 < 10 ? '0' + ~~sec%60 : ~~sec%60)+' ';

setTimeout(arguments.callee,1000)})() 
</script><br /></font></b></h2></center>

0

Da się z tym co wyżej zrobić, jak wyżej napisałem? pomożecie

0
mmilch napisał(a):

document.getElementById('odliczanie').innerHTML=~~(sec/(36e2*24))+'| '+(~~(sec/3600)%24 < 10 ? '0' + ~~(sec/3600)%24 : ~~(sec/3600)%24)+': '+(~~(sec/60)%60 < 10 ? '0'+~~(sec/60)%60 : ~~(sec/60)%60)+': '+(~~sec%60 < 10 ? '0' + ~~sec%60 : ~~sec%60)+' ';

A jak zrobić aby odliczało, na tym powyższym kodzie bo jak brałem datę z przyszłości to mi się same minusy pokazują, coś takiego

-272| 0-12: 0-53: 0-56, co trzeba w tym kodzie zmienić lub poprawić?

0

Trzy kwestie:

  1. Nie wklejaj wielkich kawałów niesformatowanego kodu. Nikt nie będzie chciał tego rozszyfrowywać. Użyj: https://jsfiddle.net/
  2. Nie cackaj się zbyt długo z tym czasem, przyjdzie na to czas. ;-) . Użyj: https://momentjs.com/
  3. Rozważ zmianę innerHTML na coś bardziej wysublimowanego. np: .textContent( )

Powodzenia!

1 użytkowników online, w tym zalogowanych: 0, gości: 1