Heim > Web-Frontend > js-Tutorial > Hauptteil

Teil 1 Schnellstart – Datum, Mathematik und globale Objekte in der grundlegenden JS-Praxis

php是最好的语言
Freigeben: 2018-07-28 10:41:46
Original
1609 Leute haben es durchsucht

tool.js

function print(str){
	document.write(str);
}

function println(str){
	document.write(str+"<br/>");
}

///////通过prototype属性扩展js API的对象的功能/////////

//※把trim方法融入到String对象中: str.trim()
String.prototype.trim = function(){
	 var start=0;//第一个非空格字符的位置
	 var end=this.length-1;//最后一个非空格字符的位置
	 while(start<=end && this.charAt(start)==&#39; &#39;){
		 start++;
	 }
	 while(start<=end && this.charAt(end)==&#39; &#39;){
		 end--;
	 }
	 return this.substring(start,end+1);
};

//给String对象添加一个toCharArray()方法
String.prototype.toCharArray = function(){
	var chs=[];
	for(var x=0;x<this.length;x++){
		chs[x]=this.charAt(x);
	}
	return chs;
};

//给String对象添加一个reverse()方法
String.prototype.reverse = function(){
	//函数内部可以再定义函数----Java做不到
	function swap(arr,start,end){
		var temp=arr[start];
		arr[start]= arr[end];
		arr[end] = temp;
	}
	
	var arr = this.toCharArray();
	for(var start=0,end=arr.length-1; start<end; start++,end--){
		swap(arr,start,end);
	}
	return arr.join("");
};
String.prototype.compareTo=function(str){
	if(typeof(str)!="string"){
		return 1;
	}
	
	var len1=this.length;
	var len2=str.length;
	var shortLen=len1>len2?len2:len1;
	var longLen=len1>len2?len1:len2;
	for(var i=0; i<shortLen; i++){
		if(this.charAt(i)!=str.charAt(i)){
			return this.charAt(i)-str.charAt(i);
		}
	}
	if(len1>len2){
		return 1;
	}else if(len1<len2){
		return -1;
	}else{
		return 0;
	}
	
};


//为数组对象的shift()和unshift()函数取两个我们习惯的别名
Array.prototype.removeFirst=function(){
	return this.shift();
};

Array.prototype.addFirst=function(e){
	return this.unshift(e);
};

Array.prototype.addLast=function(e){
	return this.push(e);
};
Nach dem Login kopieren

Objekte in der JS-Sprache – Datumsobjekt

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JS语言中的对象--Date对象</title>
<script type="text/javascript" src="tools.js"></script>
</head>
<body>
	<script type="text/javascript">
		var date = new Date();
		println(date);//date.toString()
		println(date.toDateString());//只显示日期
		println(date.toLocaleString());//本地格式
		println(date.toLocaleDateString());//本地格式:只显示日期

		var year = date.getYear(); //建议使用getFullYear()代替
		println(year); //118 = 2018-1900
		year = date.getFullYear();//※
		println(year);

		var month = date.getMonth();//※ 0~11  我们用时要 +1
		println(month);

		var day1 = date.getDay(); //※星期几, 其中星期日是0
		var day2 = date.getDate(); //※月份中的第几天,就是我们平时用的“日期”

		println(year + "." + (month + 1) + "." + day2);
	</script>

	<hr/>

	<script type="text/javascript">
		//格式转换

		//日期对象 和 毫秒值之间的转换
		var date2 = new Date();
		var time = date2.getTime(); //日期对象     毫秒值
		println("毫秒值:" + time);

		time = time + 2 * 24 * 60 * 60 * 1000;//2天后
		var date3 = new Date(time); //也可以用setTime() // 毫秒值     日期对象
		println("后天:" + date3.toLocaleString());

		//日期对象 和  字符串之间的转换
		var str = date3.toLocaleString();//日期对象      字符串

		//字符串     日期对象
		//var str = "6/27/2018"; //格式 OK
		//var str = "July 23, 2018"; //格式 OK
		//var str = "2010/08/08"; //格式 OK
		var str = "2010-08-08"; //格式 OK
		var time = Date.parse(str);
		var d = new Date(time);
		println(d.toLocaleString());
	</script>

    <hr/>
    
	<script type="text/javascript">
		/*一个小语法:
		   with(对象){
		 	 //在该区域内可以直接使用"对象"的内容(属性和方法),不需要“对象.”
		  }
		 	 
		 */
        var date=new Date();
		with (date) {
			var year = getFullYear();
			var month = getMonth() + 1;
			var day = getDate();
			println(">>> " + year + "年" + month + "月" + day + "日");
		}
	</script>
</body>
</html>
Nach dem Login kopieren

Objekte in der JS-Sprache – -Math Objekt

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JS语言中的对象--Math对象</title>
<script type="text/javascript" src="tools.js"></script>
</head>
<body>
	<script type="text/javascript">
		var x = -323.78;
		x = Math.abs(x);
		println("x=" + x);

		x = 7.89;
		x = Math.floor(x);
		println(x);//8
		x = Math.ceil(x);
		println(x);//7
		x = Math.exp(x);
		println(x);//e^2

		y = 5;
		println(Math.pow(x, y)); //x 的 y 次幂

		//round(x) 四舍五入
		println(Math.round(4.56));

		//random() 返回 0 ~ 1 之间的随机小数。
		//生成10个[1,10]范围内的随机整数
		for(var i=1;i<=10;i++){
		  	//int n = (int)(Math.random()*10) +1; //Java写法
		  	//var n = Math.floor( Math.random()*10 ) +1; //JS写法1---用Math.floor()实现取整
		  	var n=parseInt(Math.random()*10)+1;//JS写法2---用parseInt()实现取整
		  	print(n+" ");
		}
		 println("");
	</script>
</body>
</html>
Nach dem Login kopieren

Objekt in JS-Sprache – Globales Objekt, Funktion der obersten Ebene (globale Funktion)

js kombiniert einige häufig verwendete Funktionen definiert in einem Objekt namens Global, und „Global“ kann beim Aufruf nicht geschrieben werden.

eval(str): Wertet den String aus und führt ihn als js-Anweisung aus.

Number(s): Konvertiert den Parameter s in „Value“. (Zahlentypwert)“, wenn der Parameter ein Datum ist, wird der Millisekundenwert zurückgegeben. Wenn der Parameter nicht in einen Wert konvertiert werden kann, wird er zurückgegeben: NaN

parseFloat() : Analysiert eine Zeichenfolge und gibt eine Gleitkommazahl zurück.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JS语言中的对象--Global对象, 顶层函数(全局函数)</title>
<script type="text/javascript" src="tools.js"></script>
</head>
<body>
	<script type="text/javascript">
		//js把一些通用的函数定义在一个叫Global的对象中,调用时不能写"Global."
		//eval(str): 把字符串当成js语句来进行评估且执行
		eval("x=10;y=20;document.write(x*y);");

		document.write("<br/>" + eval("2+2") + "<br/>");
		var x = 10;
		document.write(eval(x + 17) + "<br/>");

		//isNaN(s): 判断s是否是一个"非Number类型"的值
		var str = "123";
		println(isNaN(str)); //false ---不是"非Number类型"
		str = "abc123";
		println(isNaN(str)); //true ---是"非Number类型"
	</script>

	<hr />

	<script type="text/javascript">
		//Number(s): 把参数s转换成"数值(Number类型的值)",如果参数是Date则返回毫秒值,如果参数不能转换成数值则返回: NaN
		var test1 = new Boolean(true);
		var test2 = new Boolean(false);
		var test3 = new Date();
		var test4 = new String("999");
		var test5 = new String("999 888");

		document.write(Number(test1) + "<br />");
		document.write(Number(test2) + "<br />");
		document.write(Number(test3) + "<br />");
		document.write(Number(test4) + "<br />");
		document.write(Number(test5) + "<br />");

		document.write(Number.MAX_VALUE + "<br />");
		document.write(Number.MIN_VALUE + "<br />");
		document.write(Number.NEGATIVE_INFINITY + "<br />");
	</script>

	<hr />

	<script type="text/javascript">
		//parseFloat(): 解析一个字符串并返回一个浮点数。 
		var str = "3.14159";
		var val = parseFloat(str);
		val *= 2;
		println(val);

		//parseInt(): 解析一个字符串,并返回一个整数。
		//parseInt(str, radix) : 没有参数radix时为十进制

		//将字符串     十进制数
		var num = parseInt("110", 10); //10进制的字符串"110"     110
		println(num);//110
		var num = parseInt("110", 2); //2进制的字符串"110" --> 6
		println(num);//6
		var num = parseInt("110", 16); //16进制的字符串"110" --> 272
		println(num);//272

		//将十进制数 --> 其它进制格式的字符串
		var num = 100; //js自动会把一个数值包装成一个Number对象
		//NumberObject.toString(radix)
		println(num.toString(2)); //把num转换成2进制的字符串
		println(num.toString(16)); //把num转换成16进制的字符串
	
	</script>
</body>
</html>
Nach dem Login kopieren

Verwandte Artikel:

Teil 2 Schnellstart – JS-Grundlagen Praktisches BOM – Browser-Objektmodell, DOM

Teil 3 Schnellstart – JS Basic Practical Application Code Sharing

Verwandte Videos:

27 klassische praktische Video-Tutorials für die Front-End-JS-Entwicklung, kostenlose Online-Video-Tutorials

Das obige ist der detaillierte Inhalt vonTeil 1 Schnellstart – Datum, Mathematik und globale Objekte in der grundlegenden JS-Praxis. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage