• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Probleme mit SetTimeout

C

Conkuist

Mitglied
Hallo
Habe hier mal ein bisschen probiert
CSS und Javascript zu kombinieren

Wollte zuert nur mal die Oberfläche gestalten
alles andere kommt später.

Leider habe ich ein Problem mit dem Lautstärkebalken
der beim schnellen lauter und leise machen immer zu schnell verschwindet

Ich hoffe mal ihr könnt mir Tipps geben wie ich das Problem in den Griff bekomme.

Code: 
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>Musikplayer</title>
<style type="text/css">
body
{margin:0px;background:#ccc;font-family:century gothic;
-moz-user-select:none;
-ms-user-select:none;
-webkit-user-select:none;
cursor:default;}
.rahmen{
background:-moz-linear-gradient(top,#fff,#eee);
background:-ms-linear-gradient(top,#fff,#eee);
background:-webkit-linear-gradient(top,#fff,#eee);
padding:10px 10px 0px 10px;box-shadow:rgba(0,0,0,0.5) 0px 0px 10px;margin-top:100px;margin-left:100px;float:left;}
.block{
background:-moz-linear-gradient(top,#eee,#ddd);
background:-ms-linear-gradient(top,#eee,#ddd);
background:-webkit-linear-gradient(top,#eee,#ddd);
box-shadow:rgba(0,0,0,0.5) 0px 0px 5px inset;}
.name{height:30px;display:table-cell;vertical-align:middle;}
#player{width:500px;height:50px;
background:-moz-linear-gradient(top,#fff,#eee);
background:-ms-linear-gradient(top,#fff,#eee);
background:-webkit-linear-gradient(top,#fff,#eee);
-moz-transform:rotate(1deg);
-ms-transform:rotate(1deg);
-webkit-transform:rotate(1deg);
box-shadow:rgba(0,0,0,0.5) 0px 0px 10px;float:left;margin-top:75px;margin-left:75px;}
#fenster{width:1300px;margin:auto;background:rgba(0,0,0,0.1);height:900px;margin-top:50px;border-radius:15px;}
button{
background:-moz-linear-gradient(top,#bbb,#aaa);
background:-ms-linear-gradient(top,#bbb,#aaa);
background:-webkit-linear-gradient(top,#bbb,#aaa);
height:40px;width:60px;border:none;margin:5px 0px 5px 5px;border-radius:3px;font-family:century gothic;font-size:24px;color:#fff;float:left;}
button:hover{
background:-moz-linear-gradient(top,#777,#888);
background:-ms-linear-gradient(top,#777,#888);
background:-webkit-linear-gradient(top,#777,#888);
color:#ccc;}
#volume{height:10px;background:#808080;float:left;width:490px;opacity:0;margin-top:5px;border:#eee 5px solid;}
#balken{height:10px;background:#80bf00;width:100%;}
</style>
</head>
<body>
<div id="fenster">
<div class="rahmen" style="width:500px;-moz-transform:rotate(-5deg);-ms-transform:rotate(-5deg);-webkit-transform:rotate(-5deg);">
<div class="block" style="height:500px;background:none;"><img src="" style="position:relative;z-index:-1;width:500px"></div>
<p class="name">Blow (Radio Edit)</p>
</div>
<div class="rahmen" style="width:300px;-moz-transform:rotate(2deg);-ms-transform:rotate(2deg);-webkit-transform:rotate(2deg);margin-top:75px;">
<div class="block" style="height:300px;background:none;"><img src="" style="position:relative;width:300px;position:relative;z-index:-1;"></div>
<p class="name">Put Your Hands Up</p>
</div>
<div id="player">
<button id="playPause" style="width:100px;">Play</button>
<button>&lt;</button>
<button>></button>
<button id="down">-</button>
<button id="up">+</button>
<button id="mute" style="width:125px;">Mute</button>
<div id="volume"><div id="balken"></div></div>
</div>
</div>
<script>
var x=100
var v=document.getElementById("volume")
var u=document.getElementById("up")
var d=document.getElementById("down")
var pp=document.getElementById("playPause")
var m=document.getElementById("mute")
var b=document.getElementById("balken")
pp.addEventListener("click",playPause,false)
m.addEventListener("click",mute,false)
u.addEventListener("click",volumeUp,false)
d.addEventListener("click",volumeDown,false)
function playPause()
{
if(pp.innerHTML.match("Pause"))
{pp.innerHTML="Play"}
else{pp.innerHTML="Pause"}
}
function mute()
{
if(m.innerHTML.match("Unmute"))
{m.innerHTML="Mute"}
else{m.innerHTML="Unmute"}
}
function volumeUp()
{
if(x==100)
{v.style.opacity="1";setTimeout(function(){v.style.opacity="0"},2000);}
else
{x+=10
{v.style.opacity="1";setTimeout(function(){v.style.opacity="0"},2000);b.style.width=x+"%";b.style.transition="0.3s";}
}
}
function volumeDown()
{
if(x==0)
{v.style.opacity="1";setTimeout(function(){v.style.opacity="0"},2000);}
else
{x-=10
{v.style.opacity="1";setTimeout(function(){v.style.opacity="0"},2000);b.style.width=x+"%";b.style.transition="0.3s";}
}
}
</script>
</body>
</html>

Weiß jemand warum Chrome die gedrehten div's so schlecht rendert ?
 
Zuletzt bearbeitet:
Werbung:
Hier noch ein weiteres Problem mit setInterval.

Wie kann ich setInterval wieder stoppen?

Wie kann ich verhindern das setIntervall gleichzeitig mehrfach ausgeführt wird?
(Bewegung wird dadurch unerwünscht zusätzlich beschleunigt)

Code: 
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>setInterval</title>
<style type="text/css">
body
{font-family:century gothic,arial;
-moz-user-select:none;
-ms-user-select:none;
-webkit-user-select:none;
cursor:default;
background:#404040;
overflow:hidden;}

#block
{width:300px;height:300px;
background:#bfff00;
border-radius:5px;
box-shadow:rgba(0,0,0,0.5)0px 0px 25px;}

#wert
{font-size:50px;margin:0px;color:#fff;}

#block p
{margin:0px;display:table-cell;
height:300px;width:300px;
vertical-align:middle;text-align:center;
font-size:75px;color:#404040;}
</style>
</head>
<body>
<p id="wert">0</p>
<div id="block"><p id="p">Start</p></div>
<script type="text/javascript">
var x=0
var b=document.getElementById("block");
var w=document.getElementById("wert");
var p=document.getElementById("p");
    b.addEventListener("click",Move,false)
function Move()
{setInterval(function()
{x+=1;b.style.marginLeft=x+"px";w.innerHTML=x;{if(x>=500){b.style.background="red";p.innerHTML="Stop";};};},10);}
</script>
</body>
</html>
 
Zuletzt bearbeitet:
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben