この記事では、ランダムロールコーラーを実装するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。 HTMLコード: <本文> <h1>点呼</h1> <div id="did"> <input id="rollcall-id" type="button" value="ランダム点呼"><br> <input id="アクションID" type="送信" onclick="doClick()" value="開始"> </div> </本文> CSSコード: <スタイル> * { マージン: 0px; パディング: 0px; } 体 { 背景色: rgb(255, 249, 249); } h1 { テキスト配置: 中央; パディング上部: 100px; 色: rgba(250, 54, 129, 0.562); } #した { 位置: 相対的; 幅: 200ピクセル; マージン: 60px 自動; } #入力しました:first-child { 幅: 200ピクセル; 高さ: 60px; 背景色: rgba(250, 54, 129, 0.562); /* 境界線なし、または境界線を透明に設定する*/ 境界線: なし; 境界線の半径: 20px; フォントサイズ: 25px; 色: #fff; ボックスの影: 0px 0px 3px 3px rgba(250, 54, 129, 0.158); /* クリックすると境界線が消えます*/ アウトライン: 0; } #入力しました:nth-last-child(1) { 幅: 100ピクセル; 高さ: 40px; マージン: 40px 50px; 背景色: rgba(250, 54, 129, 0.562); 境界線: 1px 透明の実線; 背景色: rgba(255, 68, 177, 0.432); 境界線の半径: 15px; ボックスの影: 0px 0px 2px 2px rgba(250, 54, 129, 0.158); フォントサイズ: 17px; 色: #333; アウトライン: 0; トランジション: カラー 0.2 秒のイーズアウト; 遷移: box-shadow 0.2s イーズアウト; } #入力しました:nth-last-child(1):hover { 色: #fff; カーソル: ポインタ; ボックスの影: 0px 0px 4px 4px rgba(250, 54, 129, 0.158); } </スタイル> JavaScript コード: <スクリプト> var ロールコール = document.getElementById("ロールコールID"); var アクション = document.getElementById("アクションID"); var h1 = document.getElementsByTagName("h1"); //名前は使用できません。名前を使用すると 1 文字しか取得されません。var allName = ["Zhang Liufei", "Gao Yingying", "Zhao Wenyan", "Li Ying", "Deng Chenxi", "Mo Ruolin", "Qin Cheng", 「呉小玉」、「趙熙」、「馬素英」、「呂琴雅」、「羅洪哲」、「夏素雲」、「謝延志」、 「曹孟孟」、「李雲樹」、「周鳳橋」、「孫昊」、「江延静」、「楊振凱」、「林樹燕」、 「千妙妙」、「郭静」、「杜北北」、「童敏然」、「鍾小玲」、「韓雲雲」、「白蘭志」]; //ランダムな名前を生成する function stringRandom() { parseInt(Math.random() * allName.length) を返します。 } var 時間 = null; var 運名; //開始関数doStart() { 時間 == null の場合 { 時間 = setInterval(関数() { //ランダムな名前の値を取得します luckName = allName[stringRandom()]; rollcall.setAttribute("値", luckName); }, 100); } } //停止関数doStop() { (時間!= null)の場合{ クリア間隔(時間); 時間 = null; } } //クリックイベント関数doClick() { if (action.value == "開始") { //スタイルを変更する action.style.backgroundColor = "#cecece"; action.style.boxShadow = "0px 0px 2px 2px rgba(100, 100, 100, 0.4)"; action.value = "停止"; h1[0].innerHTML = "ロールロール"; //ランダムロールコールを開始します。doStart(); } そうでない場合 (action.value == "停止") { action.style.backgroundColor = "rgba(255, 68, 177, 0.432)"; action.style.boxShadow = "0px 0px 2px 2px rgba(250, 54, 129, 0.158)"; action.value = "開始"; h1[0].innerHTML = "おめでとう" + luckName + "クラスメイトが話す機会を得ました"; //停止doStop(); } } </スクリプト> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Apache Web サーバーを使用して 2 つ以上のサイトを構成する方法
>>: InnoDB の主な機能 - 挿入キャッシュ、2 度書き込み、適応ハッシュ インデックスの詳細
目次まず、双方向バインディングを実装するアイデアについて説明します。これらの機能を実装するための j...
メインのオペレーティング システムを Windows から Ubuntu に切り替えたとき、最初に考...
この記事では、コードレイン特殊効果を実現するためのjQueryプラグインの具体的なコードを参考までに...
<br />元の記事: http://www.alistapart.com/articl...
1. はじめにスロークエリログを有効にすると、MySQL は指定された時間を超えるクエリステートメン...
目次1. 概要2. MySQLデータ型の詳細な説明1) 文字列型2) 整数型3) 浮動小数点型4) ...
目次ターゲット思考分析コード着陸要約するターゲットトークンの有効期限切れシナリオの処理トークンは、ユ...
場合によっては、特定の条件に基づいて Web ページ内の HTML 要素を表示するか非表示にするかを...
概要インデックスは、テーブル内の 1 つ以上の列に基づいて DBMS によって特定の順序で作成される...
ほとんどの人は、サーバーサイド レンダリング (SSR と呼んでいます) の概念について聞いたことが...
OpenSSL を使用して SSL キーと CSR ファイルを生成するHTTPS を設定するには、秘...
グリッドシステムの形成1692年、新しく即位したフランス国王ルイ14世は、フランスの印刷技術のレベル...
以前にインストールしたmariadbを削除する1. rpm -qa | grep mariadb を...
テーブルはいつ使用されますか?最近では、Web ページの全体的なレイアウトにテーブルが使用されること...
/usr/local/nginx/conf と入力する sudo cd /usr/local/ngi...