<script language:javascript>
            var phi1   = 0.0;
            var omega1 = 0.0;
            var t    = 0.0;
            var dt   = 0.01;

            var m = 1.0;
            var l = 1.0;
            var r = 0.1;
            var J = 0.24*m*r*r + (1/12)*m*l*l;
            var g = 9.81;
            var K = (2*J)/(m*l) + l/2;

            var malkontext;
            var zeitgeber;


            function auffrischen(element)
            {
                var wert = document.getElementById(element).value;
                var teile = element.split("_");
                var variablen_name = teile[0];

                zeitgeber = window.clearInterval(zeitgeber);

                if(teile[1]=="schieber")
                {
                    wert = wert*0.001;
                }

                var zuweisung = variablen_name+"="+wert+";";
                eval(zuweisung);
                document.getElementById(variablen_name+"_text").value = wert;
                document.getElementById(variablen_name+"_schieber").value = wert*1000.0;
                loescheAlles();
                phi1 = wert;
                zeichnePendel(phi1,"#f00");
            }

            function zeichnePendel(winkel, farbe)
            {
                malkontext.setTransform(1.0,0,0,1.0,0,0);
                malkontext.translate(250,250);
                malkontext.rotate(-winkel);
                malkontext.fillStyle = farbe;
                malkontext.fillRect(-10,0,20,200);
            }

            function loeschePendel(winkel)
            {
                malkontext.setTransform(1.0,0,0,1.0,0,0);
                malkontext.translate(250,250);
                malkontext.rotate(-winkel);
                malkontext.fillStyle = "#fff";
                malkontext.fillRect(-11,-1,22,202);
            }

            function loescheAlles()
            {
                malkontext.setTransform(1.0,0,0,1.0,0,0);
                malkontext.fillStyle = "#fff";
                malkontext.fillRect(0,0,500,500);
            }

            function zeichnen()
            {
                loeschePendel(phi1);

                var phi1_neu   = phi1   + omega1*dt;
                var omega1_neu = omega1 - (g/K)*Math.sin(phi1)*dt;                

                phi1 = phi1_neu;
                omega1 = omega1_neu;

                var phi_zeigen = phi1;
                while(phi_zeigen<0.0)
                {
                    phi_zeigen+=6.28318530718;
                }
                while(phi_zeigen>6.28318530718)
                {
                    phi_zeigen-=6.28318530718;
                }

                document.getElementById("phi1_text").value = phi_zeigen;
                document.getElementById("phi1_schieber").value = phi_zeigen*1000.0;                

                zeichnePendel(phi1,"#f00");

            }

            function initialisieren()
            {
                malkontext = document.getElementById("grafik").getContext("2d"); 
                zeichnePendel(phi1,"#f00");
            }

            function startstop()
            {
                var wert = document.getElementById("startstop").value;

                if(wert=="start")
                {
                    document.getElementById("startstop").value = "stop";
                    document.getElementById("startstop").style.backgroundColor = "#FF0000";
                    t=0.0;
                    omega1 = 0.0;
                    zeitgeber = setInterval(zeichnen,30);
                }
                else
                {
                    document.getElementById("startstop").value = "start";
                    document.getElementById("startstop").style.backgroundColor = "#00FF00";
                    zeitgeber = window.clearInterval(zeitgeber);
                }
            }
        </script>

        <h4>Körperpendel mit Euler-Integration simuliert</h4>
        <canvas id="grafik"  width="500" height="500">
        
        </canvas>
        <fieldset>
            <legend>Parametereinabe</legend>
            <p>
                <label>Initialisierung (zuerst betätigen!):
                    <input type="button" value="Initialisierung" onclick="javascript:initialisieren()"/>
                </label>
            </p>
            <p>
                <label>φ<sub>1</sub>:
                    <input id="phi1_schieber"  type="range" min="0" max="6283" value="0" onchange="javascript:auffrischen('phi1_schieber')" />
                    <input id="phi1_text"      type="text" value="0" onchange="javascript:auffrischen('phi1_text')" />
                </label>
            </p>
            <p>
                <input id="startstop" type="button" value="start" style="background-color: #00FF00" onclick="javascript:startstop()"/>
            </p>
        </fieldset>

Code 0-1: Quelltext zu obigem Beispiel