ランダムロールコールテーブルを実装するためのネイティブJavaScript
|
この記事では、JavaScriptのランダムロールコールテーブルの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。 効果：
コード：
<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="UTF-8">
<タイトル></タイトル>
<スタイル>
。箱{
幅:300ピクセル;
高さ:200px;
境界線:1px実線 #ccc;
/*位置: 絶対;
左:0;
右:0;
トップ:0;
下:0;
マージン: 自動;*/
マージン: 100px 自動;
テキスト配置: 中央;
}
h1{
幅:150ピクセル;
高さ:60px;
行の高さ: 60px;
テキスト配置: 中央;
フォントサイズ: 30px;
背景色: 赤;
マージン: 10px 自動;
}
ボタン{
幅:100ピクセル;
高さ:40px;
背景色: ドジャーブルー;
境界線:0;
フォントサイズ: 24px;
色:#fff;
}
</スタイル>
</head>
<本文>
<div class="box">
<h1></h1>
<button>開始</button>
<button>停止</button>
</div>
<スクリプト>
var h1=document.getElementsByTagName('h1')[0];
var btn = document.getElementsByTagName("ボタン");
var arr=["Su Chenxu","Zhang Zhiyang","Xiao Ming","Social Brother Kun","Yao","Jing Zhen","Jin Tao","Network Manager","Social Brother Chen","Zha Nan","Xue","Baby Man","Big Guy","Sleeping God","Long Ye","Ying Er","Northeast Baby","Ke Ke","Very Young Girl","Gou Dan","Gou Zi","Tian Jiao","Zhi Qiang","Jin Wei","Haitao","Sister Mai","Xin Feng","Sister Huan","Er Gou"];
var ind = ranFun(0,arr.length-1)
h1.innerHTML = arr[ind];
var タイマー;
btn[0].onclick=関数(){
クリアインターバル(タイマー)
タイマー = setInterval(関数(){
h1.innerHTML=arr[ranFun(0,arr.length-1)]
},100)
}
btn[1].onclick=関数(){
クリアインターバル(タイマー)
}
関数 ranFun(a,b){
Math.floor(Math.random()*(b-a+1)+a) を返します。
}
</スクリプト>
</本文>
</html>以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Vueでルーティング権限を動的に設定する主なアイデア
>>: Vue 要素と Nuxt の使用に関するヒントを共有する
推薦する
Vue3.0のさまざまなリスニング方法の包括的な概要
目次リスナー1.ウォッチエフェクト2.見る1.1 聴くための最初の方法1.2 聞く2つ目の方法1.3...
Webデザインチュートリアル（5）：Webビジュアルデザイン
<br />前回の記事：Webデザイン講座（4）：素材と表現について Webデザイン上級...
Linuxで新しいユーザーを作成し、指定されたディレクトリへの権限を付与する
1 ユーザーを作成し、ユーザーのルートパスとパスワードを指定します useradd -d /home...
MySQL トランザクション分離レベルと MVCC の詳細な説明
目次トランザクション分離レベル同時トランザクション実行中に発生した問題SQL標準の4つの分離レベルM...
単一マシン上での Tomcat の複数インスタンスの実装
1. はじめにまず、1 台のマシンで複数のインスタンスを使用する理由という質問に答える必要があります...
CSS と JS を使用して下線効果を実装する方法の例
この記事では、主に 2 種類の下線の動的効果について説明します。1 つ目は、ホバーすると X 軸が内...
Zabbix 監視ソリューション - 最新の公式バージョン 4.4 [推奨]
ザビックス2019/10/12 チェンシン参照するhttps://www.zabbix.com/do...
vue.js 動的コンポーネントの詳細な説明
:動的コンポーネントv-bind:is="component name" を使用...
さまざまな種類の jQuery Web ページ検証コード プラグイン コード例
html <!DOCTYPE html> <html lang="ja&...
単一のMySQLテーブルを復元する手順
休憩中に、眠気を完全に吹き飛ばす電話がかかってきました。「開発者が更新 SQL を書くときに whe...
WeChatアプレットがユーザーの移動軌跡を記録
目次設定を追加json 構成レイヤー構成の表示論理層の構成位置追跡をオンにする録音を開始開始座標を決...
Windows 10 での MySQL 5.7.21 winx64 のインストールと設定方法のグラフィック チュートリアル
mysql 5.7.21 winx64 のインストールと設定方法: MySQLのコミュニティバージョ...
Ubuntu 16.04.4LTS に mininet をインストールする際に発生する問題と解決策
ミニネットMininet は軽量のソフトウェア定義ネットワークおよびテスト プラットフォームです。軽...
WeChatアプレットリクエストの前処理方法の詳細な説明
質問一部のページでは、onload でデータを要求してからビューをレンダリングするため、ミニプログラ...
Linux サーバー上で複数の SVN リポジトリを構成するプロセスの詳細な説明
1. 指定されたディレクトリにリポジトリを作成し、ディレクトリ全体を保存してください。この記事のサン...