Applets:Periodendauer periodischer Signale: Unterschied zwischen den Versionen

Aus LNTwww
Wechseln zu:Navigation, Suche
Zeile 1: Zeile 1:
 +
 
<p>
 
<p>
 
{{BlaueBox|TEXT=
 
{{BlaueBox|TEXT=
Zeile 9: Zeile 10:
 
<html>
 
<html>
 
<head>
 
<head>
    <meta charset="utf-8" />
 
 
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsxgraph/0.99.6/jsxgraphcore.js"></script>
 
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsxgraph/0.99.6/jsxgraphcore.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/mathjax/MathJax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
+
  <script type="text/javascript" src="https://cdn.rawgit.com/mathjax/MathJax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
    <style>
 
        .button {
 
            background-color: black;
 
            border: none;
 
            color: white;
 
            font-family: arial;
 
            padding: 8px 20px;
 
            text-align: center;
 
            text-decoration: none;
 
            display: inline-block;
 
            font-size: 16px;
 
            border-radius: 15px;
 
        }
 
        .button:active {
 
            background-color: #939393;
 
        }
 
 
 
        table {
 
            border-collapse: separate;
 
            border-spacing: 20px 0;
 
        }
 
    </style>
 
</head>
 
 
   <style>
 
   <style>
 
   .button1{
 
   .button1{
Zeile 63: Zeile 40:
  
 
<form id="jxgForm">
 
<form id="jxgForm">
 +
 
<!-- Resetbutton, Checkbox und Formel -->
 
<!-- Resetbutton, Checkbox und Formel -->
    <p>
+
<p>
        <input type="checkbox" id="gridbox" onclick="showgrid();" checked> <label for="gridbox">Gitterlinien zeigen</label>
+
    <input type="checkbox" id="gridbox" onclick="showgrid();" checked> <label for="gridbox">Gitterlinien zeigen</label>
        <button class="button" onclick="rst()">Reset</button>
+
    <button class="button" onclick="rst()">Reset</button>
    </p>
+
</p>
  
<div id="pltBoxHtml" class="jxgbox" style="width:600px; height:600px; border:1px solid black; margin:170px 20px 0px 0px;"></div>
+
<div id="box1" class="jxgbox" style="width:600px; height:600px; border:1px solid black; margin:100px 20px 0px 0px;"></div>
<div id="cnfBoxHtml" class="jxgbox" style="width:600px; height:150px; border:1px solid white; margin:-960px 20px 0px 0px;"></div>
+
<div id="box2" class="jxgbox" style="width:600px; height:150px; border:1px solid white; margin:-760px 20px 0px 0px;"></div>
<div id="outBoxHtml" class="jxgbox" style="width:600px; height:100px; border:1px solid white; margin:625px 20px 0px 0px;"></div>
+
<div id="box3" class="jxgbox" style="width:600px; height:100px; border:1px solid white; margin:625px 20px 0px 0px;"></div>
</form>
 
  
 
<script type="text/javascript">
 
<script type="text/javascript">
Zeile 78: Zeile 55:
 
//Grundeinstellungen der beiden Applets
 
//Grundeinstellungen der beiden Applets
 
JXG.Options.text.useMathJax = true;
 
JXG.Options.text.useMathJax = true;
var brd1 = JXG.JSXGraph.initBoard('pltBoxHtml', {showCopyright:false, axis:false, zoom:{factorX:1.1, factorY:1.1, wheel:true, needshift:true, eps: 0.1}, grid:false, boundingbox: [-0.5, 2.2, 12.4, -2.2]});
+
var brd1 = JXG.JSXGraph.initBoard('box1', {showCopyright:false, axis:false, zoom:{factorX:1.1, factorY:1.1, wheel:true, needshift:true, eps: 0.1}, grid:false, boundingbox: [-0.5, 2.2, 12.4, -2.2]});
var brd2 = JXG.JSXGraph.initBoard('cnfBoxHtml', {showCopyright:false, showNavigation:false, axis:false, grid:false, zoom:{enabled:false}, pan:{enabled:false}, boundingbox: [-1, 2.2, 12.4, -2.2]});
+
var brd2 = JXG.JSXGraph.initBoard('box2', {showCopyright:false, showNavigation:false, axis:false, grid:false, zoom:{enabled:false}, pan:{enabled:false}, boundingbox: [-1, 2.2, 12.4, -2.2]});
var brd3 = JXG.JSXGraph.initBoard('outBoxHtml', {showCopyright:false, showNavigation:false, axis:false, grid:false, zoom:{enabled:false}, pan:{enabled:false}, boundingbox: [-1, 2.2, 12.4, -2.2]});
+
var brd3 = JXG.JSXGraph.initBoard('box3', {showCopyright:false, showNavigation:false, axis:false, grid:false, zoom:{enabled:false}, pan:{enabled:false}, boundingbox: [-1, 2.2, 12.4, -2.2]});
 
brd2.addChild(brd1);
 
brd2.addChild(brd1);
 
brd2.addChild(brd3);
 
brd2.addChild(brd3);
  
 
//Einstellungen der Achsen
 
//Einstellungen der Achsen
xaxis = brd1.create('axis', [[0, 0], [1,0]], {name:'\\[\\frac{t}{T}\\]', withLabel:true, label:{position:'rt', offset:[-25, 15]}});
+
xaxis = brd1.create('axis', [[0, 0], [1,0]], {name:'\\[t/T\\]', withLabel:true, label:{position:'rt', offset:[-25, 15]}});
 
yaxis = brd1.create('axis', [[0, 0], [0, 1]], {name:'\\[x(t)\\]', withLabel:true, label:{position:'rt', offset:[10, -5]}});
 
yaxis = brd1.create('axis', [[0, 0], [0, 1]], {name:'\\[x(t)\\]', withLabel:true, label:{position:'rt', offset:[10, -5]}});
  
Zeile 193: Zeile 170:
 
//Definition des Reset-Buttons
 
//Definition des Reset-Buttons
 
function rst() {
 
function rst() {
     document.getElementById("myForm").reset();
+
     document.getElementById("jxgForm").reset();
 
};
 
};
 
</script>
 
</script>

Version vom 13. September 2017, 18:54 Uhr

Funktion: $$x(t) = A_1\cdot cos\Big(2\pi f_1\cdot t- \frac{2\pi}{360}\cdot \phi_1\Big)+A_2\cdot cos\Big(2\pi f_2\cdot t- \frac{2\pi}{360}\cdot \phi_2\Big)$$