この記事では、ランダムロールコーラーを実装するための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 度書き込み、適応ハッシュ インデックスの詳細
pthread_create関数機能紹介pthread_createはUNIX環境のスレッド作成関数...
Linux の操作と構成作業では、デュアル ネットワーク カードのバインディングがよく使用されます。...
目次1. 概要1.1 Functionコンストラクタを使用して関数を作成する1.2 機能と目的2. ...
導入Alibaba Cloud のような OSS ストレージ サービスを使用している場合は、サービス...
MYSQLバージョン:MySQL Community Server 5.7.17、インストール不要版...
訪問者があなたのウェブサイトを覚えておくのに役立つ3つの便利なコード。お気に入りに追加するためのヒン...
目次1. CentOS 7.9 20にDockerをインストールする2. MySQL クラスターをデ...
MySQL解凍版とNavicatデータベース操作ツールのインストールは、以下のとおりです。 1. M...
Oracle、DB2、SQL Server などの他の大規模データベースと比較すると、MySQL に...
mysqladmin は管理と操作を行う公式の mysql クライアント プログラムです。MySQL...
目次序文準備する実装のアイデアコードについて要約する序文WeChat 認証ログインは、WeChat ...
HTML徹底解析(14)特殊文字 ■ よく使われる特殊文字 HTMLタグを知っていれば、特殊文字の使...
MySQL 5.7.13 Mac用インストールチュートリアル、非常に詳細で、以下のように記録されてい...
この記事の例では、フルスクリーンスクロールを実現するためのjQueryの具体的なコードを参考までに共...
序文: Jenkins のマスター スレーブ分散アーキテクチャは、主に、Jenkins に単一ポイン...