部品設置前の、テスト的く見立てのプログラムです。
・clickしたところからの座標量がわかる。
・ドラッグ選択の開始位置、終点位置座標を覚えて置ける。
などの特徴があります。
全体
test6.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style>
body {
margin: 8px;
padding: 0;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
color: #333333;
}
.h1_main {
font-family: Arial, sans-serif;
color: #aaaaff;
font-size: 60px;
font-weight: bold;
text-decoration-line: underline overline;/* 本の植字ミス? */
}
#info {
position: fixed;
top: 0px;
left: 0px;
width: 200px;
height: 32px;
font-size: 14px;
background-color: #ffffff; /* マウスアップされてされている時の */
color: #666666;
}
</style>
<script>
// JavaScriptのコードをここに記述します 起動前基準数の設置
var setup = 0;
var dspua = "User Agent: " + navigator.userAgent;
var userAgent = window.navigator.userAgent.toLowerCase();
if (userAgent == "") {
userAgent = "サポート外"
dspua = '不明';//その他のブラウザ向けの記述
} else if (userAgent.indexOf('opr') != -1) {
dspua = 'opr';//IE向けの記述
} else if (userAgent.indexOf('edg') != -1) {
dspua = 'edge';///旧Edge向けの記述
} else if (userAgent.indexOf('chrome') != -1) {
dspua = 'chrome';//Google Chrome向けの記述
} else if (userAgent.indexOf('safari') != -1) {
dspua = 'safari';///Safari向けの記述
} else if (userAgent.indexOf('firefox') != -1) {
dspua = 'firefox';///FireFox向けの記述
} else {
dspua = '不明';//その他のブラウザ向けの記述
}
if (dspua == "chrome") {
//this.style.fontFamily = 'serif'; //Google Chrome向けの記述
}
// ユーザーエージェントを表示 起動できるようになっているか確認するためのコード
var stop_status = "stop"; // 初期状態は停止
function statoup(){
// fast ok ranning one.
setup = 1 //スキャン完了のフラグを立てる
keepu(); // 準備が終わったら起動させっぱなしにする。マウスポインタを追従させる
document.getElementById('my_js_stato').innerHTML = "it ok. disp_js() <font color='blue'>stop</font>";
document.querySelector('#ua').innerHTML = dspua;
stop_status = "start"; // 初期状態は開始
}
// normal running.
function disp_js(){
if (setup == 0){alert('not set');return;}
if (stop_status == "stop") {
stop_status = "start";
document.getElementById('my_js_stato').innerHTML = "it ok. disp_js() <font color='red'>start</font>";
} else {
stop_status = "stop";
tim_ago = -1; // 停止時に経過時間をリセット
document.getElementById('my_js_stato').innerHTML = "it ok. disp_js() <font color='blue'>stop</font>";
}
document.getElementById('disp_in_html').innerHTML = in_html1;
}
// ドラッグ可能な要素の位置を更新
let isDragging = false; // ドラッグ中フラグ
let x = 0; // maus x
let y = 0; // maus y
let xx= x+15; // 表示のboxのカーソールからの位置
let yy= y+15;
let clkx = 0; // click x
let clky = 0; // click y
let ofx = 0; // offset x
let ofy = 0; // offset y
let drx = 0; // 開始点x
let dry = 0; // 開始点y
let dex = 0; // 終了点x
let dey = 0; // 終了点y
let my_box = [drx, dry, dex, dey]; // [開始点x, 開始点y, 終了点x, 終了点y]
let dx = 0; // ドラッグ開始点と現在のマウス座標の差分
let dy = 0;
function keepu(){
// マウス座標を表示
document.getElementById('info').textContent = "maus navigator: " + navigator.userAgent;
document.addEventListener('mousemove', function(event) {
x = event.clientX; // ビューポート内のX座標
y = event.clientY; // ビューポート内のY座標
if (x>1290) {
xx= x-200; //表示のboxのカーソールからの位置
yy= y+15;
document.getElementById('info').style.top = yy + "px";
document.getElementById('info').style.left = xx + "px";
}else {
xx=x+16;
yy=y+15;
document.getElementById('info').style.top = yy + "px";
document.getElementById('info').style.left = xx + "px";
}
// ドラッグ開始点と現在のマウス座標の差分
if (drx == 0 && dry == 0) {
dx = x-clkx;dy = y-clky; // クリックした位置からの差分
isDragging = false;
document.getElementById('info').textContent = "maus:(" + x + ", " + y + ")+(" + dx + ", " + dy + ") box_set: " + my_box;
} else {
dx = x-my_box[0];dy = y-my_box[1]; // ドラッグ開始点と現在のマウス座標の差分
isDragging = true;
document.getElementById('info').textContent = "box: " + my_box;
}
// document.getElementById('moniter').textContent = "isDragging: " + isDragging + " | マウス座標: (" + ofx + ", " + ofy + ")";
// 座標が変わっても出てこない。
// document.getElementById('info').textContent = "マウス(" + x + ", " + y + ") |||clk:(" + clkx + ", " + clky + ") |||drg:(" + my_box + ") etc: " + dx + ", " + dy + ", " + isDragging + "<br>\n";
});
// ドラッグ可能な要素の位置を更新
document.addEventListener('click', function(event) { //up でクリックしたらマウス座標を取得
drx = 0; // ドラッグ開始点のX座標をリセット
dex = 0;
dry = 0;
dey = 0;
clkx = x; // ビューポート内のX座標
clky = y; // ビューポート内のY座標
document.getElementById('info').style.backgroundColor = '#00ff00'; // ドラッグ中の背景色
// document.getElementById('info').textContent = "マウス(" + x + ", " + y + ") |||clk:(" + clkx + ", " + clky + ") |||drg:(" + my_box + ") etc: " + dx + ", " + dy + ", " + isDragging;
});
// マウス押下時の処理
document.addEventListener('mousedown', (e) => { //is dragging 開始(xyが変わったら)したら記録される
// e.preventDefault(); // デフォルトの動作を防ぐ
isDragging = true; // ドラッグ開始フラグを立てる
drx = x; // ドラッグ開始点のX座標
dex = x;
dry = y;
dey = y;
my_box = [drx, dry, dex, dey]; // ドラッグ開始点と終了点の初期化
document.getElementById('info').style.backgroundColor = '#aaaaff'; // ドラッグ中の背景色
});
// マウス離した時の処理
document.addEventListener('mouseup', () => {
// alert("ドラッグ終了: 開始点(" + drx + ", " + dry + ", " + isDragging + ") 終了点(" + dex + ", " + dey + ")");
if (isDragging) {
if (x > my_box[2]){my_box[2] = x;}
if (x < my_box[0]){my_box[0] = x;}
if (y > my_box[3]){my_box[3] = y;}
if (y < my_box[1]){my_box[1] = y;}
my_box = [drx, dry, dex, dey]; // ドラッグ開始点と終了点の更新
}
isDragging = false; // ドラッグ終了フラグを下ろす
});
// ダブルクリック時の処理
document.addEventListener('dblclick', function(event) {
my_box =[0, 0, 0, 0]; // ドラッグ可能な要素の座標をリセット
document.getElementById('info').style.backgroundColor = '#ffffff'; // ドラッグ終了時の背景色
// alert("ダブルクリックされました！");
});
}
// 時計の更新関数 ランニングキープ関数
let tim_ago = 0;
function updateClock() {
if (setup == 0){alert('not set');return;}
if (stop_status == "stop") {
document.getElementById('clock').textContent = "--:--:--";
return; // 停止状態では時計を更新しない
}
tim_ago++;
const now = new Date();
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
const formattedTime = `${hours}:${minutes}:${seconds}`;
document.getElementById('clock').textContent = formattedTime + " (" + tim_ago + "秒経過)";
if (tim_ago % 10 === 0) { // 10秒ごとにランダムな数字を表示
displayRandomNumbers();
}
}
// 1秒ごとに時計を更新
setInterval(updateClock, 1000);
// 文字の初期値
let in_html1 = "test settchi.";
// ユーザーエージェントを表示
// ランダムな8つの数字を生成
function rndam0to7_8() {
const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]; // 0から15までの数字を含む配列
// Fisher–Yates シャッフル
for (let i = arr.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[arr[i], arr[j]] = [arr[j], arr[i]]; // 要素を交換
}
const random8 = arr.slice(0, arr.length); // ランダムに並び替えて得る
return random8;
}
// ランダムな8つの数字を生成して表示
function displayRandomNumbers() {
const randomNumbers = rndam0to7_8();
const copy_randomNumbers = [...randomNumbers]; // 配列をコピー
//randomNumbers[randomNumbers.length] = Math.floor(randomNumbers[randomNumbers.length] / 2);
for (let i = 0; i < randomNumbers.length; i++) {
randomNumbers[i] = Math.floor(randomNumbers[i] / 2); //整数化した半分の数
}
const jyoker = randomNumbers.pop();
document.getElementById('disp_in_html').innerHTML = "ペアになる二つを当てる。ランダムな8つの数字: "+ copy_randomNumbers.join(", ") + " / <b>" + randomNumbers.join(", ") + " + <font color='red'>" + jyoker + "</font></b>";
//裏向けのカードを出しておいて当てさせるんや。ほんとは15枚0~15=16枚-1=(15)=8組必要なのから7組で1枚余るようにする。
// 0,1,2,3,4,5,6,7のペアを作る(8=joker)
}
// 終わり
</script>
<title>Test 6</title>
</head>
<body>
<!-- https://qiita.com/tattyan39/items/324cd94c96089f3d9cd6 back
参照 https://qiita.com/tattyan39/items/a5bfbf37862e10cf6ff2 steeple1-->
<p id="start" align="center"><font class="h1_main">Welcome <font color="#00f">to</font> Test 6</font></p>
<span id="info"></span><p>This is a simple HTML document.</p>
<span id="my_js_stato">none running This white.</span> <span id="clock">--:--:--</span><br>
<br>
<button type="button" onclick="disp_js();">押してください下に変更が出ます</button>
<br>
<br>
<div id="moniter"></div>
<div id="draggable" style="position: absolute; left: 250px; top: 250px; cursor: grab;">
<p>ドラッグ可能な要素</p>
</div>
<br>
<div id="disp_in_html">osarete nai.</div>
<br>
<br>
<br><div id="ua"></div>
<br>
<br>
<p> note: ドラッグ可能な要素の位置を更新するための情報を表示します。
<br>クリックした位置からの差分を計算し、ドラッグ中の要素の位置を更新します。
<br>clickダウンドラッグでクリックした位置を取得し、ドラッグ開始点と終了点を設定します。次をやるまで有効です。
<br>ドラッグ中の要素の位置を更新します。キャッチ範囲 右クリックメニューへ
<br>ダブルクリックは範囲記憶を消します。
<br>参考 範囲配列 my_box = [開始x, 開始y, 終了x, 終了y]; // ドラッグ開始点と終了点の初期化
</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a href="#start">Back to Start</a>
<a id="end">end</a>
</body>
<script>statoup();</script>
</html>
google chromeの特殊フォント名が分からずコメントになっています。