Zur besten Antwort gewählt
Haben Sie die gleiche Frage? Dieser Frage folgen
Dez 01, 2018 - 13:20
Dez 02, 2018 - 14:27
<?php
$slide = file_get_contents("sekunden.dat");
?>
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Countdown</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"
>
<style>
/* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
body {
background:#000000;
}
canvas {
display:block;
margin:20px auto;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"
></script>
</head>
<body>
<canvas id="mycanvas" width="250" height="250"></canvas>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></
script>
<script >
/*===============================
Countdown.
Based on Kerem Suer dribble shot:
http://dribbble.com/shots/560534
change value of the variable --countTo-- to set the timer.
Would love to see someone adding a UI to this one.
=================================*/
(function drawCanvas(){
var canvas=document.getElementById('mycanvas');
var ctx=canvas.getContext('2d');
var cWidth=canvas.width;
var cHeight=canvas.height;
//hier wird die php variable slide in die javascript countTo variable übergeben
var countTo="<?php echo $slide; ?>";
var min=Math.floor(countTo/60);
var sec=countTo-(min*60);
var counter=0;
var angle=270;
var inc=360/countTo;
function drawScreen() {
//======= reset canvas
ctx.fill
ctx.fillRect(0,0,cWidth,cHeight);
//========== base arc
ctx.beginPath();
ctx.stroke
ctx.lineWidth=14;
ctx.arc(cWidth/2,cHeight/2,100,(Math.PI/180)*0,(Math.PI/180)*360,false);
ctx.stroke();
ctx.closePath();
//========== dynamic arc
ctx.beginPath();
ctx.stroke
ctx.lineWidth=14;
ctx.arc(cWidth/2,cHeight/2,100,(Math.PI/180)*270,(Math.PI/180)*angle,false);
ctx.stroke();
ctx.closePath();
//======== inner shadow arc
grad=ctx.createRadialGradient(cWidth/2,cHeight/2,80,cWidth/2,cHeight/2,115);
grad.addColorStop(0.0,'rgba(0,0,0,.4)');
grad.addColorStop(0.5,'rgba(0,0,0,0)');
grad.addColorStop(1.0,'rgba(0,0,0,0.4)');
ctx.beginPath();
ctx.stroke
ctx.lineWidth=14;
ctx.arc(cWidth/2,cHeight/2,100,(Math.PI/180)*0,(Math.PI/180)*360,false);
ctx.stroke();
ctx.closePath();
//======== bevel arc
grad=ctx.createLinearGradient(cWidth/2,0,cWidth/2,cHeight);
grad.addColorStop(0.0,'#6c6f72');
grad.addColorStop(0.5,'#252424');
ctx.beginPath();
ctx.stroke
ctx.lineWidth=1;
ctx.arc(cWidth/2,cHeight/2,93,(Math.PI/180)*0,(Math.PI/180)*360,true);
ctx.stroke();
ctx.closePath();
//====== emboss arc
grad=ctx.createLinearGradient(cWidth/2,0,cWidth/2,cHeight);
grad.addColorStop(0.0,'transparent');
grad.addColorStop(0.98,'#6c6f72');
ctx.beginPath();
ctx.stroke
ctx.lineWidth=1;
ctx.arc(cWidth/2,cHeight/2,107,(Math.PI/180)*0,(Math.PI/180)*360,true);
ctx.stroke();
ctx.closePath();
//====== Labels
var textColor='#646464';
var textSize="12";
var fontFace="helvetica, arial, sans-serif";
ctx.fill
ctx.font=textSize+"px "+fontFace;
ctx.fillText('MIN',cWidth/2-46,cHeight/2-40);
ctx.fillText('SEC',cWidth/2+25,cHeight/2-15);
//====== Values
ctx.fill
if (min>9) {
ctx.font='84px '+fontFace;
ctx.fillText('9' ,cWidth/2-55,cHeight/2+35);
ctx.font='24px '+fontFace;
ctx.fillText('+' ,cWidth/2-72,cHeight/2-5);
}
else {
ctx.font='84px '+fontFace;
ctx.fillText(min ,cWidth/2-60,cHeight/2+35);
}
ctx.font='50px '+fontFace;
if (sec<10) {
ctx.fillText('0'+sec,cWidth/2+10,cHeight/2+35);
}
else {
ctx.fillText(sec,cWidth/2+10,cHeight/2+35);
}
if (sec<=0 && counter<countTo) {
angle+=inc;
counter++;
min--;
sec=59;
} else
if (counter>=countTo) {
sec=0;
min=0;
} else {
angle+=inc;
counter++;
sec--;
}
}
setInterval(drawScreen,1000);
})()
</script>
</body>
</html>
Dez 02, 2018 - 14:29
if (isset($_GET["sec"])){ $sekunden = $_GET["sec"]; } else { $sekunden="x"; }
if ($sekunden != x){
file_put_contents("sekunden.dat", $sekunden);
}
?>
Dez 05, 2018 - 12:14
Quelle: Countdown
Dez 05, 2018 - 12:33
<?php
$slide = file_get_contents("sekunden.dat");
?>
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Countdown</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"
>
<style>
/* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
body {
background:#171616;
}
canvas {
display:block;
margin:0px auto;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"
></script>
</head>
<body>
<canvas id="mycanvas" width="250" height="250"></canvas>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></
script>
<script >
/*===============================
Countdown.
Based on Kerem Suer dribble shot:
http://dribbble.com/shots/560534
change value of the variable --countTo-- to set the timer.
Would love to see someone adding a UI to this one.
=================================*/
(function drawCanvas(){
var canvas=document.getElementById('mycanvas');
var ctx=canvas.getContext('2d');
var cWidth=canvas.width;
var cHeight=canvas.height;
//hier wird die php variable slide in die javascript countTo variable �bergeben
var countTo="<?php echo $slide; ?>";
var min=Math.floor(countTo/60);
var sec=countTo-(min*60);
var counter=0;
var angle=270;
var inc=360/countTo;
function drawScreen() {
//======= reset canvas
ctx.fill
ctx.fillRect(0,0,cWidth,cHeight);
//========== base arc
ctx.beginPath();
ctx.stroke
ctx.lineWidth=14;
ctx.arc(cWidth/2,cHeight/2,100,(Math.PI/180)*0,(Math.PI/180)*360,false);
ctx.stroke();
ctx.closePath();
//========== dynamic arc
ctx.beginPath();
ctx.stroke
ctx.lineWidth=14;
ctx.arc(cWidth/2,cHeight/2,100,(Math.PI/180)*270,(Math.PI/180)*angle,false);
ctx.stroke();
ctx.closePath();
//======== inner shadow arc
grad=ctx.createRadialGradient(cWidth/2,cHeight/2,80,cWidth/2,cHeight/2,115);
grad.addColorStop(0.0,'rgba(0,0,0,.4)');
grad.addColorStop(0.5,'rgba(0,0,0,0)');
grad.addColorStop(1.0,'rgba(0,0,0,0.4)');
ctx.beginPath();
ctx.stroke
ctx.lineWidth=14;
ctx.arc(cWidth/2,cHeight/2,100,(Math.PI/180)*0,(Math.PI/180)*360,false);
ctx.stroke();
ctx.closePath();
//======== bevel arc
grad=ctx.createLinearGradient(cWidth/2,0,cWidth/2,cHeight);
grad.addColorStop(0.0,'#6c6f72');
grad.addColorStop(0.5,'#252424');
ctx.beginPath();
ctx.stroke
ctx.lineWidth=1;
ctx.arc(cWidth/2,cHeight/2,93,(Math.PI/180)*0,(Math.PI/180)*360,true);
ctx.stroke();
ctx.closePath();
//====== emboss arc
grad=ctx.createLinearGradient(cWidth/2,0,cWidth/2,cHeight);
grad.addColorStop(0.0,'transparent');
grad.addColorStop(0.98,'#6c6f72');
ctx.beginPath();
ctx.stroke
ctx.lineWidth=1;
ctx.arc(cWidth/2,cHeight/2,107,(Math.PI/180)*0,(Math.PI/180)*360,true);
ctx.stroke();
ctx.closePath();
//====== Labels
var textColor='#646464';
var textSize="15";
var fontFace="helvetica, arial, sans-serif";
ctx.fill
ctx.font=textSize+"px "+fontFace;
ctx.fillText('sec remaining',cWidth/2-45,cHeight/3-15);
//====== Values
ctx.fill
ctx.font='84px '+fontFace;
if (sec<10) {
ctx.fillText('0'+sec,cWidth/4+15,cHeight/2+30);
}
else {
ctx.fillText(sec,cWidth/4+15,cHeight/2+30);
}
if (sec<=0 && counter<countTo) {
angle+=inc;
counter++;
min--;
sec=59;
} else
if (counter>=countTo) {
sec=0;
min=0;
} else {
angle+=inc;
counter++;
sec--;
}
}
setInterval(drawScreen,1000);
})()
</script>
</body>
</html>
Quelle: Countdown
Jan 20, 2019 - 05:03
Quelle: Counter
Von
ich stehe auf dem Schlauch
die Datei sekunden.dat ist leer, richtig?
was ist mit der Datei sekunden.php ?
Von
du kannst in die datei sekunden.dat z.b. 57 eingeben
oder du rufst vorher die http sekunden seite mit der zahl
sekunden.ph. habe ich dir auch gepostet
Von
sekunden.php
<?php
if (isset($_GET["sec"])){ $sekunden = $_GET["sec"]; } else { $sekunden="x"; }
if ($sekunden != x){
file_put_contents("sekunden.dat", $sekunden);
}
?>
Von
wo läuft dein server????
Von
fehlt da nicht was?
Von
was soll da fehlen du hast 2 php seiten
index.php
und sekunden.php
und eine datei sekunden.dat
Von
Mamp Webserver, jetzt habe ich den kompleten Code für sekunden.php
Von
https://homematic-forum.de/forum/viewtopic.php?f=35&t=47245
kannst du von dort laden
Von
muss jetzt los
nicht vergessen schreibrechte für sekunden.dat vergeben, sonst wird nicht geändert der wert
Von
gut ich probiers Danke vorerst recht herzlich
liebe Grüsse Peter
Von
gruss, bitte
Von
hallo zdenko33
funktioniert alles einwandfrei, GROSSE KLASSE.
Danke sehr, sehr herzlich für Deine ausserordentliche Hilsbereitschaft.
liebe Grüsse Peter
Von
Super...viel spass damit und lg.
Neuen Kommentar hinzufügen