Applets:Periodendauer periodischer Signale: Difference between revisions

From LNTwww
← Older editNewer edit →
No edit summary
No edit summary
Line 1: Line 1:
<p>
<!DOCTYPE html>
{{BlaueBox|TEXT=
<html lang="de">
<B style="font-size:18px">Funktion:</B>
<head>
$$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)$$
  <title>CSS Grid</title>
}}
  <style>
</p>
    .wrapper{
      display:grid;
 
      grid-auto-rows:minmax(100px, auto);
      grid-gap:1em;
      justify-items:stretch;
      align-items:stretch;
      grid-template-columns: 70% 30%;
 
    }
 
    .wrapper > div{
      padding:1em;
    }
    .wrapper > div:nth-child(odd){
 
    }
 
    .box1{
      /*align-self:start;*/
      grid-column:1/3;
      grid-row:/4;
      border: 1px solid black;
    }
 
    .box2{
      /*align-self:end;*/
      grid-column:1/3;
      grid-row:2/4;
      border: 1px solid black;
 
    }
 
    .box3{
      /*justify-self:end;*/
      grid-column:1/3;
      grid-row:3/4;
      border: 1px solid black;
    }
 
    .box4{
      grid-column:1/3;
      grid-row:4/4;
      border: 1px solid black;
    }
    .box5{
      grid-column:2/3;
      grid-row:4/4;
      border: 1px solid black;
    }


<html>
<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://en.lntwww.de/MathJax/unpacked/MathJax.js?config=TeX-AMS-MML_HTMLorMML-full,local/mwMathJaxConfig"></script> -->
    <!-- <script type="text/javascript" src="https://cdn.rawgit.com/mathjax/MathJax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML-full"></script> -->
<style>
         .button {
         .button {
             background-color: black;
             background-color: black;
Line 28: Line 70:
             background-color: #939393;
             background-color: #939393;
         }
         }
  </style>
        table {
            border-collapse: separate;
            border-spacing: 20px 0;
        }
 
  </style>
</head>
</head>


<body onload="drawNow()">
<body onload="drawNow()">
<!-- Resetbutton, Checkbox und Formel -->
<p>
    <input type="checkbox" id="gridbox" onclick="showgrid();" checked> <label for="gridbox">Gitterlinien Zeigen</label>
    <button class="button" onclick="drawNow();">Reset</button>
</p>
<div id="cnfBoxHtml" class="jxgbox" style="width:600px; height:150px;  float:top; margin:-10px 20px 100px 0px;"></div>
<div id="pltBoxHtml" class="jxgbox" style="width:600px; height:600px; border:1px solid black; margin:-100px 20px 10px 0px;"></div>
<!-- Ausgabefelder -->
<table>
    <tr>
        <td>$x(t)$= <span id="x(t)"></span>  $\quad$ </td>
        <td>$x(t+ T_0)$= <span id="x(t+T_0)"></span>  $\quad$ </td>
        <td>$x(t+2T_0)$= <span id="x(t+2T_0)"></span>  $\quad$ </td>
        <td>$x_{\text{max}}$= <span id="x_max"></span>  $\quad$ </td>
        <td style="color:blue;">$T_0$= <span id="T_0"></span>  $\quad$ </td>
    </tr>
</table>


<script type="text/javascript">
<script type="text/javascript">
Line 196: Line 223:
     };
     };
</script>
</script>
  <div class="wrapper">
    <div class="box box1">Box 1
    </div>
    <div class="box box2">
<div id="cnfBoxHtml" class="jxgbox" style="width:600px; height:150px;  float:top; margin:-10px 20px 100px 0px;"></div>
    </div>
    <div class="box box3">
<div id="pltBoxHtml" class="jxgbox" style="width:600px; height:600px; border:1px solid black; margin:-100px 20px 10px 0px;"></div>
    </div>
    <div class="box box4">
  <tr>
      <td>$x(t)$= <span id="x(t)"></span>  $\quad$ </td>
      <td>$x(t+ T_0)$= <span id="x(t+T_0)"></span>  $\quad$ </td>
      <td>$x(t+2T_0)$= <span id="x(t+2T_0)"></span>  $\quad$ </td>
      <td>$x_{\text{max}}$= <span id="x_max"></span>  $\quad$ </td>
      <td style="color:blue;">$T_0$= <span id="T_0"></span>  $\quad$ </td>
  </tr>
    </div>
    <div class="box box5">
<p>
    <input type="checkbox" id="gridbox" onclick="showgrid();" checked> <label for="gridbox">Gitterlinien Zeigen</label>
    <button class="button" onclick="drawNow();">Reset</button>
</p>
    </div>
  </div>
</body>
</body>
</html>
</html>


{{Display}}
{{Display}}

Revision as of 20:27, 18 September 2017

<!DOCTYPE html> CSS Grid

Box 1
$x(t)$= $\quad$ $x(t+ T_0)$= $\quad$ $x(t+2T_0)$= $\quad$ $x_{\text{max}}$= $\quad$ $T_0$= $\quad$



Retrieved from "https://en.lntwww.de/index.php?title=Applets:Periodendauer_periodischer_Signale&oldid=15011"
Powered by MediaWiki