Javascript MEMO

HTMLタグの切り替え

タイマーでHTMLタグを切り替える方法

HTMLタグの切り替えサンプル

let adIndex=0;
displayAd();
//広告表示
function displayAd()
{
	//タグの出力
	printAd();
	//秒数を指定
	setTimeout("displayAd()", 4000);
	//次の出力するHTMLタグ準備
	adIndex++;
	if(adIndex==2)adIndex=0;
}
//タグの出力
function printAd()
{
	const obj = document.getElementById("ad");
	obj.innerHTML = ad();
}
//広告HTML
function ad()
{
	let path="画像パスを設定します";// ex.) path="img/";
	let fileID="";
	let text="";
	let url="";
	let memo="";
	if(adIndex==0)
	{
		fileID="nawmin_sample1.png";
		text="イラスト：農民イラスト";
		url="https://nawmin.stores.jp";
		memo="農民イラストさんのイラストはこちら";
	}
	else
	{
		fileID="soco-st_sample4.png";
		text="ソコスト";
		url="https://soco-st.com";
		memo="ソコストさんのイラストはこちら";
	}
	let html="";
	html += "<table>";
	html += "<tr>";
	html += "<td>";
	html += "<img src=" + path + fileID + " style='max-width:50px;max-height:50px;'>";
	html += "</td>";
	html += "<td>";
	html += "<label>" + text + "</label>";
	html += "</td>";
	html += "</tr>";
	html += "<tr>";
	html += "<td>";
	html += "[URL]";
	html += "</td>";
	html += "<td style='word-break:break-all'>";
	html += "<a href='" + url + "' TARGET='_blank'>" + memo + "</a>";
	html += "</td>";
	html += "</tr>";
	html += "</table>";

	return html;
}

function printAd()

const obj = document.getElementById("ad");
obj.innerHTML = ad();

divタグにadメソッドで準備したHTMLタグを設定します。

function ad()

adIndexの判定値

0	農民イラストさん
1	ソコストさん

分岐した判定結果よりHTMLを返します。

[謝辞]

画像の一部に「イラスト：農民イラスト」さんの画像を使用させていただいております。
ありがとうございます。

[URL]イラスト：農民イラスト
URL[https://nawmin.stores.jp][クリックすると開きます])

画像の一部に「ソコスト」さんの画像を使用させていただいております。
ありがとうございます。

[URL]ソコスト
URL[https://soco-st.com][クリックすると開きます])

戻る

back

change HTML tag

change HTML tag with timer

change HTML tag sample

copy

let adIndex=0;
displayAd();
//display ad
function displayAd()
{
	//output tag
	printAd();
	//specify second
	setTimeout("displayAd()", 4000);
	//prepare next output HTML
	adIndex++;
	if(adIndex==2)adIndex=0;
}
//output tag
function printAd()
{
	for(i=0;i<2;i++)
	{
		const obj = document.getElementById("ad");
		obj.innerHTML = ad();
	}
	
}
//ad HTML
function ad(lang,index)
{
	let path="Set the image path";// ex.) path="img/";
	let fileID="";
	let text="";
	let url="";
	let memo="";
	if(adIndex==0)
	{
		fileID="nawmin_sample1.png";
		text="illustration by nawmin.com";
		url="https://nawmin.stores.jp";
		memo="For illustration by nawmin.com, tap here";
	}
	else
	{
		fileID="soco-st_sample4.png";
		text="soco-st.com";
		url="https://soco-st.com";
		memo="For illustrations of soco-st.com, tap here";
	}
	let html="";
	html += "<table>";
	html += "<tr>";
	html += "<td>";
	html += "<img src=" + path + fileID + " style='max-width:50px;max-height:50px;'>";
	html += "</td>";
	html += "<td>";
	html += "<label>" + text + "</label>";
	html += "</td>";
	html += "</tr>";
	html += "<tr>";
	html += "<td>";
	html += "[URL]";
	html += "</td>";
	html += "<td style='word-break:break-all'>";
	html += "<a href='" + url + "' TARGET='_blank'>" + memo + "</a>";
	html += "</td>";
	html += "</tr>";
	html += "</table>";

	return html;
}

function printAd()

const obj = document.getElementById("ad");
obj.innerHTML = ad();

Set the HTML tag prepared by the ad method in the div tag.

function ad()

adIndex judgment value

0	illustration by nawmin.com
1	illustration by soco-st.com

HTML is returned based on the branched decision result.

[Acknowledgements]

Some of the images used are from "illustration by nawmin.com"
Thank you very much.

[URL]illustration by nawmin.com
URL[https://nawmin.stores.jp][click to open the homepage])

the images used are from "illustration by soco-st.com"
Thank you very much.

[URL]soco-st.com
URL[https://soco-st.com][click to open the homepage])

back