LoginSignup
0
0
@tattyan3(tatsuji shimo)

html,css,javascript で、お遊び中「自由配置型script」

Posted at

ただいま、進化中。。。
https://twitter.com/Tattyan_03/status/1778011073167417510

総合全スクリプト
html studio.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<LINK rel="SHORTCUT ICON" href="imge/name.ico">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="description" content="たっちゃん,studio。">
<title>studio</title>
<link rel="stylesheet" href="studio.css" type="text/css">
<script>
if( screen.width/2 - 20 > window.innerWidth || screen.height/2 - 20 > window.innerHeight){
alert("ページが小さ過ぎます。");
}
</script>
<script src="studio.js" defer></script>

</head>
<body style="background-image : url(imge/bgsc_1.png);" onload="mystrto();">
                            <!-- stato studio -->
    <div id="flex1">
        <div class="content1">

            <div id="box01">
                <table><tr><td id="my1td1"><div id="my1d1"></div></td><td></td></tr><tr><td></td><td><div id="my1_1"><img src="imge/my_img.jpg" width="640" alt="イメージがありません"></div></td><tr></table>
	        </div>
            <div id="box02">
                <table><tr><td id="my2td1"></td><td></td></tr>
 <tr><td></td><td><span id="my2_1"><img src="imge/gall.png" width="128" height="128"></span></td></tr></table>
            </div>
            <div id="box02_2">
                <table><tr><td id="my2_2td1"></td><td></td></tr>
 <tr><td></td><td><span id="my2_2"></span></td></tr></table>
            </div><!-- test is it.-->
            <div id="box03">
                 <table><tr><td id="my3td1"></td><td></td></tr>
 <tr><td></td><td><div id="my3_1"><img src="imge/man1.png" width="128" height="128"></div></td></tr></table>
            </div>
            <div id="box04">
                <table><tr><td id="my4td1"></td><td></td></tr><tr><td></td><td>
<div id="my4_1">　<mark><font size="6"><b>テキスト</b>を<font color="#f00"><b>変</b>え</font>られる。</font></mark>　</div>
<!-- font-size:20px;  text-shadow: 水平方向の距離 垂直方向の距離 影のぼかし半径 影の色;  -->
</td></tr></table>
            </div>
           <div id="box04_01">
                <table><tr><td id="my4_1td1"></td><td></td></tr><tr><td></td><td>
<div id="my4_2"></div></td></tr></table>
            </div>			
			<div id="box05">
				<table border="1" class="teb_b_c"><tr><td id="my5td1"><div id="my5d1"></div></td><td id="my5td2"><div id="my5d2"></div></td><td id="my5td3"><div id="my5d3">16:9</div></td></tr>
<tr><td id="my5td4"></td><td id="my5td5"><div id="my5_1"></div></td><td id="my5td6"><div id="my5d6">0000</div></td></tr>
<tr><td id="my5td7"></td><td id="my5td8"><div id="my5_1"></div></td><td id="my5td9"></td></tr></table>
			</div>			
        </div>
        <div class="content2">
            <form>
				コントロール<br>
                <input type="button" value=" Relode " onClick="Relode();">
                <input type="button" value=" Stato " onClick="Stato1();">

                <input type="button" value=" Re_Stato " onClick="Re_Stato();">
            </form>
			<hr>
            <form name="my_form_0">
				タイプ<br>
                <input type="radio" checked onchange="radio_glope1(1);">demo　
                <input type="radio" onchange="radio_glope1(2);">non　
                <input type="radio" onchange="radio_glope1(3);">readプレー<br>
				比率<br>
				 <input type="radio" checked onchange="radio_glope2(1);">16:9 
				<input type="radio" onchange="radio_glope2(2);">9:16 
				<input type="radio" onchange="radio_glope2(3);">1:1<br>
				サイズ <span id="dis_size_wh">640 * 360</span><br>
				 <input type="radio" onchange="radio_glope3(1);">1280 720(x)x<br>
				 <input type="radio" onchange="radio_glope3(2);">1088 612(450 800)1040*780(4:3)<br>
				 <input type="radio" onchange="radio_glope3(3);">720 405(405 720)<br>
				 <input type="radio" checked onchange="radio_glope3(4);">640 360(360 640)<br>
				 <input type="radio" onchange="radio_glope3(5);">320 180(180 320) 
				<input type="radio" onchange="radio_glope3(6);">free<br> 
				 width<input type="textbox" size="2" value="100" id="tx_wid" onchange="text_3_w();">
				 height<input type="textbox" size="2" value="100" id="tx_hi" onchange="text_3_h();"><br>
				<font size="2">mini(max) 100*100 (1280*800)以内に。</font><br>				
				再生<br>
                　<input type="checkbox" checked onchange="chec_g4_1(checked);">Video S off 
                <input type="checkbox" onchange="chec_g4_2(checked);">audio S off
                <input type="checkbox" onchange="chec_g4_3(checked);">予備
            </form>
			<label class="my_1">
				<span class="my_1">popupを表示</span>
				<input type="checkbox" name="checkbox" class="my_1" onclick="chk1();">
				<div id="popup">
				  <img src="imge\cyat.png" class="my_1" alt="ねこ"><font size="2"><br>
				  <input type="checkbox" name="checkbox2" id="my_11" onclick="chk2();">上
				  <input type="checkbox"  name="checkbox3" id="my_111">自在
				  <input type="checkbox"  name="checkbox4" id="my_1v" checked>自由/固定
				  <input type="checkbox"  name="checkbox5" id="my_v">右側<br></font>
				  	<form name="my_form_1">
					<span style="color: #fff;">
						<select name="ray_sel" id="ray_selct">
							<option value="box01">box01</option>
							<option value="box02">box02</option>
							<option value="box02_2" selected>box02_2</option>
							<option value="box03">box03</option>
						</select>
						<input type="text" name="w0_w" id="w0" size="2" value="100">*
						<input type="text" name="h0_h" id="h0" size="2" value="100"><br>
						<input type="text" name="w1_w" id="w1" size="2" value="200">*
						<input type="text" name="h1_h" id="h1" size="2" value="200">
						<input type="button" value="送信" onclick="chk_3();">
					</span>
					</form>
				  <span style="color: #fff;">二行目</span><br>長いのを書いていくとどうなるのかと言うと端で折り返されるはずである。
				</div>
			  </label>
			<hr>
	 
		<!--<div id='audio0'>0<br><audio src="voise/myout2_0.wav" type="audio/wev" controls autoplay></audio></div>-->
			<div id='audio1'>1<br><audio src="voise/" controls stop-play muted></audio></div>
			<div id='audio2'>2<br><audio src="voise/" controls muted></audio></div>
			<div id='audio3'>3<br><audio src="voise/" controls muted></audio></div>
		</div>
	</div>  
	<div id="flex2">
		<div class="content3">
			<div id="test_my0">test0</div>
			<hr>
			<b>form</b><br>
			<form name="myfile">
				<input type="file" id="selfile" accept=".txt" />
				<div id="errmessage"></div>
				<textarea name="texta" id="mytextr"></textarea>
			</form>
	<!-- <object class="obje" data="./text/steping.txt" type="text/plain"></object><!--ディレクトリを与えて読み込む場合 -->
			<hr>
			<span id="my_in_a_text" onclick="it_test2('test');">てきすと</span><br>
	<!--<span id="my_inna_text" onclick="alert('it chenge!!');">てきすと<span><br>-->
			<input type="button" value="テキストリード" onclick="read();"><br>
			<p id="mfl">text</p>
			<p id="my6_1"><font size="6" color="#f0f">あ</font><font size="1">っ</font><font size="3">かわった</font></p>
		</div>
		<div class="content4">
			<table border="1"><tr><td width="256"><div id="video1">video_in1</div></td>
			<td width="256"><div id="video2">video_in2</div></td>
			<td width="256"><div id="video3">video_in3</div></td></tr>
			<tr><td><div id="img_viw1"> </div></td>
			<td><div id="img_viw2"> </div></td>
			<td><div id="img_viw3"> </div></td></tr>
			</table><br>
			高速読込エリア<br>
		</div>
  
	</div>
	<div id="flex_end">
		<div class="content_end">
    <!-- end -->
			<hr>
			<div style="text-align: center;">
				<p>tattyan(<a href="https://tattyan0-0.sakura.ne.jp/" name="administrator" target="~_blank">たっちゃん</a>) by 2023/11/14- </p>
			</div>
		</div>
	</div>
</body>
<!--<script src="my_js.js" defer></script>-->
</html>

css studio.css

@charset "UTF-8";
/* ver. 1_00(test) */
/* 2024/03/24- */


/* test */

body { 
    margin: 0px;
    background:#ffbbff;
}




#flex1 {
    display: flex;
}
#flex2 {		
    display: flex;
}
#flex_end {		
    display: flex;
}

.content1 {
    float: left;
    background-color: #dcffb8;
    border: 5px solid #5abbe4;
    padding: 0px;
    width: 1400px;/* *1280+32+64 *720+32*10 */
    height: 840px;
    justify-content: flex-start;
}
.content2 {
	
    float: left;
    border: 5px solid #a1d9f1;
    padding: 0px;
    width: 320px;
    height: 840px;
    justify-content: flex-end;
}

.content3 {
    float: left;
    padding: 32px;
	justify-content: flex-start;
}
.content4 {
    float: left;
    padding: 32px;
	justify-content: flex-end;
}



.content_end {
    float: left;
    padding: 32px;
	width: 100%;
	justify-content: flex-end;
}

/* まーかー　の例 */
.mark1 {
  background-color: #80ff80;
  color: #ffffff;
  padding: 14px;
}
.mark2 {
  background: linear-gradient(transparent 40%, #FFF100 0%);	
}	


#test_my0 {
	color: red;
}

#box01 { 
  background-color: #8080ff; 
  position: fixed; 
  top: 0;/* タグによる位置の既定の位置に配置無視 */
  left: 0;/* 無視 */
  /*width: 64px; 
  height: 64px;*/ 
} 
/* 変わらない */
#my1td1 {
	width: 32px;
	height: 32px;
}
#my1td3 {
    width: 32px;
}

#box02 { 
  /*background-color: #ff6a00;*/ 
  position: fixed;
  top: 0;/* タグによる位置の 相対位置に配置既定の位置 */
  left: 0;/* 既定の位置 */
  /*width: 64px; 
  height: 64px;*/ 
} 

#my2td1 {
	width: 60px;
	height: 280px;
}

#box02_2 { 
  position: fixed;
  top: 0;/* タグによる位置の 相対位置に配置既定の位置 */
  left: 0;/* 既定の位置 */
} 
#my2_2td1 {
	width: 1px;
	height: 1px;
}

#box03 { 
 /* background-color: #ffd800; */
  position: fixed;
  top: 0;/* タグによる位置の 絶対座標の位置 スクロール*/
  left: 0;/* スクロール */
  /*width: 64px; 
  height: 64px; */
} 

#my3td1 {
	width: 550px;
	height: 280px;
}

/* <font class="f1">あ</font><font class="f2">い</font><font class="f1">う</font><font class="f2">え</font>お<br>font にクラスが使える。<br> */*/
.f1 {
    color: violet;
    font-size: 20px;
}

.f2 {
    color: forestgreen;
    font-size: 25px;
}















#box04 { 
 /* background-color: #26b138;*/ 
  position: fixed;
  top: 0;/* タグによる位置の 絶対座標の位置 同じ位置*/
  left: 0;/* 同じ位置 */
 /* width: 58px; 
  height: 58px; */
} 
 #my4td1 {
	width: 200px;
	height: 350px;
}

#my4_1 {
	 background-color:rgba(127,127,255,0.5);
	/* text-shadowを複数回使って文字の周りを四方八方に1周させている状態です。上、右、下、左、左上、右上、右下、左下に1pxのぼやけない影を指定しています。 */
	 text-shadow:
           2px 2px 0px #fff, -2px -2px 0px #fff,
          -2px 2px 0px #fff,  2px -2px 0px #fff,
           2px 0px 0px #fff, -2px  0px 0px #fff,
           0px 2px 0px #fff,  0px -2px 0px #fff;
	 
}

.teb_b_c {
	
	border-color: #333399;
}


#box04_01 { 
 /* background-color: #26b138;*/ 
  position: fixed;
  top: 0;/* タグによる位置の 絶対座標の位置 同じ位置*/
  left: 0;/* 同じ位置 */
 /* width: 58px; 
  height: 58px; */
} 
#my4_1td1 {
	width: 420px;
	height: 310px;
}
#my4_2 {
	 background-color:rgba(255,127,255,0.5);
	/* text-shadowを複数回使って文字の周りを四方八方に1周させている状態です。上、右、下、左、左上、右上、右下、左下に1pxのぼやけない影を指定しています。 */
	 text-shadow:
           2px 2px 0px #fff, -2px -2px 0px #fff,
          -2px 2px 0px #fff,  2px -2px 0px #fff,
           2px 0px 0px #fff, -2px  0px 0px #fff,
           0px 2px 0px #fff,  0px -2px 0px #fff;
	 
}






	
#box05 { 
 /* background-color: #26b138;*/ 
  position: fixed;
  top: 0;/* タグによる位置の 絶対座標の位置 同じ位置*/
  left: 0;/* 同じ位置 */
}
#my5td1 {
  background-color: #1995ee; 	
	width: 30px;
	height: 30px;
}
#my5td2 {
  background-color: #1995ee; 

}
#my5td3 {
  background-color: #1995ee; 	
	width: 64px;

}
#my5td4 {
  background-color: #1995ee; 

}
#my5td5 {
	width: 636px;
	height: 375px;
}
#my5td6 {
  background-color: #1995ee; 
}
#my5td7 {
  background-color: #1995ee; 
	height: 64px;
}
#my5td8 {
  background-color: #1995ee; 
}
#my5td9 {
  background-color: #1995ee; 
}


/*popup表示させたいコンテンツのレイアウトと位置*/
#popup {
  width: 250px;
 /* line-height: 100px;*/
  background: #000;
  padding: 10px 10px;
  vertical-align: text-top;
  box-sizing: border-box;
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate (-50%, -50%);
  transform: translate (-50%, -50%);
}

img.my_1 {
  width: 200px;
}

label.my_1 {
  display:block;
  color: #01b6ed;
}

  /*ボタンの装飾*/
label.my_1 span.my_1 {
  display: block;
  background-color: #01b6ed;
  color: #fff;
  width: 200px;
  line-height: 40px;
  border-radius: 4px;
  text-align: center;

}
label.my_1 span.my_1:hover {
  cursor: pointer;
}
input.my_1[type="checkbox"] {
  display:none;
}
  /*checkboxがチェックの状態になったらpopupを表示させる*/
input.my_1[type="checkbox"]:checked + #popup {
  display:block;
}

/*
#selfile {
    width: auto;
    height: auto;
}


.obje {
    width: auto;
    height: auto;
}
*/
#mytextr {
    word-wrap: normal;
    width: 400px;
    height: 150px;
    overflow: scroll;
    /* valuetext :"test.txt"*/
    /* border: 1px solid white;*/
    background: #fff;
    padding: 10px;
    /*  box-sizing: border-box;*/
    word-break: break-all;
    border-radius: 5px;
    font-family: monospace;
    font-size: 0.75rem;
    margin-top: 10px;
}

#test_my1 {
	 color: red;
}

javascript studio.js

// ver. 1_00(test)

/*
 2024/03/14-03/21-
 ///////////////////////////////
 html
                            <!-- stato studio -->
    <div id="flex1">
        <div class="content1">

            <div id="box01">
                <table><tr><td id="my1td1"><div id="my1d1"></div></td><td></td></tr><tr><td></td><td><div id="my1_1"><img src="imge/my_img.jpg" width="640" alt="イメージがありません"></div></td><tr></table>
	        </div>
            <div id="box02">
                <table><tr><td id="my2td1"></td><td></td></tr>
 <tr><td></td><td><span id="my2_1"><img src="imge/gall.png" width="128" height="128"></span></td></tr></table>
            </div>
            <div id="box03">
                 <table><tr><td id="my3td1"></td><td></td></tr>
 <tr><td></td><td><div id="my3_1"><img src="imge/man1.png" width="128" height="128"></div></td></tr></table>
            </div>
            <div id="box04">
                <table><tr><td id="my4td1"></td><td></td></tr><tr><td></td><td>
<div id="my4_1">　<mark><font size="6"><b>テキスト</b>を<font color="#f00"><b>変</b>え</font>られる。</font></mark>　</div>
<!-- font-size:20px;  text-shadow: 水平方向の距離 垂直方向の距離 影のぼかし半径 影の色;  -->
</td></tr></table>
            </div>
           <div id="box04_01">
                <table><tr><td id="my4_1td1"></td><td></td></tr><tr><td></td><td>
<div id="my4_2"></div></td></tr></table>
            </div>			
			<div id="box05">
				<table border="1" class="teb_b_c"><tr><td id="my5td1"><div id="my5d1"></div></td><td id="my5td2"><div id="my5d2"></div></td><td id="my5td3"><div id="my5d3">16:9</div></td></tr>
<tr><td id="my5td4"></td><td id="my5td5"><div id="my5_1"></div></td><td id="my5td6"><div id="my5d6">0000</div></td></tr>
<tr><td id="my5td7"></td><td id="my5td8"><div id="my5_1"></div></td><td id="my5td9"></td></tr></table>
			</div>			
        </div>
        <div class="content2">
            <form>
				コントロール<br>
                <input type="button" value=" Relode " onClick="Relode();">
                <input type="button" value=" Stato " onClick="Stato1();">

                <input type="button" value=" Re_Stato " onClick="Re_Stato();">
            </form>
			<hr>
            <form name="my_form_0">
				タイプ<br>
                <input type="radio" checked onchange="radio_glope1(1);">demo　
                <input type="radio" onchange="radio_glope1(2);">non　
                <input type="radio" onchange="radio_glope1(3);">readプレー<br>
				比率<br>
				 <input type="radio" checked onchange="radio_glope2(1);">16:9 
				<input type="radio" onchange="radio_glope2(2);">9:16 
				<input type="radio" onchange="radio_glope2(3);">1:1<br>
				サイズ <span id="dis_size_wh">640 * 360</span><br>
				 <input type="radio" onchange="radio_glope3(1);">1280 720(x)x<br>
				 <input type="radio" onchange="radio_glope3(2);">1088 612(450 800)1040*780(4:3)<br>
				 <input type="radio" onchange="radio_glope3(3);">720 405(405 720)<br>
				 <input type="radio" checked onchange="radio_glope3(4);">640 360(360 640)<br>
				 <input type="radio" onchange="radio_glope3(5);">320 180(180 320) 
				<input type="radio" onchange="radio_glope3(6);">free<br> 
				 width<input type="textbox" size="2" value="100" id="tx_wid" onchange="text_3_w();">
				 height<input type="textbox" size="2" value="100" id="tx_hi" onchange="text_3_h();"><br>
				<font size="2">mini(max) 100*100 (1280*800)以内に。</font><br>				
				再生<br>
                　<input type="checkbox" checked onchange="chec_g4_1(checked);">Video S off 
                <input type="checkbox" onchange="chec_g4_2(checked);">audio S off
                <input type="checkbox" onchange="chec_g4_3(checked);">予備
            </form>
			<hr>
	 
		<!--<div id='audio0'>0<br><audio src="voise/myout2_0.wav" type="audio/wev" controls autoplay></audio></div>-->
			<div id='audio1'>1<br><audio src="voise/" controls stop-play muted></audio></div>
			<div id='audio2'>2<br><audio src="voise/" controls muted></audio></div>
			<div id='audio3'>3<br><audio src="voise/" controls muted></audio></div>
		</div>
	</div>  
	<div id="flex2">
		<div class="content3">
			<div id="test_my0">test0</div>
			<hr>
			<b>form</b><br>
			<form name="myfile">
				<input type="file" id="selfile" accept=".txt" />
				<div id="errmessage"></div>
				<textarea name="texta" id="mytextr"></textarea>
			</form>
	<!-- <object class="obje" data="./text/steping.txt" type="text/plain"></object><!--ディレクトリを与えて読み込む場合 -->
			<hr>
			<span id="my_in_a_text" onclick="it_test2('test');">てきすと</span><br>
	<!--<span id="my_inna_text" onclick="alert('it chenge!!');">てきすと<span><br>-->
			<input type="button" value="テキストリード" onclick="read();"><br>
			<p id="mfl">text</p>
			<p id="my6_1"><font size="6" color="#f0f">あ</font><font size="1">っ</font><font size="3">かわった</font></p>
		</div>
		<div class="content4">
			<table border="1"><tr><td width="256"><div id="video1">video_in1</div></td>
			<td width="256"><div id="video2">video_in2</div></td>
			<td width="256"><div id="video3">video_in3</div></td></tr>
			<tr><td><div id="img_viw1"> </div></td>
			<td><div id="img_viw2"> </div></td>
			<td><div id="img_viw3"> </div></td></tr>
			</table><br>
			高速読込エリア<br>
		</div>
  
	</div>
	<div id="flex_end">
		<div class="content_end"></div>
    </div>
    <!-- end -->
*/
// nn = true,false


const maxtime = 7200;
//
let timerId = 0; //タイマーID
let intrtim = 1000; //インターバルタイマーの時間
let singlsyot = false;
let tim_end = false;
let mycount = -3;

let timId1 = 1;
let puleymiu = "puleymiu";
let mykyoku = "mykyoku";
let mloop = '';// 'loop ';

let video_voise_on = false;
let audio_voise_on = true;
let sonota_on = false;

let v_muted = "muted ";// ""
let a_muted = "";// "muted "
let v_url = "";
let a1_url = "";
let a2_url = "";
let a3_url = "";


let dis_hiritu = "16:9"
// let hiritu = '16:5';
text_read();
let my_n =0;
let readlin = ['//00/*zahyou1_1/*#my1td1/*0/*0/*32/*32/*/* box01 1_1 始まり指定 */',
    '//00/*image1/*/*#my1_1/*<img src="imge/my_img.jpg" width="640" alt="イメージがありません">', 
    '//00/*redin_v1/*imge/una00.mp4/*#video1/*<video controls src="imge/una00.mp4" width="256"></video>/* box01 用ビデオ先読み */',
    '//00/*redin_a1/*voise/una_kiruna.wav/*#audio1/*Stato Up<br><audio src="voise/una_kiruna.wav" type="audio/wev" controls></audio>/* fast music 1へ先読み */',
    '//-2/*zahyou2_1/*#my2td1/*0/*0/*32/*32/*/* box02_1 始まり指定 */',//スタイルより座標をとってくること。
'//-2/*image2/*/*#my2_1/*<img src="imge/gall.png" width="128" height="128"></span>/* box02 main image 女の子 */',
    '//-2/*zahyou3/*#my3td1/*0/*0/*32/*32/*/* box03_1 始まり指定 */',//スタイルより座標をとってくること。
    '//-2/*image2/*/*#my3_1/*<img src="imge/man1.png" width="128" height="128"></span>/* box03 main image 女の子 */'];

let linein_arr_n=[];

//glooe0 コントロールむ
function mystrto() {
    
    clearInterval(timId1);

    while(readlin[my_n].startsWith('//00')){
        linein_arr_n = readlin[my_n].split("/*");
        if( linein_arr_n[1]=="zahyou1_1"){
        }
        if( linein_arr_n[1]=="zahyou2_1"){
        }
        if( linein_arr_n[1]=="zahyou3_1"){
        }
        if( linein_arr_n[1]=="zahyou4_1"){
        }
        if( linein_arr_n[1]=="zahyou4_1_1"){
        }
        if( linein_arr_n[1]=="image1"){
        }
        if( linein_arr_n[1]=="redin_v1"){
        }






        my_n +=1;
    }
    v_url = "imge/una00.mp4";
    document.querySelector('#video1').innerHTML = '<video controls src="imge/una00.mp4" width="256"></video>';// muted
    a1_url = "voise/una_kiruna.wav";
    document.querySelector('#audio1').innerHTML = 'Stato Up<br><audio src="voise/una_321.wav" type="audio/wev" controls></audio>';
    timId1 = setInterval('demoPlay()', 1000);

}
function demoPlay() {
  
    clearInterval(timId1);
    clearInterval(timerId);
    tim_end = false;
    mycount = -3;
}


// gloope1_in
/*
				タイプ<br>
                <input type="radio" checked onchange="radio_glope1(1);">demo　
                <input type="radio" onchange="radio_glope1(2);">non　
                <input type="radio" onchange="radio_glope1(3);">readプレー<br>
*/
// Radio Button change
function radio_glope1(int_r_no) {  //2,3エレメントRadio noだけで良い?変わった時しか来ないから

    alert(int_r_no);
    if (int_r_no == 1) {
        document.my_form_0.elements[1].checked = false;
        document.my_form_0.elements[2].checked = false;
        // Radio2が選択
    }
    if (int_r_no == 2) {
        document.my_form_0.elements[0].checked = false;
        document.my_form_0.elements[2].checked = false;
        // Radio2が選択
    }
    if (int_r_no == 3) {
        document.my_form_0.elements[0].checked = false;
        document.my_form_0.elements[1].checked = false;
        // Radio1が選択
    }
}


/*  定義  */
let hiritu = '16:9';


// gloope2_in
/*
				比率<br>
				 <input type="radio" checked onchange="radio_glope2(1);">16:9
				<input type="radio" onchange="radio_glope2(2);">9:16 
				<input type="radio" onchange="radio_glope2(3);">1:1<br> and free
*/                            // no_3-5
function radio_glope2(int_r_no){
    alert(int_r_no);
    if (int_r_no == 1) {
        document.my_form_0.elements[4].checked = false;
        document.my_form_0.elements[5].checked = false;
        document.my_form_0.elements[11].checked = false;		
        hiritu = '16:9';

    }
    if (int_r_no == 2) {
        document.my_form_0.elements[3].checked = false;
        document.my_form_0.elements[5].checked = false;
        document.my_form_0.elements[11].checked = false;		
        hiritu = '9:16';
    }
    if (int_r_no == 3) {
        document.my_form_0.elements[3].checked = false;
        document.my_form_0.elements[4].checked = false;
        document.my_form_0.elements[11].checked = false;		
        hiritu = '1:1';
    }
	
}

/*  定義  */
let dis_yoko = 640;
let dis_tate = 200;



// gloope3_in
/*
				サイズ <span id="dis_size_wh">640 * 360</span><br>
				 <input type="radio" onchange="radio_glope3(1);">1280 720(x)x<br>
				 <input type="radio" onchange="radio_glope3(2);">1088 612(450 800)1040*780(4:3)<br>
				 <input type="radio" onchange="radio_glope3(3);">720 405(405 720)<br>
				 <input type="radio" checked onchange="radio_glope3(4);">640 360(360 640)<br>
				 <input type="radio" onchange="radio_glope3(5);">320 180(180 320) 
				<input type="radio" onchange="radio_glope3(6);">free<br> 
				 width<input type="textbox" size="2" value="100" id="tx_wid" onchange="text_3_w();">
				 height<input type="textbox" size="2" value="100" id="tx_hi" onchange="text_3_h();"><br>
				<font size="2">mini(max) 100*100 (1280*800)以内に。</font><br>				
*/                           // no_6-11
function radio_glope3(int_r_no){
	alert(int_r_no);
    if (int_r_no == 1) {  //6  <input type="radio" onchange="radio_glope3(1);">
        document.my_form_0.elements[7].checked = false;
        document.my_form_0.elements[8].checked = false;
        document.my_form_0.elements[9].checked = false;
        document.my_form_0.elements[10].checked = false;
        document.my_form_0.elements[11].checked = false;
		if(hiritu == '16:9'){		
			dis_yoko = 1280;
			dis_tate = 720;
        
		}
		if(hiritu == '9:16' || hiritu == '1:1'){  
			document.my_form_0.elements[4].checked = false;
			document.my_form_0.elements[5].checked = false;
			document.my_form_0.elements[3].checked = true;
			dis_yoko = 1280;
			dis_tate = 720;
		}	
		dis_hiritu = "16:9";
    }
    if (int_r_no == 2) {   //7  <input type="radio" onchange="radio_glope3(2);">
        document.my_form_0.elements[6].checked = false;
        document.my_form_0.elements[8].checked = false;
        document.my_form_0.elements[9].checked = false;
        document.my_form_0.elements[10].checked = false;
        document.my_form_0.elements[11].checked = false;		
        if(hiritu == '16:9'){		
			dis_yoko = 1088;
			dis_tate = 612;
            dis_hiritu = "16:9";
		}
		if(hiritu == '9:16'){		
			dis_yoko = 450;
			dis_tate = 800;
            dis_hiritu = "9:16";
		}
		if(hiritu == '1:1'){		
			dis_yoko = 1040;
			dis_tate = 780;
            dis_hiritu = "4:3";
		}

    }
    if (int_r_no == 3) {   //8 <input type="radio" onchange="radio_glope3(3);">
		document.my_form_0.elements[6].checked = false;
        document.my_form_0.elements[7].checked = false;
        document.my_form_0.elements[9].checked = false;
        document.my_form_0.elements[10].checked = false;
        document.my_form_0.elements[11].checked = false;		
        if(hiritu == '16:9'){		
			dis_yoko = 720;
			dis_tate = 405;
            dis_hiritu = "16:9";
		}
		if(hiritu == '9:16'){		
			dis_yoko = 405;
			dis_tate = 720;
            dis_hiritu = "9:16";
		}
		if(hiritu == '1:1'){		
			dis_yoko = 720;
			dis_tate = 720;
            dis_hiritu = "1:1";
		}
    }
    if (int_r_no == 4) {   //9 <input type="radio" checked onchange="radio_glope3(4);">
        document.my_form_0.elements[6].checked = false;
        document.my_form_0.elements[7].checked = false;
        document.my_form_0.elements[8].checked = false;
        document.my_form_0.elements[10].checked = false;
        document.my_form_0.elements[11].checked = false;		
        if(hiritu == '16:9'){		
			dis_yoko = 640;
			dis_tate = 360;
            dis_hiritu = "16:9";
		}
		if(hiritu == '9:16'){		
			dis_yoko = 360;
			dis_tate = 640;
            dis_hiritu = "9:16";
		}
		if(hiritu == '1:1'){		
			dis_yoko = 640;
			dis_tate = 640;
            dis_hiritu = "1:1"
		}
    }
    if (int_r_no == 5) {   //10  <input type="radio" onchange="radio_glope3(5);">
        document.my_form_0.elements[6].checked = false;
        document.my_form_0.elements[7].checked = false;
        document.my_form_0.elements[8].checked = false;
        document.my_form_0.elements[9].checked = false;
        document.my_form_0.elements[11].checked = false;		
        if(hiritu == '16:9'){		
			dis_yoko = 320;
			dis_tate = 180;
            dis_hiritu = "16:9";
		}
		if(hiritu == '9:16'){		
			dis_yoko = 180;
			dis_tate = 320;
            dis_hiritu = "9:16";
		}
		if(hiritu == '1:1'){		
			dis_yoko = 320;
			dis_tate = 320;
            dis_hiritu = "1:1";
		}

    }
    if (int_r_no == 6) {   //11    gllpe_1
        document.my_form_0.elements[6].checked = false;
        document.my_form_0.elements[7].checked = false;
        document.my_form_0.elements[8].checked = false;
        document.my_form_0.elements[9].checked = false;
        document.my_form_0.elements[10].checked = false;
		
        document.my_form_0.elements[3].checked = false;
        document.my_form_0.elements[4].checked = false;
		document.my_form_0.elements[5].checked = false;
		hiritu = "furee";

		dis_yoko = 100;
		dis_tate = 100;
        dis_hiritu = "furee";
		
    }
	
	Chend_dsp_wh();
}
// テキストボックスからテキストを得て数字にする
/*const mystr = "a-9-b-1234-c-55555-d";
const result = mystr.match(/\d{2,4}/);
console.log( result[0] );*/
let non_nmu = "";
function text_3_w(){
	if(hiritu != "furee"){
		alert('フリーサイズで使ってください');
		return;
	}
	let str_in_text = document.getElementById('tx_wid').value;
	if(str_in_text.length < 3 || str_in_text.length > 4){
		alert('間違っています。');
		return;
	}
	non_nmu = str_in_text;
	non_nmu = non_nmu.replace(/[0-9]/g, '');
	if (non_nmu != ""){		
		alert('数字だけを入れてください['+non_nmu+']');
		return;
	}else{		
		let int_value_t = parseInt(str_in_text);
		if(int_value_t>99 && int_value_t < 1281){
			//値を入れる
			alert('width値を'+int_value_t+'にします。');
						
			dis_yoko = int_value_t;
			Chend_dsp_wh();
			
		}else{
			alert('100 ~999までてす');
		}
	}
}
function text_3_h(){
	if(hiritu != "furee"){
		alert('フリーサイズで使ってください');
		return;
	}
	let str_in_text = document.getElementById('tx_hi').value;
	if(str_in_text.length != 3){
		alert('間違っています。');
		return;
	}
	non_nmu = str_in_text;
	non_nmu = non_nmu.replace(/[0-9]/g, '');
	if (non_nmu != ""){		
		alert('数字だけを入れてください['+non_nmu+']');
		return;
	}else{		
		let int_value_t = parseInt(str_in_text);
		if(int_value_t>99 && int_value_t < 801){
			//値を入れる
			alert('hight値を'+int_value_t+'にします。');
			
			dis_tate = int_value_t ;
			Chend_dsp_wh();
			
		}else{
			alert('100 ~999までてす');
		}
	}
}
/* サイズ <span id="dis_size_wh">640 * 200</span><br> */
function Chend_dsp_wh(){

    document.querySelector('#my5d3').innerHTML = dis_hiritu;	
	document.querySelector('#dis_size_wh').innerHTML = dis_yoko + ' * ' + dis_tate;
	
	const box_5 = document.querySelector("#my5td5"); 
	box_5.style.width = dis_yoko + 'px';  
	box_5.style.height = dis_tate + 'px'; 
	
	
	
}

// gloope4_in
/*
				再生<br>
                　<input type="checkbox" checked onchange="chec_g4_1(checked);">Video S off 
                <input type="checkbox" onchange="chec_g4_2(checked);">audio S off
                <input type="checkbox" onchange="chec_g4_3(checked);">予備
*/
function chec_g4_1(in_this) {
    if (in_this) {
        video_voise_on = false;
        v_muted = "muted ";
    } else {
        video_voise_on = true;
        v_muted = "";
    }
    alert(video_voise_on);
}
function chec_g4_2(in_this) {
    if (in_this) {
        audio_voise_on = false;
        a_muted = "muted ";
    } else {
        audio_voise_on = true;
        a_muted = "";
    }
    alert(audio_voise_on);
}
function chec_g4_3(in_this) {
    if (in_this) {
        sonota_on = true;
    } else {
        sonota_on = false;
    }
    alert(sonota_on);
}
// gloop_in end


/* stylsyto 変更 */
let my_width = document.documentElement.clientWidth;
let myNewWidth = my_width - 250 //styleで横幅を250pxと指定しているから
let my_x = 0;
let my_y = 0;
let myset_pop = false;


if(!document.getElementsByName('checkbox')){
    myset_pop = false;
}else{
    myset_pop = true;
}
document.querySelector('#popup').style.left = '50%';//`${myNewWidth}px`;
/*               */
function chk1() {
    my_width = document.documentElement.clientWidth;
    myNewWidth = my_width - 250
    document.querySelector('#popup').style.left ='50%';// `${myNewWidth}px`;
}

function chk2() {
    let myelement = document.getElementsByName('checkbox2');
    if (myelement[0].checked == true){
       document.querySelector('#popup').style.top = '0';
    }else{
        document.querySelector('#popup').style.top = '50%';
    }
}
/*  */
window.addEventListener("click", e => {
    let myelement3 = document.getElementsByName('checkbox3');
    if(myset_pop == true){
        my_x = e.clientX;
        my_y = e.clientY;
        let myelement4 = document.getElementsByName('checkbox4');//free
        if(myelement4[0].checked == true){
            let myelement5 = document.getElementsByName('checkbox5');
            if(myelement5[0].checked != true){
                document.getElementById('w0').value =my_x;
                document.getElementById('h0').value =my_y;
            }else{
                document.getElementById('w1').value =my_x - document.getElementById('w0').value;
                document.getElementById('h1').value =my_y - document.getElementById('h0').value; 
            }
        }     
        if (myelement3[0].checked == true){      
        //const box_pop = document.querySelector("#popup"); 
	        const my_box_x_pop = 250;//ポップ     
            if(my_width < my_x+my_box_x_pop){
        //      alert('右端です。');
                my_x = my_width - my_box_x_pop;
            }
            document.querySelector('#popup').style.left = my_x+'px';//`${myNewWidth}px`;
            document.querySelector('#popup').style.top = my_y+'px';               
        }
    }
});
/* owari */

/* ポップアップウィンドウからの取り込み */
function chk_3() {
    let my_pop_select = document.getElementById('ray_selct').value;
    let my_to1_w0 = document.getElementById('w0').value;
    let my_to1_h0 = document.getElementById('h0').value;
    let my_to1_w1 = document.getElementById('w1').value;
    let my_to1_h1 = document.getElementById('h1').value;
    alert(my_pop_select+' W0='+my_to1_w0+' H0='+my_to1_h0+' W1='+my_to1_w1+' H1='+my_to1_h1);

    if(my_pop_select == "box02_2"){
        let box_2_2 = document.querySelector("#my2_2td1"); 
        box_2_2.style.width = my_to1_w0 + 'px';  
        box_2_2.style.height = my_to1_h1 + 'px';
        document.querySelector("#my2_2").innerHTML = '<img src="imge/cyat.png" width="'+my_to1_w1+'" height="'+my_to1_h1+'"></span>'; 
    }
    //my2_2td1

}
/* end */

function Stato1() {

        if(v_url !=""){
        document.querySelector('#my1_1').innerHTML = '<video controls src="'+v_url+'" stop-play width="640"></video>';// muted
    }
    if(a1_url !=""){
        document.querySelector('#audio1').innerHTML = '1<br><audio src="'+a1_url+'" controls stop-play></audio>';
    }
    if(a1_url !=""){
        document.querySelector('#audio2').innerHTML = '2<br><audio src="'+a2_url+'" controls stop-play></audio>';
    }
    if(a1_url !=""){
        document.querySelector('#audio3').innerHTML = '3<br><audio src="'+a3_url+'" controls stop-play></audio>';
    }



    mycount = -3;
    tim_end = false;
    if (video_voise_on) {
        document.querySelector('#my1_1').innerHTML = '<video src="imge/una00.mp4" width="640" autoplay></video>'; 
        
    }else {
        document.querySelector('#my1_1').innerHTML = '<video src="imge/una00.mp4" width="640" muted autoplay></video>';
    }
    if (audio_voise_on) {
        document.querySelector('#audio1').innerHTML = 'una_kiruna<br><audio controls src="voise/una_321.wav" autoplay></audio>';
    } else {
        document.querySelector('#audio1').innerHTML = 'una_kiruna<br><audio controls src="voise/una_321.wav" muted autoplay></audio>';
    }
   
    timerId = setInterval('mytfunc()', intrtim);
}





let bol_mymy = "false";
function mytfunc() {

    // 訳の分らん割り込みが発生している
        mycount += 1;
 
 //   alert('リード'+String(mycount));
    if (mycount == 0) {
     //   document.querySelector('#my1_1').innerHTML = '<video controls src="imge/una00.mp4" width="640" autoplay muted></video>';// muted
        // document.querySelector('#audio0').innerHTML = `${puleymiu} ${mykyoku}<br><audio controls src="voise/myout2_0.wav" type="audio/wev" autoplay></audio>`;//myout2_0 // una_kiruna
        a2_url = "voise/myout2_0.wav";
        document.querySelector('#audio2').innerHTML = puleymiu+" "+mykyoku+'<br><audio controls src="voise/myout2_0.wav" '+a_muted+'autoplay></audio>';
    }

	if(mycount==4){
		document.querySelector('#img_viw1').innerHTML = '<img src="imge/man2_1.png" width="100" height="128">';
	}
	
	if(mycount==6){
		document.querySelector('#my3_1').innerHTML = '<img src="imge/man2_1.png" width="100" height="128">';
	}

 
    if (mycount == 8) {
       // alert('5==5');終わった後なんで出てくるんや。
        document.querySelector('#my4_1').innerHTML = '　<font size="7" color="#f0f">あ</font><font size="1">っ</font><mark clas="mark2"><font size="3">かわった</font></mark>　';
    
    }
	if(mycount == 9){
		document.querySelector('#video2').innerHTML = '<video controls src="imge/rec_2023_07_30_1.mp4" width="256"></video>';// muted
	}
    if (mycount == 12) { //プリロード\\\\ stop-play v_url = "imge/una00.mp4";
         document.querySelector('#my1_1').innerHTML = '<video controls src="'+v_url+'" stop-play width="640"></video>';// muted
         v_url = "imge/rec_2023_07_30_1.mp4";
        document.querySelector('#my1_1').innerHTML = '<video controls src="imge/rec_2023_07_30_1.mp4" width="640"' + v_muted + 'autoplay></video>';// muted
    }
 
    if (mycount == 20) {

        document.querySelector('#audio1').innerHTML = puleymiu + " " + mykyoku +'<br><audio controls src="voise/una_kiruna.wav" '+a_muted+'autoplay></audio>';
    }
   if (mycount == 25) {
       // 
        document.querySelector('#my4_1').innerHTML = '　男を、<br>いつ変えた?　';    
    }
   if (mycount == 26) {
       // 
        document.querySelector('#my4_2').innerHTML = '　鈴木と申します。 ';    
    }

    if (mycount == 610) { //タイムアウト
        tim_end = true;
    }

	if(mycount >= 0){
		let sec = mycount;
		let hour = Math.floor(sec / 3600);
		let min = Math.floor(sec % 3600 / 60);
		let rem = sec % 60;
		document.querySelector('#my5d6').innerHTML = " " + mycount.toString().padStart(4, '0')+'<font size="2"><br> '+`${hour}:${min}:${rem}`+'</font>';//("00000" + num1).slice(-5);`${hour}時間${min}分${rem}秒`
	}else{
		document.querySelector('#my5d6').innerHTML = " " + mycount.toString().padStart(4, '0')+'<font size="2"><br>　0:0:0</font>';
	}
	
    if (mycount > maxtime) {
         tim_end = true;
    }


    if (tim_end==true) {
        bol_mymy = "true";
    } else {
        bol_mymy = "false";
    }


 //   alert(bol_mymy); 
    if (tim_end==true) {
      
        mycount = 0;
        clearInterval(timerId);
      //  alert('終わり' + String(mycount));
    }
  

  //  clearInterval(timerId);



}

function it_test2(test) {
 //   document.querySelector('#my6_1').innerHTML = 'あいうえお';
    document.querySelector('#my_in_a_text').innerHTML = test + 'あいうえお';
}

function Relode() {
    location.reload();
}



function Re_Stato() {
  //  alert('fast');
    if(v_url !=""){
        document.querySelector('#my1_1').innerHTML = '<video controls src="'+v_url+'" stop-play width="640"></video>';// muted
    }
    if(a1_url !=""){
        document.querySelector('#audio1').innerHTML = '1<br><audio src="'+a1_url+'" controls stop-play></audio>';
    }
    if(a1_url !=""){
        document.querySelector('#audio2').innerHTML = '2<br><audio src="'+a2_url+'" controls stop-play></audio>';
    }
    if(a1_url !=""){
        document.querySelector('#audio3').innerHTML = '3<br><audio src="'+a3_url+'" controls stop-play></audio>';
    }



    mystrto();   //これで何で動くのかが理解出来ていない。

    Stato1();



}




// text_read();  //一回だけ実行してやれば常駐して消すまで有効に成る　毎回実行すると得られない。
//let this_file = "";
function text_read() {
   //  alert('テキストリード');
    var obj1 = document.getElementById("selfile");

    obj1.addEventListener("change", function(evt) { //"change"
        var file = evt.target.files;
        var reader = new FileReader();
        reader.readAsText(file[0]);
        reader.onload = function(ev) {
            document.myfile.texta.value = reader.result;
        }

        //エラー処理
        reader.onerror = function(e) {
            //エラーメッセージを配列に格納する
            var errmes = new Array(
                "",
                "ファイルが見つかりません！",
                "セキュリティエラーが検出されました！",
                "ファイルの読込が中断されました！",
                "ファイルの読み込み権限がありません！",
                "ファイルサイズが大き過ぎます！"
            );
            //エラーをinnerHTMLで書き出す
            var obj2 = document.getElementById("errmessage");
            obj2.innerHTML = errmes[reader.error];// obj2.innerHTML = errmes[reader.error.code];
        }

    }, false);
}


//              form end
// no coll
function read() {
	alert("my_mese");
    let redotext = document.querySelector('#mytextr').value;
	alert(redotext);
    if (redotext == "") { return; }


    // document.querySelector('#mfl').innerHTML = redotext.replace(/\n/g, '<br>');
    //   let readlin = [];  let readlin  先頭へ持って行った
    readlin[0] = '';
    let ii = 0;
	
    for (let i = 0; i < redotext.length; i++) {
        if (!redotext[i].includes('\n')) {
            readlin[ii] += redotext[i];
        } else {
            ii++;
            readlin[ii] = '';
        }
    }
    document.querySelector('#mfl').innerHTML = readlin;
}

長くなった。。。適当に端折ってください。今回は配置をメインとして書きました。
おわり。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0