JAVA WEB开发技术随堂笔记 常用对象-String Math Date Window

张时贰
142 阅读8分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

🌴 2022.3.22 早八

前言

🎬本文章是 【JAVA WEB开发技术】 专栏的文章，主要是上课的随堂笔记与练习 🔗JAVA WEB开发技术专栏 传送门 💻提示：目录顺序以当堂内容(教材)为准，所以并非“1、2、3” 📽本节主要内容：学习Javascript的常用对象，String对象，Math对象，Date对象，Window对象

3.6 常用对象

3.6.1 String对象

🚀 属性

🚁 length

返回字符串的长度(字符数)

<script type="text/javascript">
    var txt = "Hello World!";
    document.write(txt.length); 
</script>

🚀 方法

🚁 indexOf()

作用：可返回某个指定的字符串值在字符串中首次出现的位置。如果没有找到匹配的字符串则返回 -1

语法：string.substr(start,length)

参数描述
start可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 string Object.length - 1。如省略该参数，则将从字符串的首字符开始检索
🚁 substr()

作用： 在字符串中抽取从开始下标开始的指定数目的字符 语法：string.substr(start,length)

参数描述
start必需。要抽取的子串的起始下标。必须是数值。如果是负数，那么该参数声明从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推
length可选。子串中的字符数。必须是数值。如果省略了该参数，那么返回从 stringObject 的开始位置到结尾的字串
🚁 substring()

作用： 用于提取字符串中介于两个指定下标之间的字符。返回的子串包括 开始处的字符，但不包括 结束 处的字符 语法： string.substring(from, to)

参数描述
from起始下标是1
to一个非负的整数，如果大于字符串长度或省略该参数，那么返回的子串会一直到字符串的结尾
🚁 replace()

作用： 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串 语法： string.replace(searchvalue,newvalue)。默认区分大小写

参数描述
searchvalue规定子字符串或要替换的对象。如果该值是一个字符串，则将它作为要检索的直接量文本模式，而不是首先被转换为 RegExp 对象
newvalue必需。一个字符串值。规定了替换文本或生成替换文本的函数
var s = "Mr Blue has a blue house and a blue car";
var a = s.replace("blue","red"); //Mr Blue has a red house and a blue car
var b = s.replace(/blue/g,"red");//Mr Blue has a red house and a red car
var c = s.replace(/blue/gi,"red");//Mr red has a red house and a red car
🚁 split()

作用： 用于把一个字符串分割成字符串数组。如果把空字符串 ("") 用作 separator，那么 stringObject 中的每个字符之间都会被分割 语法： string.split(separator,limit)

参数描述
separator字符串或正则表达式，从该参数指定的地方分割 string Object。
limit该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。
var str="How are you doing today?";
var n=str.split(" ",3); //['How', 'are', 'you']

3.6.2 Math对象

🚀 属性

属性描述
E返回算术常量 e，即自然对数的底数（约等于2.718）
LN2返回 2 的自然对数（约等于0.693）
LN10返回 10 的自然对数（约等于2.302）
LOG2Ee 的对数（约等于 1.414）
LOG10Ee 的对数（约等于0.434）
PI返回圆周率（约等于3.14159）
SQRT1_2返回返回 2 的平方根的倒数（约等于 0.707）
SQRT2返回 2 的平方根（约等于 1.414）

🚀 方法

方法描述
abs(x)返回 x 的绝对值
acos(x)返回 x 的反余弦值
asin(x)返回 x 的反正弦值
atan(x)以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值
atan2(y,x)返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）
ceil(x)对数进行上舍入
cos(x)返回数的余弦
exp(x)返回 Ex 的指数
floor(x)对 x 进行下舍入
log(x)返回数的自然对数
max(x,y,z,...,n)返回 x,y,z,...,n 中的最高值
min(x,y,z,...,n)返回 x,y,z,...,n中的最低值
pow(x,y)返回 x 的 y 次幂
random()返回 0 ~ 1 之间的随机数
sin(x)返回数的正弦
sqrt(x)返回数的平方根
tan(x)返回角的正切

3.6.3 Date对象

🚀 创建Date对象

格式

var d = new Date(); 
var d = new Date(milliseconds); 
var d = new Date(dateString); 
var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);

注意月份、日期是从0开始

var today = new Date();
var d1 = new Date("September 24, 2017 11:13:00");
var d2 = new Date(2017,8,24);
var d3 = new Date(2017,8,24,11,33,0);
方法描述方法描述
getDate()从 Date 对象返回一个月中的某一天 (1 ~ 31)setDate()设置 Date 对象中月的某一天 (1 ~ 31)。
getDay()从 Date 对象返回一周中的某一天 (0 ~ 6)setFullYear()设置 Date 对象中的年份（四位数字）。
getFullYear()从 Date 对象以四位数字返回年份setHours()设置 Date 对象中的小时 (0 ~ 23)。
getHours()返回 Date 对象的小时 (0 ~ 23)setMilliseconds()设置 Date 对象中的毫秒 (0 ~ 999)。
getMilliseconds()返回 Date 对象的毫秒(0 ~ 999)setMinutes()设置 Date 对象中的分钟 (0 ~ 59)。
getMinutes()返回 Date 对象的分钟 (0 ~ 59)setMonth()设置 Date 对象中月份 (0 ~ 11)。
getMonth()从 Date 对象返回月份 (0 ~ 11)setSeconds()设置 Date 对象中的秒钟 (0 ~ 59)。
getSeconds()返回 Date 对象的秒数 (0 ~ 59)setTime()setTime() 方法以毫秒设置 Date 对象。
getTime()返回 1970 年 1 月 1 日至今的毫秒数setUTCDate()根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。
getTimezoneOffset()返回本地时间与格林威治标准时间 (GMT) 的分钟差setUTCFullYear()根据世界时设置 Date 对象中的年份（四位数字）。
getUTCDate()根据世界时从 Date 对象返回月中的一天 (1 ~ 31)setUTCHours()根据世界时设置 Date 对象中的小时 (0 ~ 23)。
getUTCDay()根据世界时从 Date 对象返回周中的一天 (0 ~ 6)setUTCMilliseconds()根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
getUTCFullYear()根据世界时从 Date 对象返回四位数的年份setUTCMinutes()根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
getUTCHours()根据世界时返回 Date 对象的小时 (0 ~ 23)setUTCMonth()根据世界时设置 Date 对象中的月份 (0 ~ 11)。
getUTCMilliseconds()根据世界时返回 Date 对象的毫秒(0 ~ 999)setUTCSeconds()setUTCSeconds() 方法用于根据世界时 (UTC) 设置指定时间的秒字段。
getUTCMinutes()根据世界时返回 Date 对象的分钟 (0 ~ 59)parse()返回1970年1月1日午夜到指定日期（字符串）的毫秒数
getUTCMonth()根据世界时从 Date 对象返回月份 (0 ~ 11)getUTCSeconds()根据世界时返回 Date 对象的秒钟 (0 ~ 59)
方法描述
toDateString()把 Date 对象的日期部分转换为字符串。
toISOString()使用 ISO 标准返回字符串的日期格式。
toJSON()以 JSON 数据格式返回日期字符串。
toLocaleDateString()根据本地时间格式，把 Date 对象的日期部分转换为字符串。
toLocaleTimeString()根据本地时间格式，把 Date 对象的时间部分转换为字符串。
toLocaleString()据本地时间格式，把 Date 对象转换为字符串。
toString()把 Date 对象转换为字符串。
toTimeString()把 Date 对象的时间部分转换为字符串。
toUTCString()根据世界时，把 Date 对象转换为字符串。
UTC()根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。
valueOf()返回 Date 对象的原始值。

世界时间即东八区，咱们的时间减八个小时就是UTC时间

示例，在页面动态显示时间

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p id="my-p">asd</p>
	</body>
	<script>
		var p=document.getElementById('my-p')
		
		setInterval(function(){
			p.innerHTML=getDateStr()
		},100)
		function getDateStr(){
			var date=new Date()
			//toLocaleDateString()将日期转换为字符串。并替换掉'/'
			var s=date.toLocaleDateString().replace('/','年').replace('/','月')+'日'
			var arr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
			s=s+arr[date.getDay()]//星期
			s=s+'    '+date.toLocaleTimeString()//时间
			return s
		}
	</script>
</html>

3.6.4 Window对象

🚀 Window对象的属性

所有浏览器都支持 window 对象。它表示浏览器窗口。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。全局变量是 window 对象的属性。全局函数是 window 对象的方法。甚至 HTML DOM 的 document 也是 window 对象的属性之一

Window 对象属性、方法

🚁 open()方法

作用： 用于打开一个新的浏览器窗口或查找一个已命名的窗口

语法： window.open(URL,name,specs,replace)

  • URL
    • 可选。打开指定的页面的URL。如果没有指定URL，打开一个新的空白窗口
  • name:可选。指定target属性或窗口的名称。支持以下值
    • 默认_blank - URL加载到一个新的窗口
    • _parent - URL加载到父框架
    • _self - URL替换当前页面
    • _top - URL替换任何可加载的框架集
    • name - 窗口名称
  • specs:可选。一个逗号分隔的项目列表。修改窗口属性，长宽高，是否可以滚动、缩放...
  • replace:在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目
    • true - URL 替换浏览历史中的当前条目
    • false - URL 在浏览历史中创建新的条目

示例：打开一个新窗口，并控制其外观

JAVA WEB开发技术17

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function open_win() {
			//只用了URL和specs，name和replace默认
				window.open("https://blog.csdn.net/qq_49488584?spm=1011.2124.3001.5343", "_blank",
					"toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400"
				);
			}
		</script>
	</head>
	<body>
		<form>
			<input type="button" value="打开窗口" onclick="open_win()">
		</form>
	</body>
</html>
🚁 close()方法

作用： 用于关闭浏览器窗口 语法： window.close()

示例：在上一个示例的基础上加上关闭功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function open_win() {
				myWindow=window.open("https://blog.csdn.net/qq_49488584?spm=1011.2124.3001.5343", "_blank",
					"toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400"
				);
			}
            function close_win(){
               myWindow.close();
            }
		</script>
	</head>
	<body>
		<form>
			<input type="button" value="打开窗口" onclick="open_win()">
            <input type="button" value="关闭窗口" onclick="close_win()">
		</form>
	</body>
</html>
avatar
文章
阅读
粉丝