Anzeige: united-domains - Die ganze Welt der Domains
Einfache & schnelle Domain-Registrierung zu fairen Preisen ohne Einrichtungsgebühren. Mehr als 250 Domain-Endungen aus einer Hand inklusive E-Mail- & Web-Weiterleitung. Einzigartiges Domain-Portfolio zur bequemen & sicheren Verwaltung Ihrer Domain-Namen.
Jetzt Domain-Check bei united-domains!
Farbwechsel zu Farbe X bei Tastendruck X
Autor: tucko
Datum: 07.01.2012 17:41:24
Mein 6-Monate alter Bub haut gerne auf Papas Schoss sitzend auf den Tasten rum - leider fehlt dort der direkte Feedback am Monitor.
ich bräuchte also ein:
if Taste ... dann Screencolor = ...;
bzw. verbessert:
if Taste ... dann Screencolor = ... und Sound = .. ... .wav
In Java oder JS habe ich bisher noch nie etwas programmiert;
außer ein bisschen BASIC zu Schulzeiten und excel-VBA sind meine Programmierkenntnisse eher beschränkt.
1)
Ob JavaScript für die Lösung der genannten Problematik in Frage kommt, wäre daher die erste Frage.
2)
Und wenn es eine Lösung in JS gibt, dann wäre mir die simpelste, am wenigsten verschachtelte "Idiotenlösung" zum Verstehen am liebsten.
Nötigenfalls tippe ich dann auch für jede Taste einen einzelnen Absatz - der code darf also wirklich einfach sein...
... weiter Fragen kommen bestimmt auch so...
Danke im Vorab,
-Tucko
Re: Farbwechsel zu Farbe X bei Tastendruck X
Autor: Freddy
Datum: 07.01.2012 20:09:09
Hallo,
und herzlich willkommen im Forum. :-)
> Mein 6-Monate alter Bub haut gerne auf Papas
> Schoss sitzend auf den Tasten rum - leider fehlt
> dort der direkte Feedback am Monitor.
>
> ich bräuchte also ein:
> if Taste ... dann Screencolor = ...;
>
> bzw. verbessert:
> if Taste ... dann Screencolor = ... und Sound =
Läuft im Firefox und Chrome.
Mit Sound aber eher schlecht als recht (ggfs. Zeile 19 + 20 auskommentieren, Browser waren darauf nie ausgelegt), besser Du referenzierst (verlinkst) eine Sounddatei auf deinem Rechner.
Der Code "quick 'n dirty", und nicht optimal. Aber es passiert was. :-)
Als action_bub.html speichern und im Browser aufrufen.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Action Bub</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
// rand() von <http://phpjs.org/functions/rand:498>
// gepackt mit Dean Edwards Javascript Compressor
eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\b'+e(c)+'\b','g'),k[c]);return p}('6 3(a,b){7 c=8.9;4(c===0){a=0;b=d}e 4(c===1){f g h('i: 3() j k 2 l, 1 m');}n 5.o(5.p()*(b-a+1))+a}',26,26,'|||rand|if|Math|function|var|arguments|length||||2147483647|else|throw|new|Error|Warning|expects|exactly|parameters|given|return|floor|random'.split('|'),0,{}))
if (typeof(ActionBub) == 'undefined') var ActionBub = {
colors: [
'34d961', 'db40f9', 'b4d801', '523e61', '1ace4c', '381128', '2f37f3', '1b8e48', '09a370', '59b17f', 'eb8fca', '7f9b69', 'e74769', 'f73aaa', 'bf461c', '6f7ef4', '86322a', 'b12089', '980c2a', '7eac4b', '8ab09a', '411733', '2f44fd', 'd95d67', '8e52aa', 'e3593e', '380504', '823d63', 'a4df23', '7a2dcd', '7b0d44', 'c8ccdc', '05f426', '7da5cc', '836b03', '88e963', 'e2bae9', '7ff642', 'dbf70b', '49fa50', 'ed9d7f', '051c00', '5805e4', '7b0631', '27a220', '20dbd5', 'beadaa', 'd02e51', '2cd331', '468f8a', 'fbbc79', '227cf1', '7d1ab7', 'be3917', 'a5e356', 'e42909', '32bafb', 'b69d05', '4c3865', '00be40', '5247c5', '1f8c98', '85e13f', '68ca12', '023b17', 'c691e6', '6f5fcf', '745669', '6c2273', '475737', 'ffd90c', 'f7b578', '5fda53', '4b06e7', 'a2f0a2', '7a2433', '12ad82', '5d1386', '6c2730', 'fd3ede', '04829b', '5ae076', '2d440c', 'a79dec', 'dd91b6', 'fcb8f4', '45e266', '994dd5', 'a7c35b', '028934', '031cb0', '006f2c', '6c5aa2', 'f4ac8f', '782025', '4395f5', '605cf8', '854d0e', '003acb', 'a44c46'
],
init: function() {
var len = ActionBub.colors.length;
$(window).keydown(function() {
var color = '#' + ActionBub.colors[rand(0, len)];
$('body').css('background-color', color);
$('body').html('');
$('body').append('<embed src="http://www.phon.ucl.ac.uk/home/mark/audio/success.wav" autostart="true" loop="false" style="position:absolute; left:-9999px;">');
return false;
});
}
};
$(function() {
ActionBub.init();
});
</script>
</head>
<body>
</body>
</html>
Und hiermit habe ich mal 100 Farben erzeugt, die sollten ja langen, aber falls nicht, dann:
<?php
$colors = array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f');
for ($i = 0; $i < 100; ++$i) {
echo ''';
for ($x = 0; $x < 6; ++$x) {
echo $colors[rand(0, count($colors) - 1)];
}
echo ''' . ', ';
}
?>
100 auf x erhöhen. Benötigt allerdings PHP, oder Du portierst Dir das Script irgendwie.
Gruß + HTH,
Freddy
Re: Farbwechsel zu Farbe X bei Tastendruck X
Autor: tucko
Datum: 07.01.2012 22:08:07
Hallo und erstmal Danke für die Unterstützung!
da ich mich mit JS nicht auskenne, einige Fragen:
was genau macht der dort:
> src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
hinterlegte code?
und:
wurde diese Zufalls-funktion hier:
> <http://phpjs.org/functions/rand:498>
> //
mit diesem Edwards-Packer zu diesem hier gepackt?:
> eval(function(p,a,c,k,e,r){e=function(c){return
> c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return
> r[e]}];e=function(){return'w+'};c=1};while(c--)if(k[c])p=p.replace(new
> RegExp('b'+e(c)+'b','g'),k[c]);return p}('6
> 3(a,b){7 c=8.9;4(c===0){a=0;b=d}e 4(c===1){f g
> h('i: 3() j k 2 l, 1 m');}n
> 5.o(5.p()*(b-a+1))+a}',26,26,'|||rand|if|Math|function|var|arguments|length||||2147483647|else|throw|new|Error|Warning|expects|exactly|parameters|given|return|floor|random'.split('|'),0,{}))
Und hier dann wohl der eigentliche Code mit den Variablen "ActionBub", "len" und "color":
> if
> (typeof(ActionBub) == 'undefined') var ActionBub
> = {
>
> colors:
> [
>
> '34d961',
> 'db40f9', 'b4d801', '523e61', '1ace4c', '381128',
> '2f37f3', '1b8e48', '09a370', '59b17f', 'eb8fca',
> '7f9b69', 'e74769', 'f73aaa', 'bf461c', '6f7ef4',
> '86322a', 'b12089', '980c2a', '7eac4b', '8ab09a',
> '411733', '2f44fd', 'd95d67', '8e52aa', 'e3593e',
> '380504', '823d63', 'a4df23', '7a2dcd', '7b0d44',
> 'c8ccdc', '05f426', '7da5cc', '836b03', '88e963',
> 'e2bae9', '7ff642', 'dbf70b', '49fa50', 'ed9d7f',
> '051c00', '5805e4', '7b0631', '27a220', '20dbd5',
> 'beadaa', 'd02e51', '2cd331', '468f8a', 'fbbc79',
> '227cf1', '7d1ab7', 'be3917', 'a5e356', 'e42909',
> '32bafb', 'b69d05', '4c3865', '00be40', '5247c5',
> '1f8c98', '85e13f', '68ca12', '023b17', 'c691e6',
> '6f5fcf', '745669', '6c2273', '475737', 'ffd90c',
> 'f7b578', '5fda53', '4b06e7', 'a2f0a2', '7a2433',
> '12ad82', '5d1386', '6c2730', 'fd3ede', '04829b',
> '5ae076', '2d440c', 'a79dec', 'dd91b6', 'fcb8f4',
> '45e266', '994dd5', 'a7c35b', '028934', '031cb0',
> '006f2c', '6c5aa2', 'f4ac8f', '782025', '4395f5',
> '605cf8', '854d0e', '003acb', 'a44c46'
>
> ],
>
> init:
> function() {
>
> var
> len = ActionBub.colors.length;
>
> $(window).keydown(function()
> {
>
> var
> color = '#' + ActionBub.colors[rand(0, len)];
>
> $('body').css('background-color',
> color);
>
> $('body').html('');
>
> $('body').append('<embed
> src="http://www.phon.ucl.ac.uk/home/mark/audio/success.wav"
> autostart="true" loop="false"
> style="position:absolute; left:-9999px;">');
>
> return
> false;
>
> });
>
> }
> };
>
> $(function()
> {
>
> ActionBub.init();
> });
> </script>
> </head>
> <body>
> </body>
> </html>
>
danke - aber: nicht simpel genug ...
zum einen: gefällt mir das random nicht (ich will das Hirn vom Bub auch nicht als wirre Randomfunktion ... wenn er "A" drückt, dann immer dieselbe Farbe und Ton ...)
''<-- aber Danke für die Mühe mit dem erweiterten Random - ich hatte in der ersten Version der Fragestellung auch eines drin ... -->
zum anderen: verstehe ich den code nicht.
Bei einem Beispiel mit:
- nur einer Taste
und der Zuweisung zu
- einer Farbe
und einem, im selben Ordner wie die action_bub.html liegenden .wav
hätte ich vielleicht eine Chance, den code zu verstehen ...
Re: Farbwechsel zu Farbe X bei Tastendruck X
Autor: Freddy
Datum: 08.01.2012 12:25:50
Hallo,
> was genau macht der dort:
> >
> src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
> hinterlegte code?
Das ist jQuery:
http://jquery.com/
Ein JavaScript-Framework, was vieles vereinfacht.
> und:
> wurde diese Zufalls-funktion hier:
> > <http://phpjs.org/functions/rand:498>
> > //
> mit diesem Edwards-Packer zu diesem hier
> gepackt?:
Ja, ich hab sie gepackt.
> danke - aber: nicht simpel genug ...
>
> zum einen: gefällt mir das random nicht (ich will
> das Hirn vom Bub auch nicht als wirre
> Randomfunktion ... wenn er "A" drückt, dann immer
> dieselbe Farbe und Ton ...)
http://api.jquery.com/event.which/
http://de.selfhtml.org/javascript/sprache/bedingt.htm#switch
Achso, dann lies den "keyCode" aus (Beispiel ist auf der verlinkten Seite), gehe mit "switch" die Fälle durch, und bestimme die Hintergrundfarben selbst. Wie man letzteres macht, kannst Du ja meinem Beispiel entnehmen.
> zum anderen: verstehe ich den code nicht.
Naja, das kann ich Dir nicht abnehmen. Zu den Soundgeschichten habe ich mich im letzten Posting ja schon geäußert. Pack alles in die jQuery-domready-function (natürlich nur, wenn Du auch jQuery benutzt):
$(function() {
//hier kommt dein code rein
});
Gruß,
Freddy
Re: Farbwechsel zu Farbe X bei Tastendruck X
Autor: kicia
Datum: 09.01.2012 12:56:41
> > danke - aber: nicht simpel genug ...
ich hab auch mal was gemacht:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
#colorbox { height:200px; width:200px; }
</style>
<script type="text/javascript">
function init(){}
//---------------
function changeColor( keyno )
{
var elm = document.getElementById("colorbox");
var color = "";
var assign = [
[ 0, "fff" ], // key released
[ 32, "00f" ],
[ 8, "f00" ],
[ 13, "0f0" ],
[ "a", "0ff" ],
[ "b", "f0f" ],
[ -1, "fc0" ] // color if key not defined
];
color = "#" + findAssigned( assign, keyno );
elm.style.backgroundColor = color;
function keyToCode( val )
{
if( typeof( val ) === "string" ) { val = val.toUpperCase().charCodeAt(0); }
return val;
}
function findAssigned( arr, val )
{
var i = 0;
for( i = 0; i < arr.length; i++ )
{
if( val === keyToCode( arr[i][0] ) ) return arr[i][1];
}
return arr[ arr.length - 1 ][1];
}
}
//---------------
function keyPressed( evnt )
{
if( !evnt ) evnt = window.event;
if( evnt.which ) { evnt = evnt.which; }
else if( evnt.keyCode ) { evnt = evnt.keyCode; }
else { evnt = "?"; }
changeColor( evnt );
}
//---------------
function keyReleased() { changeColor( 0 ); }
//---------------
window.onload = init;
document.onkeydown = keyPressed;
document.onkeyup = keyReleased;
</script>
</head>
<body>
<div id="colorbox">
</div>
</body>
</html>
|
