JavaScriptで文字を1文字ずつ表示させて高速でタイピングしているかのように見せかけるWebページをつくります。
Contents
文字を1文字ずつ表示させる
文字列を変数strに格納した場合、str[i]でi番目の文字を取得することができます。そのままinnerHTMLプロパティに追加するのが不適切な文字は適切な文字に置換し、そうでないものはそのまま追加します。文字列が複数行にわたる場合はスクロールさせたいのでscroll関数を実行しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>高速でタイピングしているかのように見せかけるアプリ</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { background-color: #000; } #pre { padding: 30px; background-color: #000; color: #0f0; font-weight:bold; border: 1px solid #fff; overflow:scroll; height: 300px; width: 600px; } #run { margin-top: 10px; width: 100px; } </style> </head> <body> <pre id = "pre"> </pre> <div><textarea id="text" rows="10" cols="80"></textarea></div> <div><button id="run" onclick="run()">実行</button></div> <script> let $pre = document.getElementById('pre'); function run(){ let str = document.getElementById('text').value; $pre.innerHTML = ''; // 半角スペースが4文字連続していれば タブ文字 とみなす // 連続する半角スペースが4文字をタブ文字に置換 let vs = str.split(' '); str = vs.join('\t'); let i = 0; setInterval(() => { if(str.length > i){ let c = ''; if(str[i] == '\n') // 改行は<br>に置換する c = '<br>'; else if(str[i] == '\t') // タブ文字は半角4文字とする c = ' '; else if(str[i] == '<') // < と > はエスケープする c = '<'; else if(str[i] == '>') c = '>'; else // それ以外の文字はそのまま表示させる c = str[i]; $pre.innerHTML += c; $pre.scrollTo(0, $pre.scrollHeight); // 一番下までスクロールさせる i++; } }, 30); } </script> </body> </html> |
実行してみる
動画内で表示させているコードを示します。ランダムな位置と大きさと色で「鳩」という字をウィンドウに表示させているだけのプログラムです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
using System; using System.Collections.Generic; using System.Drawing; using System.Windows.Forms; class Program { public static void Main() { Form1 form1 = new Form1(); Application.Run(form1); } } class Form1 : Form { Timer timer = new Timer(); Random random = new Random(); List<Point> points = new List<Point>(); List<Font> fonts = new List<Font>(); List<Brush> brushes = new List<Brush>(); public Form1() { Text = "鳩でもわかるC#"; Size = new Size(500, 350); BackColor = Color.Black; DoubleBuffered = true; timer.Interval = 30; timer.Tick += Timer_Tick; timer.Start(); } private void Timer_Tick(object sender, EventArgs e) { Point pt = new Point( random.Next(this.Width - 50), random.Next(this.Height - 50)); points.Add(pt); Font font = new Font("ＭＳ ゴシック", random.Next(30) + 20); fonts.Add(font); int red = random.Next(256); int green = random.Next(256); int blue = random.Next(256); Brush brush = new SolidBrush(Color.FromArgb(red, green, blue)); brushes.Add(brush); if (points.Count > 80) timer.Stop(); Invalidate(); } protected override void OnPaint(PaintEventArgs e) { for (int i = 0; i < points.Count; i++) { e.Graphics.DrawString( "鳩", fonts[i], brushes[i], points[i]); } base.OnPaint(e); } } |
