js筆記

常用軟體,程式語言的筆記和疑問
Forum rules
盡量做到:
每一個貼子都精心編輯;
每一個疑問都得到解答。
ejsoon
Site Admin
Posts: 3767
Joined: 2016 Jan 10, 22:15

增加監聽事件

Post by ejsoon » 2016 Jul 19, 14:24

Code: Select all

var x = document.getElementById("myForm");
x.addEventListener("focusin", myFocusFunction);
function myFocusFunction() {
    document.getElementById("myInput").style.backgroundColor = "yellow";
}

ejsoon
Site Admin
Posts: 3767
Joined: 2016 Jan 10, 22:15

檢測用戶屏寬和瀏覽器寬度

Post by ejsoon » 2016 Aug 08, 09:17

Code: Select all

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>天蒼人頡</title>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
		<!-- <link rel="stylesheet" type="text/css" href="./index.css"/> -->
		<!-- <script type="text/javascript" src="./index.js"></script> -->
	</head>
	<body>
		<div id="whole_div">
		</div><!--end whole_div--!>
	</body>
</html>
<style>
.clear_float{
	height: 1px;
	margin-top:-1px;
	clear:both;
	width: 100%;
}
.vertical_middle {
	width: 1px;
	height: 100%;
	display: inline-block;
	vertical-align: middle;
}
.nowrap {
	white-space: nowrap;
	text-overflow: ellipsis;
}
* {margin: 0;padding: 0;}
body {font-size: 16px;font-family: '';}
a {color: black;text-decoration: none;}
a:hover {text-decoration:underline;}
a img {border:none;}
li {list-style: none;}
</style>
<script>
	var whole_div = document.getElementById("whole_div");
	whole_div.innerHTML += "screen.width:" + screen.width;
	whole_div.innerHTML += "<br>screen.height:" + screen.height;
	whole_div.innerHTML += "<br>screen.availWidth:" + screen.availWidth;
	whole_div.innerHTML += "<br>screen.availHeight:" + screen.availHeight;
	whole_div.innerHTML += "<br>screen.colorDepth:" + screen.colorDepth;
	whole_div.innerHTML += "<br>screen.pixelDepth:" + screen.pixelDepth;
	whole_div.innerHTML += "<br>outerHeight:" + outerHeight;
	whole_div.innerHTML += "<br>outerWidth:" + outerWidth;
	whole_div.innerHTML += "<br>innerHeight:" + innerHeight;
	whole_div.innerHTML += "<br>innerWidth:" + innerWidth;
</script>

ejsoon
Site Admin
Posts: 3767
Joined: 2016 Jan 10, 22:15

新開窗口的位置

Post by ejsoon » 2016 Aug 08, 11:29

Code: Select all

// Open a new window with a specified left and top position
var myWindow = window.open("", "myWin", "left=700, top=350, width=200, height=100");

/*
If the browser does not support screenX and screen Y,
use screenLeft and screenTop instead (and vice versa)
*/
var winLeft = myWindow.screenLeft ? myWindow.screenLeft : myWindow.screenX;
var winTop = myWindow.screenTop ? myWindow.screenTop : myWindow.screenY;

// Write the new window's x and y coordinates relative to the screen
myWindow.document.write("<p>This is 'myWin'");
myWindow.document.write("<br>Horizontal: " + winLeft);
myWindow.document.write("<br>Vertical: " + winTop + "</p>");

ejsoon
Site Admin
Posts: 3767
Joined: 2016 Jan 10, 22:15

js筆記 string and int convert

Post by ejsoon » 2016 Sep 20, 10:14

parseInt();

var num = 15;
var n = num.toString();

ejsoon
Site Admin
Posts: 3767
Joined: 2016 Jan 10, 22:15

Re: js筆記 窗口和屏幕寬度

Post by ejsoon » 2016 Sep 20, 10:26

console.log(window.innerWidth); //瀏覽器顯示寬度
console.log(window.outerWidth); //除去任務欄
console.log(screen.width); //屏幕硬件寬度
console.log(screen.availWidth); //除去任務欄,和window.outerWidth一樣

ejsoon
Site Admin
Posts: 3767
Joined: 2016 Jan 10, 22:15

js 選框點亮

Post by ejsoon » 2016 Oct 28, 16:52

this傳入function這樣做:

Code: Select all

								<script>
								function ch_payment(that, pay_id) {
									var input_hp = document.getElementById('payment');
									input_hp.value = pay_id;

									var payment_li = document.getElementsByClassName('payment_li');
									var max_num = payment_li.length;
									for (var num = 0; num < max_num; num++) {
										payment_li[num].style.borderColor = "#999";
										payment_li[num].style.color = "#999";
									}
									console.log(that);
									console.log(that.id);
									that.style.borderColor = "red";
									that.style.color = "red";
								}
								var payment_li = document.getElementsByClassName('payment_li');
								if(payment_li.length) {
									payment_li[0].style.borderColor = "red";
									payment_li[0].style.color = "red";
								}
								</script>

ejsoon
Site Admin
Posts: 3767
Joined: 2016 Jan 10, 22:15

js筆記 for ... in

Post by ejsoon » 2017 Jan 17, 17:24

https://developer.mozilla.org/en-US/doc ... s/for...in

Code: Select all

var obj = {a:1, b:2, c:3};
    
for (var prop in obj) {
  console.log('obj.' + prop, '=', obj[prop]);
}

// Output:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

ejsoon
Site Admin
Posts: 3767
Joined: 2016 Jan 10, 22:15

js alert之外的兩個彈窗

Post by ejsoon » 2017 Jan 22, 14:20

傳文本:
prompt(text, defaultText);

確認:
confirm("Press a button!")

ejsoon
Site Admin
Posts: 3767
Joined: 2016 Jan 10, 22:15

count_date.js

Post by ejsoon » 2017 Apr 13, 16:22

Code: Select all

function count_date_i(the_id, the_date) {
	var count_date = document.getElementById(the_id);
	count_date_go(count_date, the_date);
}
function count_date_c(the_class, the_date) {
	var count_date_class = document.getElementsByClassName(the_class);
	var max_num = count_date_class.length;
	for (var num = 0; num < max_num; num++) {
		count_date_go(count_date_class[num], the_date);
	}
}

function count_date_go(count_date, the_date) {
	var num = "〇一二三四五六七八九";
	var unit = "十百千萬";

	if (the_date == null) {
		the_date = "2015-11-02";
	}
	var msec = Date.parse(the_date);
	var today = new Date().getTime();
	var sum = Math.floor((today - msec) / 1000 / 60 / 60 / 24);

	var result = "";
	var point = 0;

	for (var ten = 5; ten > 0; ten--) {
		point = Math.floor(sum  % (Math.pow(10, ten)) / (Math.pow(10, ten - 1)));
		if (point >= 1) {
			if (result.length && Math.floor(sum  % (Math.pow(10, ten + 1)) / (Math.pow(10, ten))) < 1) {
				result += num.substr(0, 1);
			}
			result += num.substr(point, 1);
			if (ten > 1) {
				result += unit.substr(ten - 2, 1);
			}
		}
	}
	count_date.innerHTML = result;
}

ejsoon
Site Admin
Posts: 3767
Joined: 2016 Jan 10, 22:15

js String轉object,object轉String(用json)

Post by ejsoon » 2017 May 18, 14:41

String轉object
JSON.parse(data),

object轉String
str = JSON.stringify(obj);
str = JSON.stringify(obj, null, 4); // (Optional) beautiful indented output.
來自這裡

Post Reply