Category: JavaScript

javascriptで北京の標準時間

<b>北京の標準時間</b>
<div id="time"></div>
<script type="text/javascript">
var diff = 1;
var value = diff + 15;
time();
function time(){
  var now = new Date(Date.now() - (value*60 - new Date().getTimezoneOffset())*60000);
  document.getElementById("time").innerHTML = now.toLocaleTimeString();
}
setInterval('time()', 1000);
</script>

chart.jsの複合チャートで気温と雲の量を表示する

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
<b>札幌の天気</b>
<canvas id="graph-area" height="250px" width=""></canvas>
<script type="text/javascript">
    var ctx = document.getElementById('graph-area').getContext('2d');
    var complexChartOption = {
      responsive: true,
      scales: {
        yAxes: [{
          id: "y-axis-1",
          type: "linear", 
          position: "left",
          ticks: {
            max: 10.0,
            min: 1.0,
            stepSize: 2.0
          },
        }, {
          id: "y-axis-2",
          type: "linear", 
          position: "right",
          ticks: {
              max: 100,
              min: 0,
              stepSize: 20
          },
        }],
      }
    };
    var myChart = new Chart(ctx, {
      type: 'bar',
      options: complexChartOption,
      data: {
        labels: ['12:00 PM', '3:00 PM', '6:00 PM', '9:00 PM', '12:00 AM', '3:00 AM', '6:00 AM'],
        datasets: [{
          type: 'line',
          label: '気温',
          data: [5.3, 5, 3, 2.1, 1.8, 1.6, 1.6, 2.3],
          borderColor : "rgba(254,97,132,0.8)",
          yAxisID: "y-axis-1",
          fill: false
        }, {
          type: 'line',
          label: '雲の量',
          data: [20, 24, 92, 68, 80, 92, 92, 92],
          borderColor : "rgba(54,164,235,0.8)",
          yAxisID: "y-axis-2",
          fill: false
        }]
      }
    });
</script>

問題ありません。

後は配列からjsにデータを渡すところですね。
気温のtickは max(気温の配列)+0.5°Cにしてみます。

$forecast = array('12:00 PM', '3:00 PM', '6:00 PM', '9:00 PM', '12:00 AM', '3:00 AM', '6:00 AM');
$temp = array(5.3, 5, 3, 2.1, 1.8, 1.6, 1.6, 2.3);
$cloud = array(20, 24, 92, 68, 80, 92, 92, 92);

$temp_max = max($temp) + 0.5;
$forecast_list = json_encode($forecast); 
$cloud_list = json_encode($cloud); 
$temp_list = json_encode($temp);

cakeに入れます。

あれ、UIがGoogle Analyticsっぽくなってきた。

javascriptで配列に追加

配列に追加はpushを使います。

var icon = [];
var list = JSON.parse('');
for (var i = 0; i < list.length; i++){
	if(list[i] =='Clear'){
	 icon.push('/img/icon05.png');
	}else if(list[i] =='Clouds'){
	 icon.push('/img/icon06.png');
	} else{
	 icon.push('/img/icon07.png');
	}
}

下記のような書き方だと、配列iconの値は1つだけになります。

var icon = [];
var list = JSON.parse('');
for (var i = 0; i < list.length; i++){
	if(list[i] =='Clear'){
	 icon = '/img/icon05.png';
	}else if(list[i] =='Clouds'){
	 icon = '/img/icon06.png';
	} else{
	 icon = '/img/icon07.png';
	}
}

嵌ってしまった。。。

連続再生中の曲のタイトルを表示する

audioをplay, pauseするfunctionの中で、playしているli要素をboldにして、textContentで渡せばいいだけですね♪♪♪

<h2>Catcher In The Light<div style="display:inline;" id="title"></div></h2>
<p><audio src="/mp3/180307112410.mp3" preload="none" onclick="playthis(1);" controls="controls"></audio></p>

<ul>
<li id="list1"><a href="javascript:playthis(1)">Catcher In The Light</a></li>
<li id="list2"><a href="javascript:playthis(2)">About You</a></li>
<li id="list3"><a href="javascript:playthis(3)">GAME</a></li>
<li id="list4"><a href="javascript:playthis(4)">my name's WOMEN</a></li>
<li id="list5"><a href="javascript:playthis(5)">WONDERLAND</a></li>
</ul>

<script type="text/javascript">

var dir = "/foo/";
// var now = " ← now playing";

var media = document.getElementsByTagName("audio")[0];

var list = new Array(5);
list[1] = "hoge.mp3";
list[2] = "hogehoge.mp3";
list[3] = "hogehogehoge.mp3";
list[4] = "hogehogehogehoge.mp3";
list[5] = "hogehogehogehogehoge.mp3";

var length = list.length;

var COOKIE = new Array();
if (document.cookie) {
	var cookies = document.cookie.split("; ");
	for (var i = 0; i < cookies.length; i++) {
		var str = cookies&#91;i&#93;.split("=");
		COOKIE&#91;str&#91;0&#93;&#93; = unescape(str&#91;1&#93;);
	}
}

var volume = isNaN(COOKIE&#91;"volume"&#93;) ? 0.5 : COOKIE&#91;"volume"&#93;;
media.volume = volume;

media.onended = function(){ 
	playnext(this.src); 
};

window.onbeforeunload = function(){ setCookie("volume", media.volume); };
</script>

<script type="text/javascript">

function playthis(key){
	media.pause();
	media.src = dir + list[key];
	media.play();

	var hoge =list[key];

    
    var tag = document.getElementById("list"+key).innerHTML;
    var title  = tag.replace(/<("&#91;^"&#93;*"|'&#91;^'&#93;*'|&#91;^'">])*>/g,'');
	var song = document.getElementById("title");
	song.textContent = " : " + title;

	// for(var i=1;i<length;i++) document.getElementById("list"+i).innerHTML = document.getElementById("list"+i).innerHTML.replace(now,"");
    for(var i=1;i<length;i++) document.getElementById("list"+i).style.fontWeight = "normal";
    document.getElementById("list"+key).style.fontWeight = "bold";
	// document.getElementById("list"+key).innerHTML += now;

	
}


function playnext(objsrc) {
	var objsrc = decodeURI(objsrc);
	objsrc = objsrc.replace("http://"+location.host,"");
	for (var i=1;i<length;i++) {
		var listsrc = dir + list&#91;i&#93;;
		if(objsrc===listsrc){
			if(length==i+1){
				document.getElementById("list"+i).innerHTML = document.getElementById("list"+i).innerHTML.replace(now,"");
				// 先頭を再生
				// playthis(1);
			}else{
				playthis(i+1);
			}
			break;
		}
	}
}

function setCookie(name, value, domain, path, expires, secure) {
	if (!name) return;
	domain = location.hostname;
	path = "/";
	expires = 30;

	var str = name + "=" + escape(value);
	if (domain) {
		if (domain == 1) domain = location.host.replace(/^&#91;^\.&#93;*/, "");
		str += "; domain=" + domain;
	}
	if (path) {
		if (path == 1) path = location.pathname;
		str += "; path=" + path;
	}
	if (expires) {
		var nowtime = new Date().getTime();
		expires = new Date(nowtime + (60 * 60 * 24 * 1000 * expires));
		expires = expires.toGMTString();
		str += "; expires=" + expires;
	}
	if (secure && location.protocol == "https:") {
		str += "; secure";
	}

	document.cookie = str;
}
</script>

ボタンを押すごとに、boldが変わる

fontWeightを判定します。

<p id="list1">Catcher In The Light</p>
<p id="list2">About You</p>
<p id="list3">GAME</p>
<input type="button" value="ボタン" onclick="changeFontWeight();">

<script>
function changeFontWeight(){
	var obj1 = document.getElementById("list1");
	var obj2 = document.getElementById("list2");
	var obj3 = document.getElementById("list3");
	if(obj1.style.fontWeight == "bold"){
		obj1.style.fontWeight = "normal";
		obj2.style.fontWeight = "bold";
	} else if(obj2.style.fontWeight == "bold") {
		obj2.style.fontWeight = "normal";
		obj3.style.fontWeight = "bold";
	} else if(obj3.style.fontWeight == "bold"){
		obj3.style.fontWeight = "normal";
		obj1.style.fontWeight = "bold";
	} else {
		obj1.style.fontWeight = "bold";
	}
}
</script>

変数をHTMLに渡して表示する

<h1>MyStory <div style="display:inline;" id="title"></div></h1>

<p id="list1">Catcher In The Light</p>
<p id="list2">About You</p>
<p id="list3">GAME</p>
<input type="button" value="ボタン" onclick="changeFontWeight();">

<script>
function changeFontWeight(){
	var obj1 = document.getElementById("list1");
	var obj2 = document.getElementById("list2");
	var obj3 = document.getElementById("list3");
	if(obj1.style.fontWeight == "bold"){
		obj1.style.fontWeight = "normal";
		obj2.style.fontWeight = "bold";
		list = "list2";
		

	} else if(obj2.style.fontWeight == "bold") {
		obj2.style.fontWeight = "normal";
		obj3.style.fontWeight = "bold";
		list = "list3";
	} else if(obj3.style.fontWeight == "bold"){
		obj3.style.fontWeight = "normal";
		obj1.style.fontWeight = "bold";
		list = "list1";
	} else {
		obj1.style.fontWeight = "bold";
		list = "list1";
	}
	var obj4 = document.getElementById(list).innerHTML;
	var title = document.getElementById("title");
	title.textContent = obj4
}
</script>


ボタンを押す度に、タイトルとfontWeightがboldに切り替わる。

audio start, pause

<audio src="mp3/180307112410.mp3" controls></audio>

<input type="button" value="start" onClick="start()">
<input type="button" value="pause" onClick="pause()">
<script>
var v = document.getElementsByTagName("audio")[0];
 
function start(){
    v.play();
}
function pause(){
    v.pause();
}
</script>

toGMTString()
インターネットグリニッジ標準時 (GMT) 協定に基づき、与えられた日付を表す

<script>
var today = new Date();
var str = today.toGMTString();

document.write(str);
</script>

Wed, 07 Mar 2018 11:23:29 GMT

fontをboldにする

<p id="list1">Catcher In The Light</p>
<!-- <p id="list2">About You</p>
<p id="list3">GAME</p> -->
<input type="button" value="ボタン" onclick="changeFontWeight('list1');">

<script>
function changeFontWeight(idname){
	var obj = document.getElementById(idname);
	if(obj.style.fontWeight == "bold"){
		obj.style.fontWeight = "normal";
	} else {
		obj.style.fontWeight = "bold";
	}
}
</script>

javascript onbeforeunload

beforeunload が送られるときに、実行コードを含められる。このイベントが windowのリソースがunloadする時、実行。
次のページに移動する時など。

<p>黒田バズーカ</p>
<script>
window.onbeforeunload = function() {
console.log("Before Unload");
}

</script>

javascript volume

audioのvolumeの調整 0～1の間

<audio src="mp3/180307112410.mp3" controls></audio>
<input type="button" value="↑" onClick="upVolume()">
<input type="button" value="↓" onClick="downVolume()">
<script>
var v = document.getElementsByTagName("audio")[0];

function upVolume(){
	v.volume = v.volume + 0.25;
}
function downVolume(){
	v.volume = v.volume - 0.25;
}

</script>

javascript isNaN

isNaN() 関数は引数が NaN （非数）かどうかを判定

NaN はNot a Numberの略

<script>
	if(isNaN(155) === false){
		document.write("数字です");
	}
	if(isNaN("文字") !== false){
		document.write("文字です");
	}
</script>

数字です文字です

javascript split

文字列を分割

<script>
	str = "チャート,ニュース,優待";
	array = str.split(",");
	for(var i in array){
		document.write(i + ":"+ array[i] + " <br>");
	}
</script>