◆20200819 授業メモ setTimeout window.setinterval window.scroll 指名ルーレット・画像自動切り替えの仕掛けのつくり方
授業内容
・windowオブジェクトsetTimeoutの使用方法
→遅延処理を行う際に使用する
・setTimeoutを用いいた問題演習
・windowオブジェクトsetIntervalの使用方法
→関数定義と絡めて使用する
覚えるべき公式
window.setInterval(function () {
}, ミリ秒数);
・window.clearInterval(中止するID);
→処理停止用のwindowオブジェクト
・window.scrollTo(x,y)の使用方法
→スクロールメソッド
・window.scrollTo(x,y)を使用した演習問題
以下板書
■遅延処理
window.setTimeout(処理, 遅延時間);
公式
window.setTimeout(function () {
一定時間経過後
処理
}
HTMLのID設定について
""で囲んであげないとエラーの原因になる
osaraiWindowより
大問１
// 問題１
// アラートを表示すること
// アラート内の文字は「問題１の解答です」とする
window.alert(['問題１の解答です']);
// 問題２
// 確認ダイアログ画面を表示すること
// 確認ダイアログ画面の文字は「Yahooを表示しますか？」とする
// 「OK」が押されたらYahooのトップページを表示
// 「キャンセル」が押されたら
// リンク先に飛ばず現在表示画面のままにする
// function link() {
// if (window.confirm('yahooにとぶ？')) {
// console.log('yahooにとぶ');
// location.href = 'http://yahoo.co.jp/';
// }
// }
function link() {
let flag = window.confirm('yahooにとぶ')
// if (flag === true) {
// flag = true;
// } else {
// flag = false;
// }
return flag;
}
大問2
// 問題１
// 画面表示3秒後にブラウザに「今日は〇月〇日です」と
// 表示すること
setTimeout(function () {
console.log('今日は8月19日です')
let today = new Date
let month = today.getMonth() + 1
let day = today.getDate();
document.getElementById('result').innerHTML = '今日は' + month + '月' + day + '日です'
}, 3000
);
// 問題２
// 画面表示10秒後に非表示になっている画像を表示させること
setTimeout(function () {
document.getElementById('img').setAttribute('style', 'display: block;');
}, 10000
);
// windowオブジェクトのプロパティ
console.log('windowオブジェクトのプロパティ');
console.log(window.innerWidth);
console.log(window.innerHeight);
〇一定時間ごとに処理 setInterval
これはHPの写真の切り替えに使える
setTimeoutと文章構造は変わらない
// 働き：一定時間経過後に繰り返し処理
window.setInterval(関数, ミリ秒数);
// 戻り値：clearInterval（処理停止）用のID番号
■これを使えるようにすること
window.setInterval(function () {
}, ミリ秒数);
function test() {
console.log('処理しました１');
}
var timerID1;//処理停止用のID番号の管理
timerID1 = window.setInterval(test, 3000);
// 第一引数：繰り返し呼び出す処理のアドレス
// ※関数名の後に（）を記述しない
// 第二引数：一定時間の指定を経過ミリ秒で
console.log('timerID1:' + timerID1);
var timerID2;
timerID2 = window.setInterval(function () {
console.log('処理しました２');
}, 3000);
console.log('timerID2:' + timerID2);
function stop1() {
console.log('stop1実行');
window.clearInterval(timerID1);
// 第一引数：処理停止用のID番号
}
function stop2() {
console.log('stop2実行');
window.clearInterval(timerID2);
}
〇window.setIntervalの例題
15章 window.setInterval2.jsより
// グローバル変数として扱いたいので関数外で宣言
// どこからでも（関数内でも）参照できる
// 関数処理は終わっても値が存在し続けている
var timerID1;
// 繰り返し処理停止用の値
var flag = true;
// 関数内のif文の条件で使用する値
// 名前ルーレットの開始・停止に使用
// true→開始、false→停止
var num = 0;
// 配列の部屋番号の値
// 関数定義
// 画面内のボタンがクリックされたときに呼出し
function toggle() {
if (flag) {
// 'スタート'を押したら名前ルーレットを回す処理
console.log('start');
flag = false;
// ルーレットを回し始めて'決定'を押したらfalseになる（ルーレット）を止める
// ボタン内の文字を「スタート」から「決定」に変更
// 名前ルーレットを回転開始
timerID1 = window.setInterval(function () {
// 名前
var nameList = [
'田中',//0
'佐藤',//1
'鈴木',//2
];
num++;//配列の部屋番号をカウントアップ
// ↓配列の部屋の数とnumの値が＝ならnumに0を代入
if (num == nameList.length)
// nameList.length=2
//指定できる配列部屋番号を超えたら0に戻して存在しない部屋を参照しないようにする
{
num = 0;
}
console.log(num);
document.getElementById('display1').innerHTML = nameList[num];
}, 2000);
// if (num == nameList.length) {
// num = 0;
// }
// 123123123…0の配列が消え、存在しない3の配列が出てきてしまう
console.log('timerID1:' + timerID1);
} else
// 名前ルーレットを止める処理
{
console.log('stop');
// ボタンの文字を「決定」から「スタート」
window.clearInterval(timerID1);
// ルーレットを停止
flag = true;
}
}
//〇戻り値のありなし→returnがあるかどうか
// あり→戻り値あり
// なし→戻り値なし
// 関数内で出た値を関数外に戻り値として反映させる。
〇画像切り替えのJS
これはつかえる
// < !DOCTYPE html >
// <html lang="ja">
// <head>
// <meta charset="UTF-8">
// <title>一定時間経過ごとに画像切り替え</title>
// </head>
// <body>
// <h1>一定時間経過ごとに画像切り替え</h1>
// <div class="box">
// <p><img id="change" src="img/a001.png" alt="僕のキーボード"></p>
// </div>
// <script src="window_setinterval3.js"></script>
// </body>
// </html>
var num = 0;
window.setInterval(function () {
var imgList = [
];
num++;
if (num == imgList.length) {
num = 0;
}
console.log(num);
document.getElementById('change').src = imgList[num][0];
document.getElementById('change').alt = imgList[num][1];
}, 2000);
〇スクロール
// scrollToメソッド1実行ボタン
// クリックで呼出し
// 関数内でscrollToメソッド1を実行
// 引数オブジェクトバージョン
function test1() {
// 横方向入力値欄の値を変数に代入
// 縦方向入力値欄の値を変数に代入
window.scrollTo(num1, num2);
// scrollToメソッド：画面一の移動
第一引数：横方向の位置
第二引数：縦方向の位置
console.log('scrollX:' + window.scrollX);
console.log('scrollY:' + window.scrollY);
//移動後の画面位置をコンソール表示
}
function test2() {
// セレクトボックスでユーザが選択した項目のvalue属性値を取得
// 「auto」「instant」「smooth」のどれか
window.scrollTo({
top: num1,
left: num2,
behavior: select1
// behavior: select1にsmoothを指定すると
// 移動中のスクロール位置を取得してしまうことがある
// もし移動後の値を取りたいときは遅延処理を使って少し待ってから取得する
});
// 引数をオブジェクトで指定
console.log('scrollX:' + window.scrollX);
console.log('scrollY:' + window.scrollY);
}
// scrollByメソッド実行ボタン
function test3() {
window.scrollBy(num1, num2);
console.log('scrollX:' + window.scrollX);
console.log('scrollY:' + window.scrollY);
}
