How do i make a javascipt automatic background slider?

-1

I want my background image to be an automatic slider of 4 seconds for each slide and the slider should auto stop after the last slide.

I have 2 slides in total(slide_1.png & slide_2.png).

So basically what i am trying to achieve here is a google ads banner of size 300x600 which should not be above 150kb in a zipped folder folder

i want my banner to have a real-time clock and two images as background slides

<!DOCTYPE html>

<html>



<head>

<meta charset="utf-8">

    <title>300x600</title>

    <meta name="ad.size" content="width=300, height=600">

</head>







<body>





<style>

body, html {

    height: 600px;

    width: 300px;

    background-image: url('slide_2.png');

    background-repeat: no-repeat;

    background-position:center

    left:100%;

    top:100%;

    margin-left:0px;

    margin-top:0px

  







</style>







<canvas id="canvas" width="226" height="226"

style="position: absolute;

    left: 41px;

    top: 321px;" >

</canvas>







<script>

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

var radius = canvas.height / 2;

ctx.translate(radius, radius);

radius = radius * 0.50

setInterval(drawClock, 1000);



function drawClock() {

  drawFace(ctx, radius);

  drawNumbers(ctx, radius);

  drawTime(ctx, radius);

}



function drawFace(ctx, radius) {

  var grad;

  ctx.beginPath();

  ctx.arc(0, 0, radius, 0, 2*Math.PI);

  ctx.fillStyle = 'white';

  ctx.fill();

  grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);

  grad.addColorStop(0, '#333');

  grad.addColorStop(0.5, 'white');

  grad.addColorStop(1, '#333');

  ctx.strokeStyle = grad;

  ctx.lineWidth = radius*0.1;

  ctx.stroke();

  ctx.beginPath();

  ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);

  ctx.fillStyle = '#333';

  ctx.fill();

}



function drawNumbers(ctx, radius) {

  var ang;

  var num;

  ctx.font = radius*0.15 + "px arial";

  ctx.textBaseline="middle";

  ctx.textAlign="center";

  for(num = 1; num < 13; num++){

    ang = num * Math.PI / 6;

    ctx.rotate(ang);

    ctx.translate(0, -radius*0.85);

    ctx.rotate(-ang);

    ctx.fillText(num.toString(), 0, 0);

    ctx.rotate(ang);

    ctx.translate(0, radius*0.85);

    ctx.rotate(-ang);

  }

}



function drawTime(ctx, radius){

    var now = new Date();

    var hour = now.getHours();

    var minute = now.getMinutes();

    var second = now.getSeconds();

    //hour

    hour=hour%12;

    hour=(hour*Math.PI/6)+

    (minute*Math.PI/(6*60))+

    (second*Math.PI/(360*60));

    drawHand(ctx, hour, radius*0.5, radius*0.07);

    //minute

    minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));

    drawHand(ctx, minute, radius*0.8, radius*0.07);

    // second

    second=(second*Math.PI/30);

    drawHand(ctx, second, radius*0.9, radius*0.02);

}



function drawHand(ctx, pos, length, width) {

    ctx.beginPath();

    ctx.lineWidth = width;

    ctx.lineCap = "round";

    ctx.moveTo(0,0);

    ctx.rotate(pos);

    ctx.lineTo(0, -length);

    ctx.stroke();

    ctx.rotate(-pos);

}

</script>



</body>

</html>

asked Nov 25 '18 at 10:27

Tchemedje Rhonnel Yvan

143

1

Sounds good, what problem are you having?

– Keith
Nov 25 '18 at 10:29

at this time the background image is static i want it to be an animated slideshow with a total of two slides each that will last for 4 seconds then stop at the last slide

– Tchemedje Rhonnel Yvan
Nov 25 '18 at 10:32

what kind of animation do you need?

– Smollet777
Nov 25 '18 at 11:08

Fade out animation for the first slide after 4 seconds and the and the last slide should remain. in javascript

– Tchemedje Rhonnel Yvan
Nov 25 '18 at 11:36

1

look into CSS animations

– Zohir Salak
Nov 25 '18 at 11:48

|
show 3 more comments

-1

I want my background image to be an automatic slider of 4 seconds for each slide and the slider should auto stop after the last slide.

I have 2 slides in total(slide_1.png & slide_2.png).

So basically what i am trying to achieve here is a google ads banner of size 300x600 which should not be above 150kb in a zipped folder folder

i want my banner to have a real-time clock and two images as background slides

<!DOCTYPE html>

<html>



<head>

<meta charset="utf-8">

    <title>300x600</title>

    <meta name="ad.size" content="width=300, height=600">

</head>







<body>





<style>

body, html {

    height: 600px;

    width: 300px;

    background-image: url('slide_2.png');

    background-repeat: no-repeat;

    background-position:center

    left:100%;

    top:100%;

    margin-left:0px;

    margin-top:0px

  







</style>







<canvas id="canvas" width="226" height="226"

style="position: absolute;

    left: 41px;

    top: 321px;" >

</canvas>







<script>

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

var radius = canvas.height / 2;

ctx.translate(radius, radius);

radius = radius * 0.50

setInterval(drawClock, 1000);



function drawClock() {

  drawFace(ctx, radius);

  drawNumbers(ctx, radius);

  drawTime(ctx, radius);

}



function drawFace(ctx, radius) {

  var grad;

  ctx.beginPath();

  ctx.arc(0, 0, radius, 0, 2*Math.PI);

  ctx.fillStyle = 'white';

  ctx.fill();

  grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);

  grad.addColorStop(0, '#333');

  grad.addColorStop(0.5, 'white');

  grad.addColorStop(1, '#333');

  ctx.strokeStyle = grad;

  ctx.lineWidth = radius*0.1;

  ctx.stroke();

  ctx.beginPath();

  ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);

  ctx.fillStyle = '#333';

  ctx.fill();

}



function drawNumbers(ctx, radius) {

  var ang;

  var num;

  ctx.font = radius*0.15 + "px arial";

  ctx.textBaseline="middle";

  ctx.textAlign="center";

  for(num = 1; num < 13; num++){

    ang = num * Math.PI / 6;

    ctx.rotate(ang);

    ctx.translate(0, -radius*0.85);

    ctx.rotate(-ang);

    ctx.fillText(num.toString(), 0, 0);

    ctx.rotate(ang);

    ctx.translate(0, radius*0.85);

    ctx.rotate(-ang);

  }

}



function drawTime(ctx, radius){

    var now = new Date();

    var hour = now.getHours();

    var minute = now.getMinutes();

    var second = now.getSeconds();

    //hour

    hour=hour%12;

    hour=(hour*Math.PI/6)+

    (minute*Math.PI/(6*60))+

    (second*Math.PI/(360*60));

    drawHand(ctx, hour, radius*0.5, radius*0.07);

    //minute

    minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));

    drawHand(ctx, minute, radius*0.8, radius*0.07);

    // second

    second=(second*Math.PI/30);

    drawHand(ctx, second, radius*0.9, radius*0.02);

}



function drawHand(ctx, pos, length, width) {

    ctx.beginPath();

    ctx.lineWidth = width;

    ctx.lineCap = "round";

    ctx.moveTo(0,0);

    ctx.rotate(pos);

    ctx.lineTo(0, -length);

    ctx.stroke();

    ctx.rotate(-pos);

}

</script>



</body>

</html>

asked Nov 25 '18 at 10:27

Tchemedje Rhonnel Yvan

143

1

Sounds good, what problem are you having?

– Keith
Nov 25 '18 at 10:29

at this time the background image is static i want it to be an animated slideshow with a total of two slides each that will last for 4 seconds then stop at the last slide

– Tchemedje Rhonnel Yvan
Nov 25 '18 at 10:32

what kind of animation do you need?

– Smollet777
Nov 25 '18 at 11:08

Fade out animation for the first slide after 4 seconds and the and the last slide should remain. in javascript

– Tchemedje Rhonnel Yvan
Nov 25 '18 at 11:36

1

look into CSS animations

– Zohir Salak
Nov 25 '18 at 11:48

|
show 3 more comments

-1

I want my background image to be an automatic slider of 4 seconds for each slide and the slider should auto stop after the last slide.

I have 2 slides in total(slide_1.png & slide_2.png).

So basically what i am trying to achieve here is a google ads banner of size 300x600 which should not be above 150kb in a zipped folder folder

i want my banner to have a real-time clock and two images as background slides

<!DOCTYPE html>

<html>



<head>

<meta charset="utf-8">

    <title>300x600</title>

    <meta name="ad.size" content="width=300, height=600">

</head>







<body>





<style>

body, html {

    height: 600px;

    width: 300px;

    background-image: url('slide_2.png');

    background-repeat: no-repeat;

    background-position:center

    left:100%;

    top:100%;

    margin-left:0px;

    margin-top:0px

  







</style>







<canvas id="canvas" width="226" height="226"

style="position: absolute;

    left: 41px;

    top: 321px;" >

</canvas>







<script>

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

var radius = canvas.height / 2;

ctx.translate(radius, radius);

radius = radius * 0.50

setInterval(drawClock, 1000);



function drawClock() {

  drawFace(ctx, radius);

  drawNumbers(ctx, radius);

  drawTime(ctx, radius);

}



function drawFace(ctx, radius) {

  var grad;

  ctx.beginPath();

  ctx.arc(0, 0, radius, 0, 2*Math.PI);

  ctx.fillStyle = 'white';

  ctx.fill();

  grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);

  grad.addColorStop(0, '#333');

  grad.addColorStop(0.5, 'white');

  grad.addColorStop(1, '#333');

  ctx.strokeStyle = grad;

  ctx.lineWidth = radius*0.1;

  ctx.stroke();

  ctx.beginPath();

  ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);

  ctx.fillStyle = '#333';

  ctx.fill();

}



function drawNumbers(ctx, radius) {

  var ang;

  var num;

  ctx.font = radius*0.15 + "px arial";

  ctx.textBaseline="middle";

  ctx.textAlign="center";

  for(num = 1; num < 13; num++){

    ang = num * Math.PI / 6;

    ctx.rotate(ang);

    ctx.translate(0, -radius*0.85);

    ctx.rotate(-ang);

    ctx.fillText(num.toString(), 0, 0);

    ctx.rotate(ang);

    ctx.translate(0, radius*0.85);

    ctx.rotate(-ang);

  }

}



function drawTime(ctx, radius){

    var now = new Date();

    var hour = now.getHours();

    var minute = now.getMinutes();

    var second = now.getSeconds();

    //hour

    hour=hour%12;

    hour=(hour*Math.PI/6)+

    (minute*Math.PI/(6*60))+

    (second*Math.PI/(360*60));

    drawHand(ctx, hour, radius*0.5, radius*0.07);

    //minute

    minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));

    drawHand(ctx, minute, radius*0.8, radius*0.07);

    // second

    second=(second*Math.PI/30);

    drawHand(ctx, second, radius*0.9, radius*0.02);

}



function drawHand(ctx, pos, length, width) {

    ctx.beginPath();

    ctx.lineWidth = width;

    ctx.lineCap = "round";

    ctx.moveTo(0,0);

    ctx.rotate(pos);

    ctx.lineTo(0, -length);

    ctx.stroke();

    ctx.rotate(-pos);

}

</script>



</body>

</html>

asked Nov 25 '18 at 10:27

Tchemedje Rhonnel Yvan

143

I want my background image to be an automatic slider of 4 seconds for each slide and the slider should auto stop after the last slide.

I have 2 slides in total(slide_1.png & slide_2.png).

So basically what i am trying to achieve here is a google ads banner of size 300x600 which should not be above 150kb in a zipped folder folder

i want my banner to have a real-time clock and two images as background slides

<!DOCTYPE html>

<html>



<head>

<meta charset="utf-8">

    <title>300x600</title>

    <meta name="ad.size" content="width=300, height=600">

</head>







<body>





<style>

body, html {

    height: 600px;

    width: 300px;

    background-image: url('slide_2.png');

    background-repeat: no-repeat;

    background-position:center

    left:100%;

    top:100%;

    margin-left:0px;

    margin-top:0px

  







</style>







<canvas id="canvas" width="226" height="226"

style="position: absolute;

    left: 41px;

    top: 321px;" >

</canvas>







<script>

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

var radius = canvas.height / 2;

ctx.translate(radius, radius);

radius = radius * 0.50

setInterval(drawClock, 1000);



function drawClock() {

  drawFace(ctx, radius);

  drawNumbers(ctx, radius);

  drawTime(ctx, radius);

}



function drawFace(ctx, radius) {

  var grad;

  ctx.beginPath();

  ctx.arc(0, 0, radius, 0, 2*Math.PI);

  ctx.fillStyle = 'white';

  ctx.fill();

  grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);

  grad.addColorStop(0, '#333');

  grad.addColorStop(0.5, 'white');

  grad.addColorStop(1, '#333');

  ctx.strokeStyle = grad;

  ctx.lineWidth = radius*0.1;

  ctx.stroke();

  ctx.beginPath();

  ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);

  ctx.fillStyle = '#333';

  ctx.fill();

}



function drawNumbers(ctx, radius) {

  var ang;

  var num;

  ctx.font = radius*0.15 + "px arial";

  ctx.textBaseline="middle";

  ctx.textAlign="center";

  for(num = 1; num < 13; num++){

    ang = num * Math.PI / 6;

    ctx.rotate(ang);

    ctx.translate(0, -radius*0.85);

    ctx.rotate(-ang);

    ctx.fillText(num.toString(), 0, 0);

    ctx.rotate(ang);

    ctx.translate(0, radius*0.85);

    ctx.rotate(-ang);

  }

}



function drawTime(ctx, radius){

    var now = new Date();

    var hour = now.getHours();

    var minute = now.getMinutes();

    var second = now.getSeconds();

    //hour

    hour=hour%12;

    hour=(hour*Math.PI/6)+

    (minute*Math.PI/(6*60))+

    (second*Math.PI/(360*60));

    drawHand(ctx, hour, radius*0.5, radius*0.07);

    //minute

    minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));

    drawHand(ctx, minute, radius*0.8, radius*0.07);

    // second

    second=(second*Math.PI/30);

    drawHand(ctx, second, radius*0.9, radius*0.02);

}



function drawHand(ctx, pos, length, width) {

    ctx.beginPath();

    ctx.lineWidth = width;

    ctx.lineCap = "round";

    ctx.moveTo(0,0);

    ctx.rotate(pos);

    ctx.lineTo(0, -length);

    ctx.stroke();

    ctx.rotate(-pos);

}

</script>



</body>

</html>

<!DOCTYPE html>

<html>



<head>

<meta charset="utf-8">

    <title>300x600</title>

    <meta name="ad.size" content="width=300, height=600">

</head>







<body>





<style>

body, html {

    height: 600px;

    width: 300px;

    background-image: url('slide_2.png');

    background-repeat: no-repeat;

    background-position:center

    left:100%;

    top:100%;

    margin-left:0px;

    margin-top:0px

  







</style>







<canvas id="canvas" width="226" height="226"

style="position: absolute;

    left: 41px;

    top: 321px;" >

</canvas>







<script>

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

var radius = canvas.height / 2;

ctx.translate(radius, radius);

radius = radius * 0.50

setInterval(drawClock, 1000);



function drawClock() {

  drawFace(ctx, radius);

  drawNumbers(ctx, radius);

  drawTime(ctx, radius);

}



function drawFace(ctx, radius) {

  var grad;

  ctx.beginPath();

  ctx.arc(0, 0, radius, 0, 2*Math.PI);

  ctx.fillStyle = 'white';

  ctx.fill();

  grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);

  grad.addColorStop(0, '#333');

  grad.addColorStop(0.5, 'white');

  grad.addColorStop(1, '#333');

  ctx.strokeStyle = grad;

  ctx.lineWidth = radius*0.1;

  ctx.stroke();

  ctx.beginPath();

  ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);

  ctx.fillStyle = '#333';

  ctx.fill();

}



function drawNumbers(ctx, radius) {

  var ang;

  var num;

  ctx.font = radius*0.15 + "px arial";

  ctx.textBaseline="middle";

  ctx.textAlign="center";

  for(num = 1; num < 13; num++){

    ang = num * Math.PI / 6;

    ctx.rotate(ang);

    ctx.translate(0, -radius*0.85);

    ctx.rotate(-ang);

    ctx.fillText(num.toString(), 0, 0);

    ctx.rotate(ang);

    ctx.translate(0, radius*0.85);

    ctx.rotate(-ang);

  }

}



function drawTime(ctx, radius){

    var now = new Date();

    var hour = now.getHours();

    var minute = now.getMinutes();

    var second = now.getSeconds();

    //hour

    hour=hour%12;

    hour=(hour*Math.PI/6)+

    (minute*Math.PI/(6*60))+

    (second*Math.PI/(360*60));

    drawHand(ctx, hour, radius*0.5, radius*0.07);

    //minute

    minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));

    drawHand(ctx, minute, radius*0.8, radius*0.07);

    // second

    second=(second*Math.PI/30);

    drawHand(ctx, second, radius*0.9, radius*0.02);

}



function drawHand(ctx, pos, length, width) {

    ctx.beginPath();

    ctx.lineWidth = width;

    ctx.lineCap = "round";

    ctx.moveTo(0,0);

    ctx.rotate(pos);

    ctx.lineTo(0, -length);

    ctx.stroke();

    ctx.rotate(-pos);

}

</script>



</body>

</html>

<!DOCTYPE html>

<html>



<head>

<meta charset="utf-8">

    <title>300x600</title>

    <meta name="ad.size" content="width=300, height=600">

</head>







<body>





<style>

body, html {

    height: 600px;

    width: 300px;

    background-image: url('slide_2.png');

    background-repeat: no-repeat;

    background-position:center

    left:100%;

    top:100%;

    margin-left:0px;

    margin-top:0px

  







</style>







<canvas id="canvas" width="226" height="226"

style="position: absolute;

    left: 41px;

    top: 321px;" >

</canvas>







<script>

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

var radius = canvas.height / 2;

ctx.translate(radius, radius);

radius = radius * 0.50

setInterval(drawClock, 1000);



function drawClock() {

  drawFace(ctx, radius);

  drawNumbers(ctx, radius);

  drawTime(ctx, radius);

}



function drawFace(ctx, radius) {

  var grad;

  ctx.beginPath();

  ctx.arc(0, 0, radius, 0, 2*Math.PI);

  ctx.fillStyle = 'white';

  ctx.fill();

  grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);

  grad.addColorStop(0, '#333');

  grad.addColorStop(0.5, 'white');

  grad.addColorStop(1, '#333');

  ctx.strokeStyle = grad;

  ctx.lineWidth = radius*0.1;

  ctx.stroke();

  ctx.beginPath();

  ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);

  ctx.fillStyle = '#333';

  ctx.fill();

}



function drawNumbers(ctx, radius) {

  var ang;

  var num;

  ctx.font = radius*0.15 + "px arial";

  ctx.textBaseline="middle";

  ctx.textAlign="center";

  for(num = 1; num < 13; num++){

    ang = num * Math.PI / 6;

    ctx.rotate(ang);

    ctx.translate(0, -radius*0.85);

    ctx.rotate(-ang);

    ctx.fillText(num.toString(), 0, 0);

    ctx.rotate(ang);

    ctx.translate(0, radius*0.85);

    ctx.rotate(-ang);

  }

}



function drawTime(ctx, radius){

    var now = new Date();

    var hour = now.getHours();

    var minute = now.getMinutes();

    var second = now.getSeconds();

    //hour

    hour=hour%12;

    hour=(hour*Math.PI/6)+

    (minute*Math.PI/(6*60))+

    (second*Math.PI/(360*60));

    drawHand(ctx, hour, radius*0.5, radius*0.07);

    //minute

    minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));

    drawHand(ctx, minute, radius*0.8, radius*0.07);

    // second

    second=(second*Math.PI/30);

    drawHand(ctx, second, radius*0.9, radius*0.02);

}



function drawHand(ctx, pos, length, width) {

    ctx.beginPath();

    ctx.lineWidth = width;

    ctx.lineCap = "round";

    ctx.moveTo(0,0);

    ctx.rotate(pos);

    ctx.lineTo(0, -length);

    ctx.stroke();

    ctx.rotate(-pos);

}

</script>



</body>

</html>

javascript html css

asked Nov 25 '18 at 10:27

Tchemedje Rhonnel Yvan

143

asked Nov 25 '18 at 10:27

Tchemedje Rhonnel Yvan

143

asked Nov 25 '18 at 10:27

Tchemedje Rhonnel Yvan

143

asked Nov 25 '18 at 10:27

Tchemedje Rhonnel Yvan

143

asked Nov 25 '18 at 10:27

Tchemedje Rhonnel Yvan

143

1

Sounds good, what problem are you having?

– Keith
Nov 25 '18 at 10:29

at this time the background image is static i want it to be an animated slideshow with a total of two slides each that will last for 4 seconds then stop at the last slide

– Tchemedje Rhonnel Yvan
Nov 25 '18 at 10:32

what kind of animation do you need?

– Smollet777
Nov 25 '18 at 11:08

Fade out animation for the first slide after 4 seconds and the and the last slide should remain. in javascript

– Tchemedje Rhonnel Yvan
Nov 25 '18 at 11:36

1

look into CSS animations

– Zohir Salak
Nov 25 '18 at 11:48

|
show 3 more comments

1

Sounds good, what problem are you having?

– Keith
Nov 25 '18 at 10:29

at this time the background image is static i want it to be an animated slideshow with a total of two slides each that will last for 4 seconds then stop at the last slide

– Tchemedje Rhonnel Yvan
Nov 25 '18 at 10:32

what kind of animation do you need?

– Smollet777
Nov 25 '18 at 11:08

Fade out animation for the first slide after 4 seconds and the and the last slide should remain. in javascript

– Tchemedje Rhonnel Yvan
Nov 25 '18 at 11:36

1

look into CSS animations

– Zohir Salak
Nov 25 '18 at 11:48

Sounds good, what problem are you having?

– Keith
Nov 25 '18 at 10:29

at this time the background image is static i want it to be an animated slideshow with a total of two slides each that will last for 4 seconds then stop at the last slide

– Tchemedje Rhonnel Yvan
Nov 25 '18 at 10:32

what kind of animation do you need?

– Smollet777
Nov 25 '18 at 11:08

Fade out animation for the first slide after 4 seconds and the and the last slide should remain. in javascript

– Tchemedje Rhonnel Yvan
Nov 25 '18 at 11:36

look into CSS animations

– Zohir Salak
Nov 25 '18 at 11:48

|
show 3 more comments

3 Answers
3

active

oldest

votes

change your code to this:

<!DOCTYPE html>

<html>



<head>

<meta charset="utf-8">

    <title>300x600</title>

    <meta name="ad.size" content="width=300, height=600">

</head>







<body>





<style>

body, html {

    height: 600px;

    width: 300px;

    background-image: url('slide_2.png');

    background-repeat: no-repeat;

    background-position:center

    left:100%;

    top:100%;

    margin-left:0px;

    margin-top:0px

  







</style>







<canvas id="canvas" width="226" height="226"

style="position: absolute;

    left: 41px;

    top: 321px;" >

</canvas>







<script>



var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

var radius = canvas.height / 2;

var slideNumber = 4; // total number of slides

var slideIndex = 0; //index of current slide

var interval = setInterval(changeBackground, 4000);



ctx.translate(radius, radius);

radius = radius * 0.50

setInterval(drawClock, 1000);



    function changeBackground() {

        slideIndex += 1;

        if(slideIndex > slideNumber){

             clearInterval(interval);

             return;

        }

        document.body.style.backgroundImage = "url('https://picsum.photos/200/300/?image=" + slideIndex + "')"; 

        console.log(slideIndex);

    }



function drawClock() {

  drawFace(ctx, radius);

  drawNumbers(ctx, radius);

  drawTime(ctx, radius);

}



function drawFace(ctx, radius) {

  var grad;

  ctx.beginPath();

  ctx.arc(0, 0, radius, 0, 2*Math.PI);

  ctx.fillStyle = 'white';

  ctx.fill();

  grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);

  grad.addColorStop(0, '#333');

  grad.addColorStop(0.5, 'white');

  grad.addColorStop(1, '#333');

  ctx.strokeStyle = grad;

  ctx.lineWidth = radius*0.1;

  ctx.stroke();

  ctx.beginPath();

  ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);

  ctx.fillStyle = '#333';

  ctx.fill();

}



function drawNumbers(ctx, radius) {

  var ang;

  var num;

  ctx.font = radius*0.15 + "px arial";

  ctx.textBaseline="middle";

  ctx.textAlign="center";

  for(num = 1; num < 13; num++){

    ang = num * Math.PI / 6;

    ctx.rotate(ang);

    ctx.translate(0, -radius*0.85);

    ctx.rotate(-ang);

    ctx.fillText(num.toString(), 0, 0);

    ctx.rotate(ang);

    ctx.translate(0, radius*0.85);

    ctx.rotate(-ang);

  }

}



function drawTime(ctx, radius){

    var now = new Date();

    var hour = now.getHours();

    var minute = now.getMinutes();

    var second = now.getSeconds();

    //hour

    hour=hour%12;

    hour=(hour*Math.PI/6)+

    (minute*Math.PI/(6*60))+

    (second*Math.PI/(360*60));

    drawHand(ctx, hour, radius*0.5, radius*0.07);

    //minute

    minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));

    drawHand(ctx, minute, radius*0.8, radius*0.07);

    // second

    second=(second*Math.PI/30);

    drawHand(ctx, second, radius*0.9, radius*0.02);

}



function drawHand(ctx, pos, length, width) {

    ctx.beginPath();

    ctx.lineWidth = width;

    ctx.lineCap = "round";

    ctx.moveTo(0,0);

    ctx.rotate(pos);

    ctx.lineTo(0, -length);

    ctx.stroke();

    ctx.rotate(-pos);

}

</script>



</body>

</html>

edited Nov 25 '18 at 12:54

answered Nov 25 '18 at 11:11

Arya11

1521113

i'm a bit lost, already that the second image isn't declared in the code

– Tchemedje Rhonnel Yvan
Nov 25 '18 at 11:38

@TchemedjeRhonnelYvan see if this helps.

– Arya11
Nov 25 '18 at 12:01

i have added the code to the script but there's no change

– Tchemedje Rhonnel Yvan
Nov 25 '18 at 12:13

@TchemedjeRhonnelYvan it works fine for me, though i've made a slight change but i'm sure it works.

– Arya11
Nov 25 '18 at 12:30

it still doesn't, can you share all the code maybe

– Tchemedje Rhonnel Yvan
Nov 25 '18 at 12:40

|
show 3 more comments

You can use CSS animation and pseudo elements.

<!DOCTYPE html>

<html>



<head>

  <meta charset="utf-8">

  <title>300x600</title>

  <meta name="ad.size" content="width=300, height=600">

</head>







<body>





  <style>

    body,

    html {

      height: 600px;

      width: 300px;

      top: 100%;

      margin-left: 0px;

      margin-top: 0px;

    }

    

    body:before,

    body:after {

      content: '';

      position: absolute;

      width: 100%;

      height: 100%;

      background-repeat: no-repeat;

      background-position: center left:100%;

    }

    

    body:before {

      background-image: url('https://picsum.photos/300/600?image=100');

      animation: fadeOut 1s linear 2s 1 forwards;

      -webkit-animation: fadeOut 1s linear 2s 1 forwards;

      -moz-animation: fadeOut 1s linear 2s 1 forwards;

      -o-animation: fadeOut 1s linear 2s 1 forwards;

    }

    

    body:after {

      background-image: url('https://picsum.photos/300/600?image=201');

      z-index: -1;

    }

    

    @-webkit-keyframes fadeOut {

      from {

        opacity: 1;

      }

      to {

        opacity: 0;

      }

    }

    

    @keyframes fadeOut {

      from {

        opacity: 1;

      }

      to {

        opacity: 0;

      }

    }

  </style>







  <canvas id="canvas" width="226" height="226" style="position: absolute;

    left: 41px;

    top: 0;">

</canvas>







  <script>

    var canvas = document.getElementById("canvas");

    var ctx = canvas.getContext("2d");

    var radius = canvas.height / 2;

    ctx.translate(radius, radius);

    radius = radius * 0.50

    setInterval(drawClock, 1000);



    function drawClock() {

      drawFace(ctx, radius);

      drawNumbers(ctx, radius);

      drawTime(ctx, radius);

    }



    function drawFace(ctx, radius) {

      var grad;

      ctx.beginPath();

      ctx.arc(0, 0, radius, 0, 2 * Math.PI);

      ctx.fillStyle = 'white';

      ctx.fill();

      grad = ctx.createRadialGradient(0, 0, radius * 0.95, 0, 0, radius * 1.05);

      grad.addColorStop(0, '#333');

      grad.addColorStop(0.5, 'white');

      grad.addColorStop(1, '#333');

      ctx.strokeStyle = grad;

      ctx.lineWidth = radius * 0.1;

      ctx.stroke();

      ctx.beginPath();

      ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);

      ctx.fillStyle = '#333';

      ctx.fill();

    }



    function drawNumbers(ctx, radius) {

      var ang;

      var num;

      ctx.font = radius * 0.15 + "px arial";

      ctx.textBaseline = "middle";

      ctx.textAlign = "center";

      for (num = 1; num < 13; num++) {

        ang = num * Math.PI / 6;

        ctx.rotate(ang);

        ctx.translate(0, -radius * 0.85);

        ctx.rotate(-ang);

        ctx.fillText(num.toString(), 0, 0);

        ctx.rotate(ang);

        ctx.translate(0, radius * 0.85);

        ctx.rotate(-ang);

      }

    }



    function drawTime(ctx, radius) {

      var now = new Date();

      var hour = now.getHours();

      var minute = now.getMinutes();

      var second = now.getSeconds();

      //hour

      hour = hour % 12;

      hour = (hour * Math.PI / 6) +

        (minute * Math.PI / (6 * 60)) +

        (second * Math.PI / (360 * 60));

      drawHand(ctx, hour, radius * 0.5, radius * 0.07);

      //minute

      minute = (minute * Math.PI / 30) + (second * Math.PI / (30 * 60));

      drawHand(ctx, minute, radius * 0.8, radius * 0.07);

      // second

      second = (second * Math.PI / 30);

      drawHand(ctx, second, radius * 0.9, radius * 0.02);

    }



    function drawHand(ctx, pos, length, width) {

      ctx.beginPath();

      ctx.lineWidth = width;

      ctx.lineCap = "round";

      ctx.moveTo(0, 0);

      ctx.rotate(pos);

      ctx.lineTo(0, -length);

      ctx.stroke();

      ctx.rotate(-pos);

    }

  </script>



</body>



</html>

edited Nov 25 '18 at 13:31

answered Nov 25 '18 at 12:10

Smollet777

1,34511015

the background image doesn't change

– Tchemedje Rhonnel Yvan
Nov 25 '18 at 12:49

@TchemedjeRhonnelYvan yes it is

– Smollet777
Nov 25 '18 at 12:54

do i have merged the code to one file, I put my two images in the placeholders but it doesn't

– Tchemedje Rhonnel Yvan
Nov 25 '18 at 13:26

can you maybe make it one file?

– Tchemedje Rhonnel Yvan
Nov 25 '18 at 13:27

@TchemedjeRhonnelYvan of course. Place that css code into your style tag. I updated the snippet

– Smollet777
Nov 25 '18 at 13:33

|
show 5 more comments

<!DOCTYPE html>

<html>



<head>

  <meta charset="utf-8">

  <title>300x600</title>

  <meta name="ad.size" content="width=300, height=600">

</head>







<body>





  <style>

    body,

    html {

      height: 600px;

      width: 300px;

      top: 100%;

      margin-left: 0px;

      margin-top: 0px;

    }

    

    body:before,

    body:after {

      content: '';

      position: absolute;

      width: 100%;

      height: 100%;

      background-repeat: no-repeat;

      background-position: center left:100%;

    }

    

    body:before {

      background-image: url('https://picsum.photos/300/600?image=100');

      animation: fadeOut 1s linear 2s 1 forwards;

      -webkit-animation: fadeOut 1s linear 2s 1 forwards;

      -moz-animation: fadeOut 1s linear 2s 1 forwards;

      -o-animation: fadeOut 1s linear 2s 1 forwards;

    }

    

    body:after {

      background-image: url('https://picsum.photos/300/600?image=201');

      z-index: -1;

    }

    

    @-webkit-keyframes fadeOut {

      from {

        opacity: 1;

      }

      to {

        opacity: 0;

      }

    }

    

    @keyframes fadeOut {

      from {

        opacity: 1;

      }

      to {

        opacity: 0;

      }

    }

  </style>







  <canvas id="canvas" width="226" height="226" style="position: absolute;

    left: 41px;

    top: 0;">

</canvas>







  <script>

    var canvas = document.getElementById("canvas");

    var ctx = canvas.getContext("2d");

    var radius = canvas.height / 2;

    ctx.translate(radius, radius);

    radius = radius * 0.50

    setInterval(drawClock, 1000);



    function drawClock() {

      drawFace(ctx, radius);

      drawNumbers(ctx, radius);

      drawTime(ctx, radius);

    }



    function drawFace(ctx, radius) {

      var grad;

      ctx.beginPath();

      ctx.arc(0, 0, radius, 0, 2 * Math.PI);

      ctx.fillStyle = 'white';

      ctx.fill();

      grad = ctx.createRadialGradient(0, 0, radius * 0.95, 0, 0, radius * 1.05);

      grad.addColorStop(0, '#333');

      grad.addColorStop(0.5, 'white');

      grad.addColorStop(1, '#333');

      ctx.strokeStyle = grad;

      ctx.lineWidth = radius * 0.1;

      ctx.stroke();

      ctx.beginPath();

      ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);

      ctx.fillStyle = '#333';

      ctx.fill();

    }



    function drawNumbers(ctx, radius) {

      var ang;

      var num;

      ctx.font = radius * 0.15 + "px arial";

      ctx.textBaseline = "middle";

      ctx.textAlign = "center";

      for (num = 1; num < 13; num++) {

        ang = num * Math.PI / 6;

        ctx.rotate(ang);

        ctx.translate(0, -radius * 0.85);

        ctx.rotate(-ang);

        ctx.fillText(num.toString(), 0, 0);

        ctx.rotate(ang);

        ctx.translate(0, radius * 0.85);

        ctx.rotate(-ang);

      }

    }



    function drawTime(ctx, radius) {

      var now = new Date();

      var hour = now.getHours();

      var minute = now.getMinutes();

      var second = now.getSeconds();

      //hour

      hour = hour % 12;

      hour = (hour * Math.PI / 6) +

        (minute * Math.PI / (6 * 60)) +

        (second * Math.PI / (360 * 60));

      drawHand(ctx, hour, radius * 0.5, radius * 0.07);

      //minute

      minute = (minute * Math.PI / 30) + (second * Math.PI / (30 * 60));

      drawHand(ctx, minute, radius * 0.8, radius * 0.07);

      // second

      second = (second * Math.PI / 30);

      drawHand(ctx, second, radius * 0.9, radius * 0.02);

    }



    function drawHand(ctx, pos, length, width) {

      ctx.beginPath();

      ctx.lineWidth = width;

      ctx.lineCap = "round";

      ctx.moveTo(0, 0);

      ctx.rotate(pos);

      ctx.lineTo(0, -length);

      ctx.stroke();

      ctx.rotate(-pos);

    }

  </script>



</body>



</html>

answered Nov 25 '18 at 14:03

Tchemedje Rhonnel Yvan

143

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53466589%2fhow-do-i-make-a-javascipt-automatic-background-slider%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

change your code to this:

<!DOCTYPE html>

<html>



<head>

<meta charset="utf-8">

    <title>300x600</title>

    <meta name="ad.size" content="width=300, height=600">

</head>







<body>





<style>

body, html {

    height: 600px;

    width: 300px;

    background-image: url('slide_2.png');

    background-repeat: no-repeat;

    background-position:center

    left:100%;

    top:100%;

    margin-left:0px;

    margin-top:0px

  







</style>







<canvas id="canvas" width="226" height="226"

style="position: absolute;

    left: 41px;

    top: 321px;" >

</canvas>







<script>



var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

var radius = canvas.height / 2;

var slideNumber = 4; // total number of slides

var slideIndex = 0; //index of current slide

var interval = setInterval(changeBackground, 4000);



ctx.translate(radius, radius);

radius = radius * 0.50

setInterval(drawClock, 1000);



    function changeBackground() {

        slideIndex += 1;

        if(slideIndex > slideNumber){

             clearInterval(interval);

             return;

        }

        document.body.style.backgroundImage = "url('https://picsum.photos/200/300/?image=" + slideIndex + "')"; 

        console.log(slideIndex);

    }



function drawClock() {

  drawFace(ctx, radius);

  drawNumbers(ctx, radius);

  drawTime(ctx, radius);

}



function drawFace(ctx, radius) {

  var grad;

  ctx.beginPath();

  ctx.arc(0, 0, radius, 0, 2*Math.PI);

  ctx.fillStyle = 'white';

  ctx.fill();

  grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);

  grad.addColorStop(0, '#333');

  grad.addColorStop(0.5, 'white');

  grad.addColorStop(1, '#333');

  ctx.strokeStyle = grad;

  ctx.lineWidth = radius*0.1;

  ctx.stroke();

  ctx.beginPath();

  ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);

  ctx.fillStyle = '#333';

  ctx.fill();

}



function drawNumbers(ctx, radius) {

  var ang;

  var num;

  ctx.font = radius*0.15 + "px arial";

  ctx.textBaseline="middle";

  ctx.textAlign="center";

  for(num = 1; num < 13; num++){

    ang = num * Math.PI / 6;

    ctx.rotate(ang);

    ctx.translate(0, -radius*0.85);

    ctx.rotate(-ang);

    ctx.fillText(num.toString(), 0, 0);

    ctx.rotate(ang);

    ctx.translate(0, radius*0.85);

    ctx.rotate(-ang);

  }

}



function drawTime(ctx, radius){

    var now = new Date();

    var hour = now.getHours();

    var minute = now.getMinutes();

    var second = now.getSeconds();

    //hour

    hour=hour%12;

    hour=(hour*Math.PI/6)+

    (minute*Math.PI/(6*60))+

    (second*Math.PI/(360*60));

    drawHand(ctx, hour, radius*0.5, radius*0.07);

    //minute

    minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));

    drawHand(ctx, minute, radius*0.8, radius*0.07);

    // second

    second=(second*Math.PI/30);

    drawHand(ctx, second, radius*0.9, radius*0.02);

}



function drawHand(ctx, pos, length, width) {

    ctx.beginPath();

    ctx.lineWidth = width;

    ctx.lineCap = "round";

    ctx.moveTo(0,0);

    ctx.rotate(pos);

    ctx.lineTo(0, -length);

    ctx.stroke();

    ctx.rotate(-pos);

}

</script>



</body>

</html>

edited Nov 25 '18 at 12:54

answered Nov 25 '18 at 11:11

Arya11

1521113

i'm a bit lost, already that the second image isn't declared in the code

– Tchemedje Rhonnel Yvan
Nov 25 '18 at 11:38

@TchemedjeRhonnelYvan see if this helps.

– Arya11
Nov 25 '18 at 12:01

i have added the code to the script but there's no change

– Tchemedje Rhonnel Yvan
Nov 25 '18 at 12:13

@TchemedjeRhonnelYvan it works fine for me, though i've made a slight change but i'm sure it works.

– Arya11
Nov 25 '18 at 12:30

it still doesn't, can you share all the code maybe

– Tchemedje Rhonnel Yvan
Nov 25 '18 at 12:40

|
show 3 more comments

change your code to this:

<!DOCTYPE html>

<html>



<head>

<meta charset="utf-8">

    <title>300x600</title>

    <meta name="ad.size" content="width=300, height=600">

</head>







<body>





<style>

body, html {

    height: 600px;

    width: 300px;

    background-image: url('slide_2.png');

    background-repeat: no-repeat;

    background-position:center

    left:100%;

    top:100%;

    margin-left:0px;

    margin-top:0px

  







</style>







<canvas id="canvas" width="226" height="226"

style="position: absolute;

    left: 41px;

    top: 321px;" >

</canvas>







<script>



var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

var radius = canvas.height / 2;

var slideNumber = 4; // total number of slides

var slideIndex = 0; //index of current slide

var interval = setInterval(changeBackground, 4000);



ctx.translate(radius, radius);

radius = radius * 0.50

setInterval(drawClock, 1000);



    function changeBackground() {

        slideIndex += 1;

        if(slideIndex > slideNumber){

             clearInterval(interval);

             return;

        }

        document.body.style.backgroundImage = "url('https://picsum.photos/200/300/?image=" + slideIndex + "')"; 

        console.log(slideIndex);

    }



function drawClock() {

  drawFace(ctx, radius);

  drawNumbers(ctx, radius);

  drawTime(ctx, radius);

}



function drawFace(ctx, radius) {

  var grad;

  ctx.beginPath();

  ctx.arc(0, 0, radius, 0, 2*Math.PI);

  ctx.fillStyle = 'white';

  ctx.fill();

  grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);

  grad.addColorStop(0, '#333');

  grad.addColorStop(0.5, 'white');

  grad.addColorStop(1, '#333');

  ctx.strokeStyle = grad;

  ctx.lineWidth = radius*0.1;

  ctx.stroke();

  ctx.beginPath();

  ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);

  ctx.fillStyle = '#333';

  ctx.fill();

}



function drawNumbers(ctx, radius) {

  var ang;

  var num;

  ctx.font = radius*0.15 + "px arial";

  ctx.textBaseline="middle";

  ctx.textAlign="center";

  for(num = 1; num < 13; num++){

    ang = num * Math.PI / 6;

    ctx.rotate(ang);

    ctx.translate(0, -radius*0.85);

    ctx.rotate(-ang);

    ctx.fillText(num.toString(), 0, 0);

    ctx.rotate(ang);

    ctx.translate(0, radius*0.85);

    ctx.rotate(-ang);

  }

}



function drawTime(ctx, radius){

    var now = new Date();

    var hour = now.getHours();

    var minute = now.getMinutes();

    var second = now.getSeconds();

    //hour

    hour=hour%12;

    hour=(hour*Math.PI/6)+

    (minute*Math.PI/(6*60))+

    (second*Math.PI/(360*60));

    drawHand(ctx, hour, radius*0.5, radius*0.07);

    //minute

    minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));

    drawHand(ctx, minute, radius*0.8, radius*0.07);

    // second

    second=(second*Math.PI/30);

    drawHand(ctx, second, radius*0.9, radius*0.02);

}



function drawHand(ctx, pos, length, width) {

    ctx.beginPath();

    ctx.lineWidth = width;

    ctx.lineCap = "round";

    ctx.moveTo(0,0);

    ctx.rotate(pos);

    ctx.lineTo(0, -length);

    ctx.stroke();

    ctx.rotate(-pos);

}

</script>



</body>

</html>

edited Nov 25 '18 at 12:54

answered Nov 25 '18 at 11:11

Arya11

1521113

i'm a bit lost, already that the second image isn't declared in the code

– Tchemedje Rhonnel Yvan
Nov 25 '18 at 11:38

@TchemedjeRhonnelYvan see if this helps.

– Arya11
Nov 25 '18 at 12:01

i have added the code to the script but there's no change

– Tchemedje Rhonnel Yvan
Nov 25 '18 at 12:13

@TchemedjeRhonnelYvan it works fine for me, though i've made a slight change but i'm sure it works.

– Arya11
Nov 25 '18 at 12:30

it still doesn't, can you share all the code maybe

– Tchemedje Rhonnel Yvan
Nov 25 '18 at 12:40

|
show 3 more comments

change your code to this:

<!DOCTYPE html>

<html>



<head>

<meta charset="utf-8">

    <title>300x600</title>

    <meta name="ad.size" content="width=300, height=600">

</head>







<body>





<style>

body, html {

    height: 600px;

    width: 300px;

    background-image: url('slide_2.png');

    background-repeat: no-repeat;

    background-position:center

    left:100%;

    top:100%;

    margin-left:0px;

    margin-top:0px

  







</style>







<canvas id="canvas" width="226" height="226"

style="position: absolute;

    left: 41px;

    top: 321px;" >

</canvas>







<script>



var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

var radius = canvas.height / 2;

var slideNumber = 4; // total number of slides

var slideIndex = 0; //index of current slide

var interval = setInterval(changeBackground, 4000);



ctx.translate(radius, radius);

radius = radius * 0.50

setInterval(drawClock, 1000);



    function changeBackground() {

        slideIndex += 1;

        if(slideIndex > slideNumber){

             clearInterval(interval);

             return;

        }

        document.body.style.backgroundImage = "url('https://picsum.photos/200/300/?image=" + slideIndex + "')"; 

        console.log(slideIndex);

    }



function drawClock() {

  drawFace(ctx, radius);

  drawNumbers(ctx, radius);

  drawTime(ctx, radius);

}



function drawFace(ctx, radius) {

  var grad;

  ctx.beginPath();

  ctx.arc(0, 0, radius, 0, 2*Math.PI);

  ctx.fillStyle = 'white';

  ctx.fill();

  grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);

  grad.addColorStop(0, '#333');

  grad.addColorStop(0.5, 'white');

  grad.addColorStop(1, '#333');

  ctx.strokeStyle = grad;

  ctx.lineWidth = radius*0.1;

  ctx.stroke();

  ctx.beginPath();

  ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);

  ctx.fillStyle = '#333';

  ctx.fill();

}



function drawNumbers(ctx, radius) {

  var ang;

  var num;

  ctx.font = radius*0.15 + "px arial";

  ctx.textBaseline="middle";

  ctx.textAlign="center";

  for(num = 1; num < 13; num++){

    ang = num * Math.PI / 6;

    ctx.rotate(ang);

    ctx.translate(0, -radius*0.85);

    ctx.rotate(-ang);

    ctx.fillText(num.toString(), 0, 0);

    ctx.rotate(ang);

    ctx.translate(0, radius*0.85);

    ctx.rotate(-ang);

  }

}



function drawTime(ctx, radius){

    var now = new Date();

    var hour = now.getHours();

    var minute = now.getMinutes();

    var second = now.getSeconds();

    //hour

    hour=hour%12;

    hour=(hour*Math.PI/6)+

    (minute*Math.PI/(6*60))+

    (second*Math.PI/(360*60));

    drawHand(ctx, hour, radius*0.5, radius*0.07);

    //minute

    minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));

    drawHand(ctx, minute, radius*0.8, radius*0.07);

    // second

    second=(second*Math.PI/30);

    drawHand(ctx, second, radius*0.9, radius*0.02);

}



function drawHand(ctx, pos, length, width) {

    ctx.beginPath();

    ctx.lineWidth = width;

    ctx.lineCap = "round";

    ctx.moveTo(0,0);

    ctx.rotate(pos);

    ctx.lineTo(0, -length);

    ctx.stroke();

    ctx.rotate(-pos);

}

</script>



</body>

</html>

edited Nov 25 '18 at 12:54

answered Nov 25 '18 at 11:11

Arya11

1521113

change your code to this:

<!DOCTYPE html>

<html>



<head>

<meta charset="utf-8">

    <title>300x600</title>

    <meta name="ad.size" content="width=300, height=600">

</head>







<body>





<style>

body, html {

    height: 600px;

    width: 300px;

    background-image: url('slide_2.png');

    background-repeat: no-repeat;

    background-position:center

    left:100%;

    top:100%;

    margin-left:0px;

    margin-top:0px

  







</style>







<canvas id="canvas" width="226" height="226"

style="position: absolute;

    left: 41px;

    top: 321px;" >

</canvas>







<script>



var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

var radius = canvas.height / 2;

var slideNumber = 4; // total number of slides

var slideIndex = 0; //index of current slide

var interval = setInterval(changeBackground, 4000);



ctx.translate(radius, radius);

radius = radius * 0.50

setInterval(drawClock, 1000);



    function changeBackground() {

        slideIndex += 1;

        if(slideIndex > slideNumber){

             clearInterval(interval);

             return;

        }

        document.body.style.backgroundImage = "url('https://picsum.photos/200/300/?image=" + slideIndex + "')"; 

        console.log(slideIndex);

    }



function drawClock() {

  drawFace(ctx, radius);

  drawNumbers(ctx, radius);

  drawTime(ctx, radius);

}



function drawFace(ctx, radius) {

  var grad;

  ctx.beginPath();

  ctx.arc(0, 0, radius, 0, 2*Math.PI);

  ctx.fillStyle = 'white';

  ctx.fill();

  grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);

  grad.addColorStop(0, '#333');

  grad.addColorStop(0.5, 'white');

  grad.addColorStop(1, '#333');

  ctx.strokeStyle = grad;

  ctx.lineWidth = radius*0.1;

  ctx.stroke();

  ctx.beginPath();

  ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);

  ctx.fillStyle = '#333';

  ctx.fill();

}



function drawNumbers(ctx, radius) {

  var ang;

  var num;

  ctx.font = radius*0.15 + "px arial";

  ctx.textBaseline="middle";

  ctx.textAlign="center";

  for(num = 1; num < 13; num++){

    ang = num * Math.PI / 6;

    ctx.rotate(ang);

    ctx.translate(0, -radius*0.85);

    ctx.rotate(-ang);

    ctx.fillText(num.toString(), 0, 0);

    ctx.rotate(ang);

    ctx.translate(0, radius*0.85);

    ctx.rotate(-ang);

  }

}



function drawTime(ctx, radius){

    var now = new Date();

    var hour = now.getHours();

    var minute = now.getMinutes();

    var second = now.getSeconds();

    //hour

    hour=hour%12;

    hour=(hour*Math.PI/6)+

    (minute*Math.PI/(6*60))+

    (second*Math.PI/(360*60));

    drawHand(ctx, hour, radius*0.5, radius*0.07);

    //minute

    minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));

    drawHand(ctx, minute, radius*0.8, radius*0.07);

    // second

    second=(second*Math.PI/30);

    drawHand(ctx, second, radius*0.9, radius*0.02);

}



function drawHand(ctx, pos, length, width) {

    ctx.beginPath();

    ctx.lineWidth = width;

    ctx.lineCap = "round";

    ctx.moveTo(0,0);

    ctx.rotate(pos);

    ctx.lineTo(0, -length);

    ctx.stroke();

    ctx.rotate(-pos);

}

</script>



</body>

</html>

<!DOCTYPE html>

<html>



<head>

<meta charset="utf-8">

    <title>300x600</title>

    <meta name="ad.size" content="width=300, height=600">

</head>







<body>





<style>

body, html {

    height: 600px;

    width: 300px;

    background-image: url('slide_2.png');

    background-repeat: no-repeat;

    background-position:center

    left:100%;

    top:100%;

    margin-left:0px;

    margin-top:0px

  







</style>







<canvas id="canvas" width="226" height="226"

style="position: absolute;

    left: 41px;

    top: 321px;" >

</canvas>







<script>



var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

var radius = canvas.height / 2;

var slideNumber = 4; // total number of slides

var slideIndex = 0; //index of current slide

var interval = setInterval(changeBackground, 4000);



ctx.translate(radius, radius);

radius = radius * 0.50

setInterval(drawClock, 1000);



    function changeBackground() {

        slideIndex += 1;

        if(slideIndex > slideNumber){

             clearInterval(interval);

             return;

        }

        document.body.style.backgroundImage = "url('https://picsum.photos/200/300/?image=" + slideIndex + "')"; 

        console.log(slideIndex);

    }



function drawClock() {

  drawFace(ctx, radius);

  drawNumbers(ctx, radius);

  drawTime(ctx, radius);

}



function drawFace(ctx, radius) {

  var grad;

  ctx.beginPath();

  ctx.arc(0, 0, radius, 0, 2*Math.PI);

  ctx.fillStyle = 'white';

  ctx.fill();

  grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);

  grad.addColorStop(0, '#333');

  grad.addColorStop(0.5, 'white');

  grad.addColorStop(1, '#333');

  ctx.strokeStyle = grad;

  ctx.lineWidth = radius*0.1;

  ctx.stroke();

  ctx.beginPath();

  ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);

  ctx.fillStyle = '#333';

  ctx.fill();

}



function drawNumbers(ctx, radius) {

  var ang;

  var num;

  ctx.font = radius*0.15 + "px arial";

  ctx.textBaseline="middle";

  ctx.textAlign="center";

  for(num = 1; num < 13; num++){

    ang = num * Math.PI / 6;

    ctx.rotate(ang);

    ctx.translate(0, -radius*0.85);

    ctx.rotate(-ang);

    ctx.fillText(num.toString(), 0, 0);

    ctx.rotate(ang);

    ctx.translate(0, radius*0.85);

    ctx.rotate(-ang);

  }

}



function drawTime(ctx, radius){

    var now = new Date();

    var hour = now.getHours();

    var minute = now.getMinutes();

    var second = now.getSeconds();

    //hour

    hour=hour%12;

    hour=(hour*Math.PI/6)+

    (minute*Math.PI/(6*60))+

    (second*Math.PI/(360*60));

    drawHand(ctx, hour, radius*0.5, radius*0.07);

    //minute

    minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));

    drawHand(ctx, minute, radius*0.8, radius*0.07);

    // second

    second=(second*Math.PI/30);

    drawHand(ctx, second, radius*0.9, radius*0.02);

}



function drawHand(ctx, pos, length, width) {

    ctx.beginPath();

    ctx.lineWidth = width;

    ctx.lineCap = "round";

    ctx.moveTo(0,0);

    ctx.rotate(pos);

    ctx.lineTo(0, -length);

    ctx.stroke();

    ctx.rotate(-pos);

}

</script>



</body>

</html>

<!DOCTYPE html>

<html>



<head>

<meta charset="utf-8">

    <title>300x600</title>

    <meta name="ad.size" content="width=300, height=600">

</head>







<body>





<style>

body, html {

    height: 600px;

    width: 300px;

    background-image: url('slide_2.png');

    background-repeat: no-repeat;

    background-position:center

    left:100%;

    top:100%;

    margin-left:0px;

    margin-top:0px

  







</style>







<canvas id="canvas" width="226" height="226"

style="position: absolute;

    left: 41px;

    top: 321px;" >

</canvas>







<script>



var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

var radius = canvas.height / 2;

var slideNumber = 4; // total number of slides

var slideIndex = 0; //index of current slide

var interval = setInterval(changeBackground, 4000);



ctx.translate(radius, radius);

radius = radius * 0.50

setInterval(drawClock, 1000);



    function changeBackground() {

        slideIndex += 1;

        if(slideIndex > slideNumber){

             clearInterval(interval);

             return;

        }

        document.body.style.backgroundImage = "url('https://picsum.photos/200/300/?image=" + slideIndex + "')"; 

        console.log(slideIndex);

    }



function drawClock() {

  drawFace(ctx, radius);

  drawNumbers(ctx, radius);

  drawTime(ctx, radius);

}



function drawFace(ctx, radius) {

  var grad;

  ctx.beginPath();

  ctx.arc(0, 0, radius, 0, 2*Math.PI);

  ctx.fillStyle = 'white';

  ctx.fill();

  grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);

  grad.addColorStop(0, '#333');

  grad.addColorStop(0.5, 'white');

  grad.addColorStop(1, '#333');

  ctx.strokeStyle = grad;

  ctx.lineWidth = radius*0.1;

  ctx.stroke();

  ctx.beginPath();

  ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);

  ctx.fillStyle = '#333';

  ctx.fill();

}



function drawNumbers(ctx, radius) {

  var ang;

  var num;

  ctx.font = radius*0.15 + "px arial";

  ctx.textBaseline="middle";

  ctx.textAlign="center";

  for(num = 1; num < 13; num++){

    ang = num * Math.PI / 6;

    ctx.rotate(ang);

    ctx.translate(0, -radius*0.85);

    ctx.rotate(-ang);

    ctx.fillText(num.toString(), 0, 0);

    ctx.rotate(ang);

    ctx.translate(0, radius*0.85);

    ctx.rotate(-ang);

  }

}



function drawTime(ctx, radius){

    var now = new Date();

    var hour = now.getHours();

    var minute = now.getMinutes();

    var second = now.getSeconds();

    //hour

    hour=hour%12;

    hour=(hour*Math.PI/6)+

    (minute*Math.PI/(6*60))+

    (second*Math.PI/(360*60));

    drawHand(ctx, hour, radius*0.5, radius*0.07);

    //minute

    minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));

    drawHand(ctx, minute, radius*0.8, radius*0.07);

    // second

    second=(second*Math.PI/30);

    drawHand(ctx, second, radius*0.9, radius*0.02);

}



function drawHand(ctx, pos, length, width) {

    ctx.beginPath();

    ctx.lineWidth = width;

    ctx.lineCap = "round";

    ctx.moveTo(0,0);

    ctx.rotate(pos);

    ctx.lineTo(0, -length);

    ctx.stroke();

    ctx.rotate(-pos);

}

</script>



</body>

</html>

edited Nov 25 '18 at 12:54

answered Nov 25 '18 at 11:11

Arya11

1521113

edited Nov 25 '18 at 12:54

answered Nov 25 '18 at 11:11

Arya11

1521113

answered Nov 25 '18 at 11:11

Arya11

1521113

answered Nov 25 '18 at 11:11

Arya11

1521113

i'm a bit lost, already that the second image isn't declared in the code

– Tchemedje Rhonnel Yvan
Nov 25 '18 at 11:38

@TchemedjeRhonnelYvan see if this helps.

– Arya11
Nov 25 '18 at 12:01

i have added the code to the script but there's no change

– Tchemedje Rhonnel Yvan
Nov 25 '18 at 12:13

@TchemedjeRhonnelYvan it works fine for me, though i've made a slight change but i'm sure it works.

– Arya11
Nov 25 '18 at 12:30

it still doesn't, can you share all the code maybe

– Tchemedje Rhonnel Yvan
Nov 25 '18 at 12:40

|
show 3 more comments

i'm a bit lost, already that the second image isn't declared in the code

– Tchemedje Rhonnel Yvan
Nov 25 '18 at 11:38

@TchemedjeRhonnelYvan see if this helps.

– Arya11
Nov 25 '18 at 12:01

i have added the code to the script but there's no change

– Tchemedje Rhonnel Yvan
Nov 25 '18 at 12:13

@TchemedjeRhonnelYvan it works fine for me, though i've made a slight change but i'm sure it works.

– Arya11
Nov 25 '18 at 12:30

it still doesn't, can you share all the code maybe

– Tchemedje Rhonnel Yvan
Nov 25 '18 at 12:40

i'm a bit lost, already that the second image isn't declared in the code

– Tchemedje Rhonnel Yvan
Nov 25 '18 at 11:38

@TchemedjeRhonnelYvan see if this helps.

– Arya11
Nov 25 '18 at 12:01

i have added the code to the script but there's no change

– Tchemedje Rhonnel Yvan
Nov 25 '18 at 12:13

@TchemedjeRhonnelYvan it works fine for me, though i've made a slight change but i'm sure it works.

– Arya11
Nov 25 '18 at 12:30

it still doesn't, can you share all the code maybe

– Tchemedje Rhonnel Yvan
Nov 25 '18 at 12:40

|
show 3 more comments

You can use CSS animation and pseudo elements.

<!DOCTYPE html>

<html>



<head>

  <meta charset="utf-8">

  <title>300x600</title>

  <meta name="ad.size" content="width=300, height=600">

</head>







<body>





  <style>

    body,

    html {

      height: 600px;

      width: 300px;

      top: 100%;

      margin-left: 0px;

      margin-top: 0px;

    }

    

    body:before,

    body:after {

      content: '';

      position: absolute;

      width: 100%;

      height: 100%;

      background-repeat: no-repeat;

      background-position: center left:100%;

    }

    

    body:before {

      background-image: url('https://picsum.photos/300/600?image=100');

      animation: fadeOut 1s linear 2s 1 forwards;

      -webkit-animation: fadeOut 1s linear 2s 1 forwards;

      -moz-animation: fadeOut 1s linear 2s 1 forwards;

      -o-animation: fadeOut 1s linear 2s 1 forwards;

    }

    

    body:after {

      background-image: url('https://picsum.photos/300/600?image=201');

      z-index: -1;

    }

    

    @-webkit-keyframes fadeOut {

      from {

        opacity: 1;

      }

      to {

        opacity: 0;

      }

    }

    

    @keyframes fadeOut {

      from {

        opacity: 1;

      }

      to {

        opacity: 0;

      }

    }

  </style>







  <canvas id="canvas" width="226" height="226" style="position: absolute;

    left: 41px;

    top: 0;">

</canvas>







  <script>

    var canvas = document.getElementById("canvas");

    var ctx = canvas.getContext("2d");

    var radius = canvas.height / 2;

    ctx.translate(radius, radius);

    radius = radius * 0.50

    setInterval(drawClock, 1000);



    function drawClock() {

      drawFace(ctx, radius);

      drawNumbers(ctx, radius);

      drawTime(ctx, radius);

    }



    function drawFace(ctx, radius) {

      var grad;

      ctx.beginPath();

      ctx.arc(0, 0, radius, 0, 2 * Math.PI);

      ctx.fillStyle = 'white';

      ctx.fill();

      grad = ctx.createRadialGradient(0, 0, radius * 0.95, 0, 0, radius * 1.05);

      grad.addColorStop(0, '#333');

      grad.addColorStop(0.5, 'white');

      grad.addColorStop(1, '#333');

      ctx.strokeStyle = grad;

      ctx.lineWidth = radius * 0.1;

      ctx.stroke();

      ctx.beginPath();

      ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);

      ctx.fillStyle = '#333';

      ctx.fill();

    }



    function drawNumbers(ctx, radius) {

      var ang;

      var num;

      ctx.font = radius * 0.15 + "px arial";

      ctx.textBaseline = "middle";

      ctx.textAlign = "center";

      for (num = 1; num < 13; num++) {

        ang = num * Math.PI / 6;

        ctx.rotate(ang);

        ctx.translate(0, -radius * 0.85);

        ctx.rotate(-ang);

        ctx.fillText(num.toString(), 0, 0);

        ctx.rotate(ang);

        ctx.translate(0, radius * 0.85);

        ctx.rotate(-ang);

      }

    }



    function drawTime(ctx, radius) {

      var now = new Date();

      var hour = now.getHours();

      var minute = now.getMinutes();

      var second = now.getSeconds();

      //hour

      hour = hour % 12;

      hour = (hour * Math.PI / 6) +

        (minute * Math.PI / (6 * 60)) +

        (second * Math.PI / (360 * 60));

      drawHand(ctx, hour, radius * 0.5, radius * 0.07);

      //minute

      minute = (minute * Math.PI / 30) + (second * Math.PI / (30 * 60));

      drawHand(ctx, minute, radius * 0.8, radius * 0.07);

      // second

      second = (second * Math.PI / 30);

      drawHand(ctx, second, radius * 0.9, radius * 0.02);

    }



    function drawHand(ctx, pos, length, width) {

      ctx.beginPath();

      ctx.lineWidth = width;

      ctx.lineCap = "round";

      ctx.moveTo(0, 0);

      ctx.rotate(pos);

      ctx.lineTo(0, -length);

      ctx.stroke();

      ctx.rotate(-pos);

    }

  </script>



</body>



</html>

edited Nov 25 '18 at 13:31

answered Nov 25 '18 at 12:10

Smollet777

1,34511015

the background image doesn't change

– Tchemedje Rhonnel Yvan
Nov 25 '18 at 12:49

@TchemedjeRhonnelYvan yes it is

– Smollet777
Nov 25 '18 at 12:54

do i have merged the code to one file, I put my two images in the placeholders but it doesn't

– Tchemedje Rhonnel Yvan
Nov 25 '18 at 13:26

can you maybe make it one file?

– Tchemedje Rhonnel Yvan
Nov 25 '18 at 13:27

@TchemedjeRhonnelYvan of course. Place that css code into your style tag. I updated the snippet

– Smollet777
Nov 25 '18 at 13:33

|
show 5 more comments

You can use CSS animation and pseudo elements.

<!DOCTYPE html>

<html>



<head>

  <meta charset="utf-8">

  <title>300x600</title>

  <meta name="ad.size" content="width=300, height=600">

</head>







<body>





  <style>

    body,

    html {

      height: 600px;

      width: 300px;

      top: 100%;

      margin-left: 0px;

      margin-top: 0px;

    }

    

    body:before,

    body:after {

      content: '';

      position: absolute;

      width: 100%;

      height: 100%;

      background-repeat: no-repeat;

      background-position: center left:100%;

    }

    

    body:before {

      background-image: url('https://picsum.photos/300/600?image=100');

      animation: fadeOut 1s linear 2s 1 forwards;

      -webkit-animation: fadeOut 1s linear 2s 1 forwards;

      -moz-animation: fadeOut 1s linear 2s 1 forwards;

      -o-animation: fadeOut 1s linear 2s 1 forwards;

    }

    

    body:after {

      background-image: url('https://picsum.photos/300/600?image=201');

      z-index: -1;

    }

    

    @-webkit-keyframes fadeOut {

      from {

        opacity: 1;

      }

      to {

        opacity: 0;

      }

    }

    

    @keyframes fadeOut {

      from {

        opacity: 1;

      }

      to {

        opacity: 0;

      }

    }

  </style>







  <canvas id="canvas" width="226" height="226" style="position: absolute;

    left: 41px;

    top: 0;">

</canvas>







  <script>

    var canvas = document.getElementById("canvas");

    var ctx = canvas.getContext("2d");

    var radius = canvas.height / 2;

    ctx.translate(radius, radius);

    radius = radius * 0.50

    setInterval(drawClock, 1000);



    function drawClock() {

      drawFace(ctx, radius);

      drawNumbers(ctx, radius);

      drawTime(ctx, radius);

    }



    function drawFace(ctx, radius) {

      var grad;

      ctx.beginPath();

      ctx.arc(0, 0, radius, 0, 2 * Math.PI);

      ctx.fillStyle = 'white';

      ctx.fill();

      grad = ctx.createRadialGradient(0, 0, radius * 0.95, 0, 0, radius * 1.05);

      grad.addColorStop(0, '#333');

      grad.addColorStop(0.5, 'white');

      grad.addColorStop(1, '#333');

      ctx.strokeStyle = grad;

      ctx.lineWidth = radius * 0.1;

      ctx.stroke();

      ctx.beginPath();

      ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);

      ctx.fillStyle = '#333';

      ctx.fill();

    }



    function drawNumbers(ctx, radius) {

      var ang;

      var num;

      ctx.font = radius * 0.15 + "px arial";

      ctx.textBaseline = "middle";

      ctx.textAlign = "center";

      for (num = 1; num < 13; num++) {

        ang = num * Math.PI / 6;

        ctx.rotate(ang);

        ctx.translate(0, -radius * 0.85);

        ctx.rotate(-ang);

        ctx.fillText(num.toString(), 0, 0);

        ctx.rotate(ang);

        ctx.translate(0, radius * 0.85);

        ctx.rotate(-ang);

      }

    }



    function drawTime(ctx, radius) {

      var now = new Date();

      var hour = now.getHours();

      var minute = now.getMinutes();

      var second = now.getSeconds();

      //hour

      hour = hour % 12;

      hour = (hour * Math.PI / 6) +

        (minute * Math.PI / (6 * 60)) +

        (second * Math.PI / (360 * 60));

      drawHand(ctx, hour, radius * 0.5, radius * 0.07);

      //minute

      minute = (minute * Math.PI / 30) + (second * Math.PI / (30 * 60));

      drawHand(ctx, minute, radius * 0.8, radius * 0.07);

      // second

      second = (second * Math.PI / 30);

      drawHand(ctx, second, radius * 0.9, radius * 0.02);

    }



    function drawHand(ctx, pos, length, width) {

      ctx.beginPath();

      ctx.lineWidth = width;

      ctx.lineCap = "round";

      ctx.moveTo(0, 0);

      ctx.rotate(pos);

      ctx.lineTo(0, -length);

      ctx.stroke();

      ctx.rotate(-pos);

    }

  </script>



</body>



</html>

edited Nov 25 '18 at 13:31

answered Nov 25 '18 at 12:10

Smollet777

1,34511015

the background image doesn't change

– Tchemedje Rhonnel Yvan
Nov 25 '18 at 12:49

@TchemedjeRhonnelYvan yes it is

– Smollet777
Nov 25 '18 at 12:54

do i have merged the code to one file, I put my two images in the placeholders but it doesn't

– Tchemedje Rhonnel Yvan
Nov 25 '18 at 13:26

can you maybe make it one file?

– Tchemedje Rhonnel Yvan
Nov 25 '18 at 13:27

@TchemedjeRhonnelYvan of course. Place that css code into your style tag. I updated the snippet

– Smollet777
Nov 25 '18 at 13:33

|
show 5 more comments

You can use CSS animation and pseudo elements.

<!DOCTYPE html>

<html>



<head>

  <meta charset="utf-8">

  <title>300x600</title>

  <meta name="ad.size" content="width=300, height=600">

</head>







<body>





  <style>

    body,

    html {

      height: 600px;

      width: 300px;

      top: 100%;

      margin-left: 0px;

      margin-top: 0px;

    }

    

    body:before,

    body:after {

      content: '';

      position: absolute;

      width: 100%;

      height: 100%;

      background-repeat: no-repeat;

      background-position: center left:100%;

    }

    

    body:before {

      background-image: url('https://picsum.photos/300/600?image=100');

      animation: fadeOut 1s linear 2s 1 forwards;

      -webkit-animation: fadeOut 1s linear 2s 1 forwards;

      -moz-animation: fadeOut 1s linear 2s 1 forwards;

      -o-animation: fadeOut 1s linear 2s 1 forwards;

    }

    

    body:after {

      background-image: url('https://picsum.photos/300/600?image=201');

      z-index: -1;

    }

    

    @-webkit-keyframes fadeOut {

      from {

        opacity: 1;

      }

      to {

        opacity: 0;

      }

    }

    

    @keyframes fadeOut {

      from {

        opacity: 1;

      }

      to {

        opacity: 0;

      }

    }

  </style>







  <canvas id="canvas" width="226" height="226" style="position: absolute;

    left: 41px;

    top: 0;">

</canvas>







  <script>

    var canvas = document.getElementById("canvas");

    var ctx = canvas.getContext("2d");

    var radius = canvas.height / 2;

    ctx.translate(radius, radius);

    radius = radius * 0.50

    setInterval(drawClock, 1000);



    function drawClock() {

      drawFace(ctx, radius);

      drawNumbers(ctx, radius);

      drawTime(ctx, radius);

    }



    function drawFace(ctx, radius) {

      var grad;

      ctx.beginPath();

      ctx.arc(0, 0, radius, 0, 2 * Math.PI);

      ctx.fillStyle = 'white';

      ctx.fill();

      grad = ctx.createRadialGradient(0, 0, radius * 0.95, 0, 0, radius * 1.05);

      grad.addColorStop(0, '#333');

      grad.addColorStop(0.5, 'white');

      grad.addColorStop(1, '#333');

      ctx.strokeStyle = grad;

      ctx.lineWidth = radius * 0.1;

      ctx.stroke();

      ctx.beginPath();

      ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);

      ctx.fillStyle = '#333';

      ctx.fill();

    }



    function drawNumbers(ctx, radius) {

      var ang;

      var num;

      ctx.font = radius * 0.15 + "px arial";

      ctx.textBaseline = "middle";

      ctx.textAlign = "center";

      for (num = 1; num < 13; num++) {

        ang = num * Math.PI / 6;

        ctx.rotate(ang);

        ctx.translate(0, -radius * 0.85);

        ctx.rotate(-ang);

        ctx.fillText(num.toString(), 0, 0);

        ctx.rotate(ang);

        ctx.translate(0, radius * 0.85);

        ctx.rotate(-ang);

      }

    }



    function drawTime(ctx, radius) {

      var now = new Date();

      var hour = now.getHours();

      var minute = now.getMinutes();

      var second = now.getSeconds();

      //hour

      hour = hour % 12;

      hour = (hour * Math.PI / 6) +

        (minute * Math.PI / (6 * 60)) +

        (second * Math.PI / (360 * 60));

      drawHand(ctx, hour, radius * 0.5, radius * 0.07);

      //minute

      minute = (minute * Math.PI / 30) + (second * Math.PI / (30 * 60));

      drawHand(ctx, minute, radius * 0.8, radius * 0.07);

      // second

      second = (second * Math.PI / 30);

      drawHand(ctx, second, radius * 0.9, radius * 0.02);

    }



    function drawHand(ctx, pos, length, width) {

      ctx.beginPath();

      ctx.lineWidth = width;

      ctx.lineCap = "round";

      ctx.moveTo(0, 0);

      ctx.rotate(pos);

      ctx.lineTo(0, -length);

      ctx.stroke();

      ctx.rotate(-pos);

    }

  </script>



</body>



</html>

edited Nov 25 '18 at 13:31

answered Nov 25 '18 at 12:10

Smollet777

1,34511015

You can use CSS animation and pseudo elements.

<!DOCTYPE html>

<html>



<head>

  <meta charset="utf-8">

  <title>300x600</title>

  <meta name="ad.size" content="width=300, height=600">

</head>







<body>





  <style>

    body,

    html {

      height: 600px;

      width: 300px;

      top: 100%;

      margin-left: 0px;

      margin-top: 0px;

    }

    

    body:before,

    body:after {

      content: '';

      position: absolute;

      width: 100%;

      height: 100%;

      background-repeat: no-repeat;

      background-position: center left:100%;

    }

    

    body:before {

      background-image: url('https://picsum.photos/300/600?image=100');

      animation: fadeOut 1s linear 2s 1 forwards;

      -webkit-animation: fadeOut 1s linear 2s 1 forwards;

      -moz-animation: fadeOut 1s linear 2s 1 forwards;

      -o-animation: fadeOut 1s linear 2s 1 forwards;

    }

    

    body:after {

      background-image: url('https://picsum.photos/300/600?image=201');

      z-index: -1;

    }

    

    @-webkit-keyframes fadeOut {

      from {

        opacity: 1;

      }

      to {

        opacity: 0;

      }

    }

    

    @keyframes fadeOut {

      from {

        opacity: 1;

      }

      to {

        opacity: 0;

      }

    }

  </style>







  <canvas id="canvas" width="226" height="226" style="position: absolute;

    left: 41px;

    top: 0;">

</canvas>







  <script>

    var canvas = document.getElementById("canvas");

    var ctx = canvas.getContext("2d");

    var radius = canvas.height / 2;

    ctx.translate(radius, radius);

    radius = radius * 0.50

    setInterval(drawClock, 1000);



    function drawClock() {

      drawFace(ctx, radius);

      drawNumbers(ctx, radius);

      drawTime(ctx, radius);

    }



    function drawFace(ctx, radius) {

      var grad;

      ctx.beginPath();

      ctx.arc(0, 0, radius, 0, 2 * Math.PI);

      ctx.fillStyle = 'white';

      ctx.fill();

      grad = ctx.createRadialGradient(0, 0, radius * 0.95, 0, 0, radius * 1.05);

      grad.addColorStop(0, '#333');

      grad.addColorStop(0.5, 'white');

      grad.addColorStop(1, '#333');

      ctx.strokeStyle = grad;

      ctx.lineWidth = radius * 0.1;

      ctx.stroke();

      ctx.beginPath();

      ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);

      ctx.fillStyle = '#333';

      ctx.fill();

    }



    function drawNumbers(ctx, radius) {

      var ang;

      var num;

      ctx.font = radius * 0.15 + "px arial";

      ctx.textBaseline = "middle";

      ctx.textAlign = "center";

      for (num = 1; num < 13; num++) {

        ang = num * Math.PI / 6;

        ctx.rotate(ang);

        ctx.translate(0, -radius * 0.85);

        ctx.rotate(-ang);

        ctx.fillText(num.toString(), 0, 0);

        ctx.rotate(ang);

        ctx.translate(0, radius * 0.85);

        ctx.rotate(-ang);

      }

    }



    function drawTime(ctx, radius) {

      var now = new Date();

      var hour = now.getHours();

      var minute = now.getMinutes();

      var second = now.getSeconds();

      //hour

      hour = hour % 12;

      hour = (hour * Math.PI / 6) +

        (minute * Math.PI / (6 * 60)) +

        (second * Math.PI / (360 * 60));

      drawHand(ctx, hour, radius * 0.5, radius * 0.07);

      //minute

      minute = (minute * Math.PI / 30) + (second * Math.PI / (30 * 60));

      drawHand(ctx, minute, radius * 0.8, radius * 0.07);

      // second

      second = (second * Math.PI / 30);

      drawHand(ctx, second, radius * 0.9, radius * 0.02);

    }



    function drawHand(ctx, pos, length, width) {

      ctx.beginPath();

      ctx.lineWidth = width;

      ctx.lineCap = "round";

      ctx.moveTo(0, 0);

      ctx.rotate(pos);

      ctx.lineTo(0, -length);

      ctx.stroke();

      ctx.rotate(-pos);

    }

  </script>



</body>



</html>

<!DOCTYPE html>

<html>



<head>

  <meta charset="utf-8">

  <title>300x600</title>

  <meta name="ad.size" content="width=300, height=600">

</head>







<body>





  <style>

    body,

    html {

      height: 600px;

      width: 300px;

      top: 100%;

      margin-left: 0px;

      margin-top: 0px;

    }

    

    body:before,

    body:after {

      content: '';

      position: absolute;

      width: 100%;

      height: 100%;

      background-repeat: no-repeat;

      background-position: center left:100%;

    }

    

    body:before {

      background-image: url('https://picsum.photos/300/600?image=100');

      animation: fadeOut 1s linear 2s 1 forwards;

      -webkit-animation: fadeOut 1s linear 2s 1 forwards;

      -moz-animation: fadeOut 1s linear 2s 1 forwards;

      -o-animation: fadeOut 1s linear 2s 1 forwards;

    }

    

    body:after {

      background-image: url('https://picsum.photos/300/600?image=201');

      z-index: -1;

    }

    

    @-webkit-keyframes fadeOut {

      from {

        opacity: 1;

      }

      to {

        opacity: 0;

      }

    }

    

    @keyframes fadeOut {

      from {

        opacity: 1;

      }

      to {

        opacity: 0;

      }

    }

  </style>







  <canvas id="canvas" width="226" height="226" style="position: absolute;

    left: 41px;

    top: 0;">

</canvas>







  <script>

    var canvas = document.getElementById("canvas");

    var ctx = canvas.getContext("2d");

    var radius = canvas.height / 2;

    ctx.translate(radius, radius);

    radius = radius * 0.50

    setInterval(drawClock, 1000);



    function drawClock() {

      drawFace(ctx, radius);

      drawNumbers(ctx, radius);

      drawTime(ctx, radius);

    }



    function drawFace(ctx, radius) {

      var grad;

      ctx.beginPath();

      ctx.arc(0, 0, radius, 0, 2 * Math.PI);

      ctx.fillStyle = 'white';

      ctx.fill();

      grad = ctx.createRadialGradient(0, 0, radius * 0.95, 0, 0, radius * 1.05);

      grad.addColorStop(0, '#333');

      grad.addColorStop(0.5, 'white');

      grad.addColorStop(1, '#333');

      ctx.strokeStyle = grad;

      ctx.lineWidth = radius * 0.1;

      ctx.stroke();

      ctx.beginPath();

      ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);

      ctx.fillStyle = '#333';

      ctx.fill();

    }



    function drawNumbers(ctx, radius) {

      var ang;

      var num;

      ctx.font = radius * 0.15 + "px arial";

      ctx.textBaseline = "middle";

      ctx.textAlign = "center";

      for (num = 1; num < 13; num++) {

        ang = num * Math.PI / 6;

        ctx.rotate(ang);

        ctx.translate(0, -radius * 0.85);

        ctx.rotate(-ang);

        ctx.fillText(num.toString(), 0, 0);

        ctx.rotate(ang);

        ctx.translate(0, radius * 0.85);

        ctx.rotate(-ang);

      }

    }



    function drawTime(ctx, radius) {

      var now = new Date();

      var hour = now.getHours();

      var minute = now.getMinutes();

      var second = now.getSeconds();

      //hour

      hour = hour % 12;

      hour = (hour * Math.PI / 6) +

        (minute * Math.PI / (6 * 60)) +

        (second * Math.PI / (360 * 60));

      drawHand(ctx, hour, radius * 0.5, radius * 0.07);

      //minute

      minute = (minute * Math.PI / 30) + (second * Math.PI / (30 * 60));

      drawHand(ctx, minute, radius * 0.8, radius * 0.07);

      // second

      second = (second * Math.PI / 30);

      drawHand(ctx, second, radius * 0.9, radius * 0.02);

    }



    function drawHand(ctx, pos, length, width) {

      ctx.beginPath();

      ctx.lineWidth = width;

      ctx.lineCap = "round";

      ctx.moveTo(0, 0);

      ctx.rotate(pos);

      ctx.lineTo(0, -length);

      ctx.stroke();

      ctx.rotate(-pos);

    }

  </script>



</body>



</html>

<!DOCTYPE html>

<html>



<head>

  <meta charset="utf-8">

  <title>300x600</title>

  <meta name="ad.size" content="width=300, height=600">

</head>







<body>





  <style>

    body,

    html {

      height: 600px;

      width: 300px;

      top: 100%;

      margin-left: 0px;

      margin-top: 0px;

    }

    

    body:before,

    body:after {

      content: '';

      position: absolute;

      width: 100%;

      height: 100%;

      background-repeat: no-repeat;

      background-position: center left:100%;

    }

    

    body:before {

      background-image: url('https://picsum.photos/300/600?image=100');

      animation: fadeOut 1s linear 2s 1 forwards;

      -webkit-animation: fadeOut 1s linear 2s 1 forwards;

      -moz-animation: fadeOut 1s linear 2s 1 forwards;

      -o-animation: fadeOut 1s linear 2s 1 forwards;

    }

    

    body:after {

      background-image: url('https://picsum.photos/300/600?image=201');

      z-index: -1;

    }

    

    @-webkit-keyframes fadeOut {

      from {

        opacity: 1;

      }

      to {

        opacity: 0;

      }

    }

    

    @keyframes fadeOut {

      from {

        opacity: 1;

      }

      to {

        opacity: 0;

      }

    }

  </style>







  <canvas id="canvas" width="226" height="226" style="position: absolute;

    left: 41px;

    top: 0;">

</canvas>







  <script>

    var canvas = document.getElementById("canvas");

    var ctx = canvas.getContext("2d");

    var radius = canvas.height / 2;

    ctx.translate(radius, radius);

    radius = radius * 0.50

    setInterval(drawClock, 1000);



    function drawClock() {

      drawFace(ctx, radius);

      drawNumbers(ctx, radius);

      drawTime(ctx, radius);

    }



    function drawFace(ctx, radius) {

      var grad;

      ctx.beginPath();

      ctx.arc(0, 0, radius, 0, 2 * Math.PI);

      ctx.fillStyle = 'white';

      ctx.fill();

      grad = ctx.createRadialGradient(0, 0, radius * 0.95, 0, 0, radius * 1.05);

      grad.addColorStop(0, '#333');

      grad.addColorStop(0.5, 'white');

      grad.addColorStop(1, '#333');

      ctx.strokeStyle = grad;

      ctx.lineWidth = radius * 0.1;

      ctx.stroke();

      ctx.beginPath();

      ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);

      ctx.fillStyle = '#333';

      ctx.fill();

    }



    function drawNumbers(ctx, radius) {

      var ang;

      var num;

      ctx.font = radius * 0.15 + "px arial";

      ctx.textBaseline = "middle";

      ctx.textAlign = "center";

      for (num = 1; num < 13; num++) {

        ang = num * Math.PI / 6;

        ctx.rotate(ang);

        ctx.translate(0, -radius * 0.85);

        ctx.rotate(-ang);

        ctx.fillText(num.toString(), 0, 0);

        ctx.rotate(ang);

        ctx.translate(0, radius * 0.85);

        ctx.rotate(-ang);

      }

    }



    function drawTime(ctx, radius) {

      var now = new Date();

      var hour = now.getHours();

      var minute = now.getMinutes();

      var second = now.getSeconds();

      //hour

      hour = hour % 12;

      hour = (hour * Math.PI / 6) +

        (minute * Math.PI / (6 * 60)) +

        (second * Math.PI / (360 * 60));

      drawHand(ctx, hour, radius * 0.5, radius * 0.07);

      //minute

      minute = (minute * Math.PI / 30) + (second * Math.PI / (30 * 60));

      drawHand(ctx, minute, radius * 0.8, radius * 0.07);

      // second

      second = (second * Math.PI / 30);

      drawHand(ctx, second, radius * 0.9, radius * 0.02);

    }



    function drawHand(ctx, pos, length, width) {

      ctx.beginPath();

      ctx.lineWidth = width;

      ctx.lineCap = "round";

      ctx.moveTo(0, 0);

      ctx.rotate(pos);

      ctx.lineTo(0, -length);

      ctx.stroke();

      ctx.rotate(-pos);

    }

  </script>



</body>



</html>

edited Nov 25 '18 at 13:31

answered Nov 25 '18 at 12:10

Smollet777

1,34511015

edited Nov 25 '18 at 13:31

answered Nov 25 '18 at 12:10

Smollet777

1,34511015

answered Nov 25 '18 at 12:10

Smollet777

1,34511015

answered Nov 25 '18 at 12:10

Smollet777

1,34511015

the background image doesn't change

– Tchemedje Rhonnel Yvan
Nov 25 '18 at 12:49

@TchemedjeRhonnelYvan yes it is

– Smollet777
Nov 25 '18 at 12:54

do i have merged the code to one file, I put my two images in the placeholders but it doesn't

– Tchemedje Rhonnel Yvan
Nov 25 '18 at 13:26

can you maybe make it one file?

– Tchemedje Rhonnel Yvan
Nov 25 '18 at 13:27

@TchemedjeRhonnelYvan of course. Place that css code into your style tag. I updated the snippet

– Smollet777
Nov 25 '18 at 13:33

|
show 5 more comments

the background image doesn't change

– Tchemedje Rhonnel Yvan
Nov 25 '18 at 12:49

@TchemedjeRhonnelYvan yes it is

– Smollet777
Nov 25 '18 at 12:54

do i have merged the code to one file, I put my two images in the placeholders but it doesn't

– Tchemedje Rhonnel Yvan
Nov 25 '18 at 13:26

can you maybe make it one file?

– Tchemedje Rhonnel Yvan
Nov 25 '18 at 13:27

@TchemedjeRhonnelYvan of course. Place that css code into your style tag. I updated the snippet

– Smollet777
Nov 25 '18 at 13:33

the background image doesn't change

– Tchemedje Rhonnel Yvan
Nov 25 '18 at 12:49

@TchemedjeRhonnelYvan yes it is

– Smollet777
Nov 25 '18 at 12:54

do i have merged the code to one file, I put my two images in the placeholders but it doesn't

– Tchemedje Rhonnel Yvan
Nov 25 '18 at 13:26

can you maybe make it one file?

– Tchemedje Rhonnel Yvan
Nov 25 '18 at 13:27

@TchemedjeRhonnelYvan of course. Place that css code into your style tag. I updated the snippet

– Smollet777
Nov 25 '18 at 13:33

|
show 5 more comments

<!DOCTYPE html>

<html>



<head>

  <meta charset="utf-8">

  <title>300x600</title>

  <meta name="ad.size" content="width=300, height=600">

</head>







<body>





  <style>

    body,

    html {

      height: 600px;

      width: 300px;

      top: 100%;

      margin-left: 0px;

      margin-top: 0px;

    }

    

    body:before,

    body:after {

      content: '';

      position: absolute;

      width: 100%;

      height: 100%;

      background-repeat: no-repeat;

      background-position: center left:100%;

    }

    

    body:before {

      background-image: url('https://picsum.photos/300/600?image=100');

      animation: fadeOut 1s linear 2s 1 forwards;

      -webkit-animation: fadeOut 1s linear 2s 1 forwards;

      -moz-animation: fadeOut 1s linear 2s 1 forwards;

      -o-animation: fadeOut 1s linear 2s 1 forwards;

    }

    

    body:after {

      background-image: url('https://picsum.photos/300/600?image=201');

      z-index: -1;

    }

    

    @-webkit-keyframes fadeOut {

      from {

        opacity: 1;

      }

      to {

        opacity: 0;

      }

    }

    

    @keyframes fadeOut {

      from {

        opacity: 1;

      }

      to {

        opacity: 0;

      }

    }

  </style>







  <canvas id="canvas" width="226" height="226" style="position: absolute;

    left: 41px;

    top: 0;">

</canvas>







  <script>

    var canvas = document.getElementById("canvas");

    var ctx = canvas.getContext("2d");

    var radius = canvas.height / 2;

    ctx.translate(radius, radius);

    radius = radius * 0.50

    setInterval(drawClock, 1000);



    function drawClock() {

      drawFace(ctx, radius);

      drawNumbers(ctx, radius);

      drawTime(ctx, radius);

    }



    function drawFace(ctx, radius) {

      var grad;

      ctx.beginPath();

      ctx.arc(0, 0, radius, 0, 2 * Math.PI);

      ctx.fillStyle = 'white';

      ctx.fill();

      grad = ctx.createRadialGradient(0, 0, radius * 0.95, 0, 0, radius * 1.05);

      grad.addColorStop(0, '#333');

      grad.addColorStop(0.5, 'white');

      grad.addColorStop(1, '#333');

      ctx.strokeStyle = grad;

      ctx.lineWidth = radius * 0.1;

      ctx.stroke();

      ctx.beginPath();

      ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);

      ctx.fillStyle = '#333';

      ctx.fill();

    }



    function drawNumbers(ctx, radius) {

      var ang;

      var num;

      ctx.font = radius * 0.15 + "px arial";

      ctx.textBaseline = "middle";

      ctx.textAlign = "center";

      for (num = 1; num < 13; num++) {

        ang = num * Math.PI / 6;

        ctx.rotate(ang);

        ctx.translate(0, -radius * 0.85);

        ctx.rotate(-ang);

        ctx.fillText(num.toString(), 0, 0);

        ctx.rotate(ang);

        ctx.translate(0, radius * 0.85);

        ctx.rotate(-ang);

      }

    }



    function drawTime(ctx, radius) {

      var now = new Date();

      var hour = now.getHours();

      var minute = now.getMinutes();

      var second = now.getSeconds();

      //hour

      hour = hour % 12;

      hour = (hour * Math.PI / 6) +

        (minute * Math.PI / (6 * 60)) +

        (second * Math.PI / (360 * 60));

      drawHand(ctx, hour, radius * 0.5, radius * 0.07);

      //minute

      minute = (minute * Math.PI / 30) + (second * Math.PI / (30 * 60));

      drawHand(ctx, minute, radius * 0.8, radius * 0.07);

      // second

      second = (second * Math.PI / 30);

      drawHand(ctx, second, radius * 0.9, radius * 0.02);

    }



    function drawHand(ctx, pos, length, width) {

      ctx.beginPath();

      ctx.lineWidth = width;

      ctx.lineCap = "round";

      ctx.moveTo(0, 0);

      ctx.rotate(pos);

      ctx.lineTo(0, -length);

      ctx.stroke();

      ctx.rotate(-pos);

    }

  </script>



</body>



</html>

answered Nov 25 '18 at 14:03

Tchemedje Rhonnel Yvan

143

add a comment |

<!DOCTYPE html>

<html>



<head>

  <meta charset="utf-8">

  <title>300x600</title>

  <meta name="ad.size" content="width=300, height=600">

</head>







<body>





  <style>

    body,

    html {

      height: 600px;

      width: 300px;

      top: 100%;

      margin-left: 0px;

      margin-top: 0px;

    }

    

    body:before,

    body:after {

      content: '';

      position: absolute;

      width: 100%;

      height: 100%;

      background-repeat: no-repeat;

      background-position: center left:100%;

    }

    

    body:before {

      background-image: url('https://picsum.photos/300/600?image=100');

      animation: fadeOut 1s linear 2s 1 forwards;

      -webkit-animation: fadeOut 1s linear 2s 1 forwards;

      -moz-animation: fadeOut 1s linear 2s 1 forwards;

      -o-animation: fadeOut 1s linear 2s 1 forwards;

    }

    

    body:after {

      background-image: url('https://picsum.photos/300/600?image=201');

      z-index: -1;

    }

    

    @-webkit-keyframes fadeOut {

      from {

        opacity: 1;

      }

      to {

        opacity: 0;

      }

    }

    

    @keyframes fadeOut {

      from {

        opacity: 1;

      }

      to {

        opacity: 0;

      }

    }

  </style>







  <canvas id="canvas" width="226" height="226" style="position: absolute;

    left: 41px;

    top: 0;">

</canvas>







  <script>

    var canvas = document.getElementById("canvas");

    var ctx = canvas.getContext("2d");

    var radius = canvas.height / 2;

    ctx.translate(radius, radius);

    radius = radius * 0.50

    setInterval(drawClock, 1000);



    function drawClock() {

      drawFace(ctx, radius);

      drawNumbers(ctx, radius);

      drawTime(ctx, radius);

    }



    function drawFace(ctx, radius) {

      var grad;

      ctx.beginPath();

      ctx.arc(0, 0, radius, 0, 2 * Math.PI);

      ctx.fillStyle = 'white';

      ctx.fill();

      grad = ctx.createRadialGradient(0, 0, radius * 0.95, 0, 0, radius * 1.05);

      grad.addColorStop(0, '#333');

      grad.addColorStop(0.5, 'white');

      grad.addColorStop(1, '#333');

      ctx.strokeStyle = grad;

      ctx.lineWidth = radius * 0.1;

      ctx.stroke();

      ctx.beginPath();

      ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);

      ctx.fillStyle = '#333';

      ctx.fill();

    }



    function drawNumbers(ctx, radius) {

      var ang;

      var num;

      ctx.font = radius * 0.15 + "px arial";

      ctx.textBaseline = "middle";

      ctx.textAlign = "center";

      for (num = 1; num < 13; num++) {

        ang = num * Math.PI / 6;

        ctx.rotate(ang);

        ctx.translate(0, -radius * 0.85);

        ctx.rotate(-ang);

        ctx.fillText(num.toString(), 0, 0);

        ctx.rotate(ang);

        ctx.translate(0, radius * 0.85);

        ctx.rotate(-ang);

      }

    }



    function drawTime(ctx, radius) {

      var now = new Date();

      var hour = now.getHours();

      var minute = now.getMinutes();

      var second = now.getSeconds();

      //hour

      hour = hour % 12;

      hour = (hour * Math.PI / 6) +

        (minute * Math.PI / (6 * 60)) +

        (second * Math.PI / (360 * 60));

      drawHand(ctx, hour, radius * 0.5, radius * 0.07);

      //minute

      minute = (minute * Math.PI / 30) + (second * Math.PI / (30 * 60));

      drawHand(ctx, minute, radius * 0.8, radius * 0.07);

      // second

      second = (second * Math.PI / 30);

      drawHand(ctx, second, radius * 0.9, radius * 0.02);

    }



    function drawHand(ctx, pos, length, width) {

      ctx.beginPath();

      ctx.lineWidth = width;

      ctx.lineCap = "round";

      ctx.moveTo(0, 0);

      ctx.rotate(pos);

      ctx.lineTo(0, -length);

      ctx.stroke();

      ctx.rotate(-pos);

    }

  </script>



</body>



</html>

answered Nov 25 '18 at 14:03

Tchemedje Rhonnel Yvan

143

add a comment |

<!DOCTYPE html>

<html>



<head>

  <meta charset="utf-8">

  <title>300x600</title>

  <meta name="ad.size" content="width=300, height=600">

</head>







<body>





  <style>

    body,

    html {

      height: 600px;

      width: 300px;

      top: 100%;

      margin-left: 0px;

      margin-top: 0px;

    }

    

    body:before,

    body:after {

      content: '';

      position: absolute;

      width: 100%;

      height: 100%;

      background-repeat: no-repeat;

      background-position: center left:100%;

    }

    

    body:before {

      background-image: url('https://picsum.photos/300/600?image=100');

      animation: fadeOut 1s linear 2s 1 forwards;

      -webkit-animation: fadeOut 1s linear 2s 1 forwards;

      -moz-animation: fadeOut 1s linear 2s 1 forwards;

      -o-animation: fadeOut 1s linear 2s 1 forwards;

    }

    

    body:after {

      background-image: url('https://picsum.photos/300/600?image=201');

      z-index: -1;

    }

    

    @-webkit-keyframes fadeOut {

      from {

        opacity: 1;

      }

      to {

        opacity: 0;

      }

    }

    

    @keyframes fadeOut {

      from {

        opacity: 1;

      }

      to {

        opacity: 0;

      }

    }

  </style>







  <canvas id="canvas" width="226" height="226" style="position: absolute;

    left: 41px;

    top: 0;">

</canvas>







  <script>

    var canvas = document.getElementById("canvas");

    var ctx = canvas.getContext("2d");

    var radius = canvas.height / 2;

    ctx.translate(radius, radius);

    radius = radius * 0.50

    setInterval(drawClock, 1000);



    function drawClock() {

      drawFace(ctx, radius);

      drawNumbers(ctx, radius);

      drawTime(ctx, radius);

    }



    function drawFace(ctx, radius) {

      var grad;

      ctx.beginPath();

      ctx.arc(0, 0, radius, 0, 2 * Math.PI);

      ctx.fillStyle = 'white';

      ctx.fill();

      grad = ctx.createRadialGradient(0, 0, radius * 0.95, 0, 0, radius * 1.05);

      grad.addColorStop(0, '#333');

      grad.addColorStop(0.5, 'white');

      grad.addColorStop(1, '#333');

      ctx.strokeStyle = grad;

      ctx.lineWidth = radius * 0.1;

      ctx.stroke();

      ctx.beginPath();

      ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);

      ctx.fillStyle = '#333';

      ctx.fill();

    }



    function drawNumbers(ctx, radius) {

      var ang;

      var num;

      ctx.font = radius * 0.15 + "px arial";

      ctx.textBaseline = "middle";

      ctx.textAlign = "center";

      for (num = 1; num < 13; num++) {

        ang = num * Math.PI / 6;

        ctx.rotate(ang);

        ctx.translate(0, -radius * 0.85);

        ctx.rotate(-ang);

        ctx.fillText(num.toString(), 0, 0);

        ctx.rotate(ang);

        ctx.translate(0, radius * 0.85);

        ctx.rotate(-ang);

      }

    }



    function drawTime(ctx, radius) {

      var now = new Date();

      var hour = now.getHours();

      var minute = now.getMinutes();

      var second = now.getSeconds();

      //hour

      hour = hour % 12;

      hour = (hour * Math.PI / 6) +

        (minute * Math.PI / (6 * 60)) +

        (second * Math.PI / (360 * 60));

      drawHand(ctx, hour, radius * 0.5, radius * 0.07);

      //minute

      minute = (minute * Math.PI / 30) + (second * Math.PI / (30 * 60));

      drawHand(ctx, minute, radius * 0.8, radius * 0.07);

      // second

      second = (second * Math.PI / 30);

      drawHand(ctx, second, radius * 0.9, radius * 0.02);

    }



    function drawHand(ctx, pos, length, width) {

      ctx.beginPath();

      ctx.lineWidth = width;

      ctx.lineCap = "round";

      ctx.moveTo(0, 0);

      ctx.rotate(pos);

      ctx.lineTo(0, -length);

      ctx.stroke();

      ctx.rotate(-pos);

    }

  </script>



</body>



</html>

answered Nov 25 '18 at 14:03

Tchemedje Rhonnel Yvan

143

<!DOCTYPE html>

<html>



<head>

  <meta charset="utf-8">

  <title>300x600</title>

  <meta name="ad.size" content="width=300, height=600">

</head>







<body>





  <style>

    body,

    html {

      height: 600px;

      width: 300px;

      top: 100%;

      margin-left: 0px;

      margin-top: 0px;

    }

    

    body:before,

    body:after {

      content: '';

      position: absolute;

      width: 100%;

      height: 100%;

      background-repeat: no-repeat;

      background-position: center left:100%;

    }

    

    body:before {

      background-image: url('https://picsum.photos/300/600?image=100');

      animation: fadeOut 1s linear 2s 1 forwards;

      -webkit-animation: fadeOut 1s linear 2s 1 forwards;

      -moz-animation: fadeOut 1s linear 2s 1 forwards;

      -o-animation: fadeOut 1s linear 2s 1 forwards;

    }

    

    body:after {

      background-image: url('https://picsum.photos/300/600?image=201');

      z-index: -1;

    }

    

    @-webkit-keyframes fadeOut {

      from {

        opacity: 1;

      }

      to {

        opacity: 0;

      }

    }

    

    @keyframes fadeOut {

      from {

        opacity: 1;

      }

      to {

        opacity: 0;

      }

    }

  </style>







  <canvas id="canvas" width="226" height="226" style="position: absolute;

    left: 41px;

    top: 0;">

</canvas>







  <script>

    var canvas = document.getElementById("canvas");

    var ctx = canvas.getContext("2d");

    var radius = canvas.height / 2;

    ctx.translate(radius, radius);

    radius = radius * 0.50

    setInterval(drawClock, 1000);



    function drawClock() {

      drawFace(ctx, radius);

      drawNumbers(ctx, radius);

      drawTime(ctx, radius);

    }



    function drawFace(ctx, radius) {

      var grad;

      ctx.beginPath();

      ctx.arc(0, 0, radius, 0, 2 * Math.PI);

      ctx.fillStyle = 'white';

      ctx.fill();

      grad = ctx.createRadialGradient(0, 0, radius * 0.95, 0, 0, radius * 1.05);

      grad.addColorStop(0, '#333');

      grad.addColorStop(0.5, 'white');

      grad.addColorStop(1, '#333');

      ctx.strokeStyle = grad;

      ctx.lineWidth = radius * 0.1;

      ctx.stroke();

      ctx.beginPath();

      ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);

      ctx.fillStyle = '#333';

      ctx.fill();

    }



    function drawNumbers(ctx, radius) {

      var ang;

      var num;

      ctx.font = radius * 0.15 + "px arial";

      ctx.textBaseline = "middle";

      ctx.textAlign = "center";

      for (num = 1; num < 13; num++) {

        ang = num * Math.PI / 6;

        ctx.rotate(ang);

        ctx.translate(0, -radius * 0.85);

        ctx.rotate(-ang);

        ctx.fillText(num.toString(), 0, 0);

        ctx.rotate(ang);

        ctx.translate(0, radius * 0.85);

        ctx.rotate(-ang);

      }

    }



    function drawTime(ctx, radius) {

      var now = new Date();

      var hour = now.getHours();

      var minute = now.getMinutes();

      var second = now.getSeconds();

      //hour

      hour = hour % 12;

      hour = (hour * Math.PI / 6) +

        (minute * Math.PI / (6 * 60)) +

        (second * Math.PI / (360 * 60));

      drawHand(ctx, hour, radius * 0.5, radius * 0.07);

      //minute

      minute = (minute * Math.PI / 30) + (second * Math.PI / (30 * 60));

      drawHand(ctx, minute, radius * 0.8, radius * 0.07);

      // second

      second = (second * Math.PI / 30);

      drawHand(ctx, second, radius * 0.9, radius * 0.02);

    }



    function drawHand(ctx, pos, length, width) {

      ctx.beginPath();

      ctx.lineWidth = width;

      ctx.lineCap = "round";

      ctx.moveTo(0, 0);

      ctx.rotate(pos);

      ctx.lineTo(0, -length);

      ctx.stroke();

      ctx.rotate(-pos);

    }

  </script>



</body>



</html>

<!DOCTYPE html>

<html>



<head>

  <meta charset="utf-8">

  <title>300x600</title>

  <meta name="ad.size" content="width=300, height=600">

</head>







<body>





  <style>

    body,

    html {

      height: 600px;

      width: 300px;

      top: 100%;

      margin-left: 0px;

      margin-top: 0px;

    }

    

    body:before,

    body:after {

      content: '';

      position: absolute;

      width: 100%;

      height: 100%;

      background-repeat: no-repeat;

      background-position: center left:100%;

    }

    

    body:before {

      background-image: url('https://picsum.photos/300/600?image=100');

      animation: fadeOut 1s linear 2s 1 forwards;

      -webkit-animation: fadeOut 1s linear 2s 1 forwards;

      -moz-animation: fadeOut 1s linear 2s 1 forwards;

      -o-animation: fadeOut 1s linear 2s 1 forwards;

    }

    

    body:after {

      background-image: url('https://picsum.photos/300/600?image=201');

      z-index: -1;

    }

    

    @-webkit-keyframes fadeOut {

      from {

        opacity: 1;

      }

      to {

        opacity: 0;

      }

    }

    

    @keyframes fadeOut {

      from {

        opacity: 1;

      }

      to {

        opacity: 0;

      }

    }

  </style>







  <canvas id="canvas" width="226" height="226" style="position: absolute;

    left: 41px;

    top: 0;">

</canvas>







  <script>

    var canvas = document.getElementById("canvas");

    var ctx = canvas.getContext("2d");

    var radius = canvas.height / 2;

    ctx.translate(radius, radius);

    radius = radius * 0.50

    setInterval(drawClock, 1000);



    function drawClock() {

      drawFace(ctx, radius);

      drawNumbers(ctx, radius);

      drawTime(ctx, radius);

    }



    function drawFace(ctx, radius) {

      var grad;

      ctx.beginPath();

      ctx.arc(0, 0, radius, 0, 2 * Math.PI);

      ctx.fillStyle = 'white';

      ctx.fill();

      grad = ctx.createRadialGradient(0, 0, radius * 0.95, 0, 0, radius * 1.05);

      grad.addColorStop(0, '#333');

      grad.addColorStop(0.5, 'white');

      grad.addColorStop(1, '#333');

      ctx.strokeStyle = grad;

      ctx.lineWidth = radius * 0.1;

      ctx.stroke();

      ctx.beginPath();

      ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);

      ctx.fillStyle = '#333';

      ctx.fill();

    }



    function drawNumbers(ctx, radius) {

      var ang;

      var num;

      ctx.font = radius * 0.15 + "px arial";

      ctx.textBaseline = "middle";

      ctx.textAlign = "center";

      for (num = 1; num < 13; num++) {

        ang = num * Math.PI / 6;

        ctx.rotate(ang);

        ctx.translate(0, -radius * 0.85);

        ctx.rotate(-ang);

        ctx.fillText(num.toString(), 0, 0);

        ctx.rotate(ang);

        ctx.translate(0, radius * 0.85);

        ctx.rotate(-ang);

      }

    }



    function drawTime(ctx, radius) {

      var now = new Date();

      var hour = now.getHours();

      var minute = now.getMinutes();

      var second = now.getSeconds();

      //hour

      hour = hour % 12;

      hour = (hour * Math.PI / 6) +

        (minute * Math.PI / (6 * 60)) +

        (second * Math.PI / (360 * 60));

      drawHand(ctx, hour, radius * 0.5, radius * 0.07);

      //minute

      minute = (minute * Math.PI / 30) + (second * Math.PI / (30 * 60));

      drawHand(ctx, minute, radius * 0.8, radius * 0.07);

      // second

      second = (second * Math.PI / 30);

      drawHand(ctx, second, radius * 0.9, radius * 0.02);

    }



    function drawHand(ctx, pos, length, width) {

      ctx.beginPath();

      ctx.lineWidth = width;

      ctx.lineCap = "round";

      ctx.moveTo(0, 0);

      ctx.rotate(pos);

      ctx.lineTo(0, -length);

      ctx.stroke();

      ctx.rotate(-pos);

    }

  </script>



</body>



</html>

<!DOCTYPE html>

<html>



<head>

  <meta charset="utf-8">

  <title>300x600</title>

  <meta name="ad.size" content="width=300, height=600">

</head>







<body>





  <style>

    body,

    html {

      height: 600px;

      width: 300px;

      top: 100%;

      margin-left: 0px;

      margin-top: 0px;

    }

    

    body:before,

    body:after {

      content: '';

      position: absolute;

      width: 100%;

      height: 100%;

      background-repeat: no-repeat;

      background-position: center left:100%;

    }

    

    body:before {

      background-image: url('https://picsum.photos/300/600?image=100');

      animation: fadeOut 1s linear 2s 1 forwards;

      -webkit-animation: fadeOut 1s linear 2s 1 forwards;

      -moz-animation: fadeOut 1s linear 2s 1 forwards;

      -o-animation: fadeOut 1s linear 2s 1 forwards;

    }

    

    body:after {

      background-image: url('https://picsum.photos/300/600?image=201');

      z-index: -1;

    }

    

    @-webkit-keyframes fadeOut {

      from {

        opacity: 1;

      }

      to {

        opacity: 0;

      }

    }

    

    @keyframes fadeOut {

      from {

        opacity: 1;

      }

      to {

        opacity: 0;

      }

    }

  </style>







  <canvas id="canvas" width="226" height="226" style="position: absolute;

    left: 41px;

    top: 0;">

</canvas>







  <script>

    var canvas = document.getElementById("canvas");

    var ctx = canvas.getContext("2d");

    var radius = canvas.height / 2;

    ctx.translate(radius, radius);

    radius = radius * 0.50

    setInterval(drawClock, 1000);



    function drawClock() {

      drawFace(ctx, radius);

      drawNumbers(ctx, radius);

      drawTime(ctx, radius);

    }



    function drawFace(ctx, radius) {

      var grad;

      ctx.beginPath();

      ctx.arc(0, 0, radius, 0, 2 * Math.PI);

      ctx.fillStyle = 'white';

      ctx.fill();

      grad = ctx.createRadialGradient(0, 0, radius * 0.95, 0, 0, radius * 1.05);

      grad.addColorStop(0, '#333');

      grad.addColorStop(0.5, 'white');

      grad.addColorStop(1, '#333');

      ctx.strokeStyle = grad;

      ctx.lineWidth = radius * 0.1;

      ctx.stroke();

      ctx.beginPath();

      ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);

      ctx.fillStyle = '#333';

      ctx.fill();

    }



    function drawNumbers(ctx, radius) {

      var ang;

      var num;

      ctx.font = radius * 0.15 + "px arial";

      ctx.textBaseline = "middle";

      ctx.textAlign = "center";

      for (num = 1; num < 13; num++) {

        ang = num * Math.PI / 6;

        ctx.rotate(ang);

        ctx.translate(0, -radius * 0.85);

        ctx.rotate(-ang);

        ctx.fillText(num.toString(), 0, 0);

        ctx.rotate(ang);

        ctx.translate(0, radius * 0.85);

        ctx.rotate(-ang);

      }

    }



    function drawTime(ctx, radius) {

      var now = new Date();

      var hour = now.getHours();

      var minute = now.getMinutes();

      var second = now.getSeconds();

      //hour

      hour = hour % 12;

      hour = (hour * Math.PI / 6) +

        (minute * Math.PI / (6 * 60)) +

        (second * Math.PI / (360 * 60));

      drawHand(ctx, hour, radius * 0.5, radius * 0.07);

      //minute

      minute = (minute * Math.PI / 30) + (second * Math.PI / (30 * 60));

      drawHand(ctx, minute, radius * 0.8, radius * 0.07);

      // second

      second = (second * Math.PI / 30);

      drawHand(ctx, second, radius * 0.9, radius * 0.02);

    }



    function drawHand(ctx, pos, length, width) {

      ctx.beginPath();

      ctx.lineWidth = width;

      ctx.lineCap = "round";

      ctx.moveTo(0, 0);

      ctx.rotate(pos);

      ctx.lineTo(0, -length);

      ctx.stroke();

      ctx.rotate(-pos);

    }

  </script>



</body>



</html>

answered Nov 25 '18 at 14:03

Tchemedje Rhonnel Yvan

143

answered Nov 25 '18 at 14:03

Tchemedje Rhonnel Yvan

143

answered Nov 25 '18 at 14:03

Tchemedje Rhonnel Yvan

143

answered Nov 25 '18 at 14:03

Tchemedje Rhonnel Yvan

143

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Btukfyl