WebProg1

幕開けに運試しのプログラミングに挑戦します。0から9までの数字が連続表示されます。たとえば、’7’を出すことを念じ、ころあいを見計らって’確定’ボタンをクリックします。’7’が出たら今日はついていると考え、そうでなければ、そこそこの一日と思って業務に励みましょう。

number10【性格診断】「0~9」数字を選ぶだけであなたにぴったりの結婚相手が分かるでは選んだ数字で結婚運を占っています。興味のある方は挑戦してください。

それでは運試しをどうぞ!

確定をクリックして好みの数字を表示させることができます。

次のコードをコピー&ペーストし、Fortune-01.htmlファイルを作成します。IE8、FIREFOX、OPERA12、SAFARI6、CHROMEなどの新しいブラウザが動作状態ならば、保存したFortune-01.htmlファイルにカーソルを当てクリックすれば実行に移ります。

<!DOCTYPE html>   <!-- 運試し1 -->
<html>            <!-- Fortune-01 -->
  <head>
    <script type="text/javascript">// <![CDATA[
    var i = 0;    // Count
    var x = 10;   // x-position
    var y = 100;  // y-position
    var txt ="0123456789";
    var timerid = setInterval('draw()', 50);
    var len = txt.length;
    function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
          ctx.font = "96px Arial";      //フォントにArial,96pxを指定
          if (i >= len) i = 0;          //繰り返し条件
            ctx.clearRect(x,y-96, x+96,y);//前描画文字を消す
            var chr = txt.charAt(i);    //表示文字を抽出
            ctx.fillStyle = 'violet';   //塗り潰し色を緑に
            ctx.fillText(chr, x, y);    //テキストを塗り潰しで描画
            ++i;
        }
    }
    function saveValue(){     //確定、timeridが1以上で有効
        clearInterval(timerid);
        timerid = 0;
    } // ]]>
    </script>
    <style type="text/css">
      canvas { border: 1px solid #999; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="560" height="330"></canvas>
    <input type="button" onClick="saveValue()" value="確定" />
  </body>
</html>
関連ページ

➊Webプログラミング書法
➋あみだくじ作成法

コメントを残す

下記項目は必須ですがメールアドレスは公開されません。名前はニックネームをお使いください。

CAPTCHA