Jump to content
Sign in to follow this  
frackowiakgfx

Animowane koła w zegarze

Recommended Posts

Witam, na mojej stronie CsMortem.pl zamieściłem zegar, który napisałem z poradnikiem js. Teraz mam problem ponieważ chciałbym dni, godziny, minuty i sekundy włożyc w okręgi a potem chciałbym dołożyc do tego animację w okręgu, że w sekundach koło zapełniało by się co sekundę, w minutach co minutę (tak jak idą wskazówki zegara). Myślę że ktoś tu może pomóc. Z góry dzięki ☺️

Share this post


Link to post

Dzięki wielkie, użyłem tego: https://codepen.io/lawrencealan/pen/cdwhm

 

Mam takie dwa pliki:

<!DOCTYPE HTML>
<html lang="pl">
<head>
   <meta charset="utf-8" />
   <title>CsMortem.pl - Otwarcie 6 maja 2017!</title>
   <meta name="description" content="Przedstrona" />
   <meta name="keywords" content="CS, forum, forum cs, siec serwerów, serwery cs, hosting www, hosting gier, csmortem, mortem cs, cs 1.6, cs go, call of duty, forum gier, forum serwery," />
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
   
   <link rel="stylesheet" href="style.css" type="text/css" />
   <link href='http://fonts.googleapis.com/css?family=Oxygen&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<head> 

<body>
<script type="text/javascript">

	var ringer = {
  //countdown_to: "10/31/2014",
  countdown_to: "10/31/2016",
  rings: {
    'DAYS': { 
      s: 86400000, // mseconds in a day,
      max: 365
    },
    'HOURS': {
      s: 3600000, // mseconds per hour,
      max: 24
    },
    'MINUTES': {
      s: 60000, // mseconds per minute
      max: 60
    },
    'SECONDS': {
      s: 1000,
      max: 60
    },
    'MICROSEC': {
      s: 10,
      max: 100
    }
   },
  r_count: 5,
  r_spacing: 10, // px
  r_size: 100, // px
  r_thickness: 2, // px
  update_interval: 11, // ms
    
    
  init: function(){
   
    $r = ringer;
    $r.cvs = document.createElement('canvas'); 
    
    $r.size = { 
      w: ($r.r_size + $r.r_thickness) * $r.r_count + ($r.r_spacing*($r.r_count-1)), 
      h: ($r.r_size + $r.r_thickness) 
    };
    


    $r.cvs.setAttribute('width',$r.size.w);           
    $r.cvs.setAttribute('height',$r.size.h);
    $r.ctx = $r.cvs.getContext('2d');
    $(document.body).append($r.cvs);
    $r.cvs = $($r.cvs);    
    $r.ctx.textAlign = 'center';
    $r.actual_size = $r.r_size + $r.r_thickness;
    $r.countdown_to_time = new Date($r.countdown_to).getTime();
    $r.cvs.css({ width: $r.size.w+"px", height: $r.size.h+"px" });
    $r.go();
  },
  ctx: null,
  go: function(){
    var idx=0;
    
    $r.time = (new Date().getTime()) - $r.countdown_to_time;
    
    
    for(var r_key in $r.rings) $r.unit(idx++,r_key,$r.rings[r_key]);      
    
    setTimeout($r.go,$r.update_interval);
  },
  unit: function(idx,label,ring) {
    var x,y, value, ring_secs = ring.s;
    value = parseFloat($r.time/ring_secs);
    $r.time-=Math.round(parseInt(value)) * ring_secs;
    value = Math.abs(value);
    
    x = ($r.r_size*.5 + $r.r_thickness*.5);
    x +=+(idx*($r.r_size+$r.r_spacing+$r.r_thickness));
    y = $r.r_size*.5;
    y += $r.r_thickness*.5;

    
    // calculate arc end angle
    var degrees = 360-(value / ring.max) * 360.0;
    var endAngle = degrees * (Math.PI / 180);
    
    $r.ctx.save();

    $r.ctx.translate(x,y);
    $r.ctx.clearRect($r.actual_size*-0.5,$r.actual_size*-0.5,$r.actual_size,$r.actual_size);

    // first circle
    $r.ctx.strokeStyle = "rgba(128,128,128,0.2)";
    $r.ctx.beginPath();
    $r.ctx.arc(0,0,$r.r_size/2,0,2 * Math.PI, 2);
    $r.ctx.lineWidth =$r.r_thickness;
    $r.ctx.stroke();
   
    // second circle
    $r.ctx.strokeStyle = "rgba(253, 128, 1, 0.9)";
    $r.ctx.beginPath();
    $r.ctx.arc(0,0,$r.r_size/2,0,endAngle, 1);
    $r.ctx.lineWidth =$r.r_thickness;
    $r.ctx.stroke();
    
    // label
    $r.ctx.fillStyle = "#ffffff";
   
    $r.ctx.font = '12px Helvetica';
    $r.ctx.fillText(label, 0, 23);
    $r.ctx.fillText(label, 0, 23);   
    
    $r.ctx.font = 'bold 40px Helvetica';
    $r.ctx.fillText(Math.floor(value), 0, 10);
    
    $r.ctx.restore();
  }
}

ringer.init();
</script>



</body>
</html>

I CSS

@import compass

body,html
  width: 100%
  height: 100%
  margin: 0

html
  display: table

canvas
  width: 900px
  height: 200px
  display: block
  position: relative
  background: transparent
  margin: 40px auto

body 
  background: #000000
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/12399/free-pumpkin-wallpaper-25771-26455-hd-wallpapers.jpg')
  background-position: top center
  background-size: cover
  color: #fff
  margin: 0
  padding: 0
  overflow: hidden
  display: table-cell
  vertical-align: middle
  text-align: center

Tak jak tam pisze, a po wejściu na CsMortem.pl nic się nie wyświetla.

Share this post


Link to post

masz plik css a ten styl to sass - także odpowiedź już znasz

podmień zawartość style.css na to:

Spoiler

body, html {
  width: 100%;
  height: 100%;
  margin: 0;
}

html {
  display: table;
}

canvas {
  width: 900px;
  height: 200px;
  display: block;
  position: relative;
  background: transparent;
  margin: 40px auto;
}

body {
  background: #000000;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/12399/free-pumpkin-wallpaper-25771-26455-hd-wallpapers.jpg");
  background-position: top center;
  background-size: cover;
  color: #fff;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

 

 

  • Like 1

Share this post


Link to post

To co masz w CSSie, to nie jest CSS... Poza tym pytanie ode mnie: masz umieszczony znacznik <canvas> w HTMLu?

  • Like 2

Share this post


Link to post
1 minutę temu, fraceq8_design napisał:

pomiędzy skryptem go umieścic?

Umieszcza się go tam, gdzie się chce wyrysować coś. Więc wrzuć go tam, gdzie chcesz zobaczyć zegar.

  • Like 1

Share this post


Link to post

A masz podpięte JQuery? Inaczej Ci nie zadziała.

Dodaj to <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> pomiędzy <head> a </head>

  • Like 1

Share this post


Link to post
3 minuty temu, Mativve napisał:

A masz podpięte JQuery? Inaczej Ci nie zadziała.

Rysowanie w canvas działa bez biblioteki, czysty JS.

  • Like 1

Share this post


Link to post
1 minutę temu, Salva napisał:

Rysowanie w canvas działa bez biblioteki, czysty JS.

Hmm no to dziwnie bo u mnie też nie działało a gdy dodałem bibliotekę JQ to zadziałało 

  • Like 1

Share this post


Link to post
3 minuty temu, Mativve napisał:

dodałem bibliotekę JQ to zadziałało

Teraz zauważyłem (wcześniej się nie zagłębiałem), że skrypt wykorzystuje jQ, ale samo rysowanie jest w czystym JSie.

  • Like 2

Share this post


Link to post

Dzięki panowie działa, a napiszecie jeszcze szybko co zrobić żeby czas leciał w dół czyli odliczanie do 6 maja??

 

Share this post


Link to post
countdown_to: "10/31/2016",

Zamieniasz analogicznie na datę taką jaką chcesz do odliczenia

  • Like 1

Share this post


Link to post
Guest chrumcio

Dobrze ustawiłeś?

mm/dd/yy

Mi odlicza w dół

js

Cytuj

var ringer = {
  //countdown_to: "10/31/2014",
  countdown_to: "04/23/2018",
  rings: {
    'DAYS': { 
      s: 86400000, // mseconds in a day,
      max: 365
    },
    'HOURS': {
      s: 3600000, // mseconds per hour,
      max: 24
    },
    'MINUTES': {
      s: 60000, // mseconds per minute
      max: 60
    },
    'SECONDS': {
      s: 1000,
      max: 60
    },
    'MICROSEC': {
      s: 10,
      max: 100
    }
   },
  r_count: 5,
  r_spacing: 10, // px
  r_size: 100, // px
  r_thickness: 2, // px
  update_interval: 11, // ms
    
    
  init: function(){
   
    $r = ringer;
    $r.cvs = document.createElement('canvas'); 
    
    $r.size = { 
      w: ($r.r_size + $r.r_thickness) * $r.r_count + ($r.r_spacing*($r.r_count-1)), 
      h: ($r.r_size + $r.r_thickness) 
    };
    


    $r.cvs.setAttribute('width',$r.size.w);           
    $r.cvs.setAttribute('height',$r.size.h);
    $r.ctx = $r.cvs.getContext('2d');
    $(document.body).append($r.cvs);
    $r.cvs = $($r.cvs);    
    $r.ctx.textAlign = 'center';
    $r.actual_size = $r.r_size + $r.r_thickness;
    $r.countdown_to_time = new Date($r.countdown_to).getTime();
    $r.cvs.css({ width: $r.size.w+"px", height: $r.size.h+"px" });
    $r.go();
  },
  ctx: null,
  go: function(){
    var idx=0;
    
    $r.time = (new Date().getTime()) - $r.countdown_to_time;
    
    
    for(var r_key in $r.rings) $r.unit(idx++,r_key,$r.rings[r_key]);      
    
    setTimeout($r.go,$r.update_interval);
  },
  unit: function(idx,label,ring) {
    var x,y, value, ring_secs = ring.s;
    value = parseFloat($r.time/ring_secs);
    $r.time-=Math.round(parseInt(value)) * ring_secs;
    value = Math.abs(value);
    
    x = ($r.r_size*.5 + $r.r_thickness*.5);
    x +=+(idx*($r.r_size+$r.r_spacing+$r.r_thickness));
    y = $r.r_size*.5;
    y += $r.r_thickness*.5;

    
    // calculate arc end angle
    var degrees = 360-(value / ring.max) * 360.0;
    var endAngle = degrees * (Math.PI / 180);
    
    $r.ctx.save();

    $r.ctx.translate(x,y);
    $r.ctx.clearRect($r.actual_size*-0.5,$r.actual_size*-0.5,$r.actual_size,$r.actual_size);

    // first circle
    $r.ctx.strokeStyle = "rgba(128,128,128,0.2)";
    $r.ctx.beginPath();
    $r.ctx.arc(0,0,$r.r_size/2,0,2 * Math.PI, 2);
    $r.ctx.lineWidth =$r.r_thickness;
    $r.ctx.stroke();
   
    // second circle
    $r.ctx.strokeStyle = "rgba(253, 128, 1, 0.9)";
    $r.ctx.beginPath();
    $r.ctx.arc(0,0,$r.r_size/2,0,endAngle, 1);
    $r.ctx.lineWidth =$r.r_thickness;
    $r.ctx.stroke();
    
    // label
    $r.ctx.fillStyle = "#ffffff";
   
    $r.ctx.font = '12px Helvetica';
    $r.ctx.fillText(label, 0, 23);
    $r.ctx.fillText(label, 0, 23);   
    
    $r.ctx.font = 'bold 40px Helvetica';
    $r.ctx.fillText(Math.floor(value), 0, 10);
    
    $r.ctx.restore();
  }
}

ringer.init();

Tam gdzie masz "//countdown_to: "10/31/2014"," możesz to usunąć.

Edited by chrumcio

Share this post


Link to post

data ma się tak prezentować:  countdown_to: "5/4/2017", numery dat bez tzw: zera wiodącego a poszczególne cyfry oznaczają miesiąc/dzień/rok

  • Like 1

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Create a New Account. It’s free and easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
×
×
  • Create New...