静态网页笔记03

最新推荐文章于 2024-02-02 17:21:06 发布

原创最新推荐文章于 2024-02-02 17:21:06 发布 · 129 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html第三天

本文深入讲解JavaScript中的String、Array、Date、Math等核心对象的使用方法，包括对象创建、属性和方法的应用，如字符串操作、数组处理、日期时间获取及数学运算等关键功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

day03

1.js的String对象

	**创建一个String对象
		***var str="abc";
	**方法和属性(文档)
		***属性：length:字符串长度
		***方法：
		（1）与html相关的方法
			-bold()：使用粗体显示字符串
				var str1="asd";
   				document.write(str1.bold());
			-fontcolor():字体颜色
				var str2="qwe";
    			document.write(str2.fontcolor("red"));
			-fontsize():字体大小
				 var str3="zxc";
   				 document.write(str3.fontsize("7"));
			-link():将字符串显示为超链接
				  var str4="ert";
    			  document.write(str4.link("hello.html"));
			-sub()和sup():
					var s1="100";
			        var s2="200";
			        var s3="300";
			        document.write(s1.sub());
			        document.write(s3);
			        document.write(s2.sup());
				
		（2）与java相似的方法
			-concat():连接字符串
				var str1="abc";
		        var str2="def";
		        document.write(str1.concat(str2));
			-charAt():返回指定位置的字符串
				var str3="abcdefg";
    			document.write(str3.charAt(0));
			-indexOf():返回字符串位置	
				var str4="qwertyuiop";
    			document.write(str4.indexOf("p"));
			-spit():切分字符串，成数组
				var str5="a-b-c-d-e-f";
		        var arr1=str5.split("-");
		        document.write(arr1.length);
			-replace():替换
				var s1="qwertyu";
   				document.write(s1.replace("q","p"));
			-substr()和substring()
				 document.write(s2.substr(5,3));//从第五位开始截取3位
		         document.write("<hr>");
		         document.write(s2.substring(3,5));//从第3位 开始到第5位结束不包含最后一位

2.js的Array对象

**创建数组(三种)
	（1）var arr=[1,2,3];
	 (2) var arr2=new Array(3);
	 (3) var arr3=new Array(1,2,3);
**属性：length:查看数组长度
**方法：
	-concat():连接数组
		var arr11=[1,2,3];
        var arr12=[4,5,6];
        document.write(arr11.concat(arr12));
	-join():根据指定字符串分割数组
		var arr13=new Array(3);
        arr13[0]="a";
        arr13[1]="b";
        arr13[2]="c";
        document.write(arr13);
        document.write("<br>");
        document.write(arr13.join(("-")));
	-push():向数组末尾添加一个或更多元素
		var arr14=new Array(3);
        arr14[0]="asd";
        arr14[1]="bce";
        arr14[2]="cfr";
        document.write(arr14);
        document.write("<br>");
        document.write("old length:"+arr14.length);
        document.write("<br>");
        document.write("new array:"+arr14.push("lisi"));
		**数组与数组连接时数组会按一个元素添加进去
			var arr15=["aaa","bbb","ccc"];
	        var arr16=["www","qqq","ttt"];
	        document.write("old array:"+arr15);
	        document.write("<br>");
	        document.write("old length:"+arr15.length);
	        document.write("<br>");
	        document.write("new length:"+arr15.push(arr16));
	        document.write("<br>");
	        document.write("new array:"+arr15);
	        for(var i=0;i<arr15.length;i++)
	        {
	            alert(arr15[i]);
	        }
	-pop():删除并且返回最后一个元素
		var arr17=["zhangsan","lisi","wangwu","zhaoliu"];
        document.write("old:"+arr17);
        document.write("<br>");
        document.write("return:"+arr17.pop());
	-reverse():数组元素倒置
		var arr18=["zhangsan","lisi","wangwu","zhaoliu"];
    	document.write(arr18.reverse());

3.ja的Date对象

	**在java里面获取时间
		Date date=new Date();
		//toLocaletring();
	**js里面获取当前时间
	   //获取当前时间
        var date=new Date();
        document.write(date);//Mon Oct 08 2018 09:31:25 GMT+0800 (中国标准时间)
        document.write("<hr>");
        //转换格式
        document.write(date.toLocaleString());
	**获取当前年的方法
		-getFullYear();得到当前年
		document.write("year:"+date.getFullYear());
	**获取当前月的方法
		-getMonth();返回的是0-11月；
		var date1=date.getMonth()+1;
    	document.write("month:"+date1);
	**获取当前星期
		-getDay();返回值0-6 星期日是0
		 document.write("week:"+date.getDay());
	**获取当前天的方法
		-getDate();1-31;
		 document.write("day:"+date.getDate());
	**获取当前小时
		-getHours();
		document.write("hour:"+date.getHours());
	**当前分钟和秒
		-getMinutes()和getSeconds();
		document.write("minutes:"+date.getMinutes());
		document.write("minutes:"+date.getSeconds());
	**获取毫秒数
		-getTime();返回1970.1.1至今的毫秒数
		document.write("times:"+date.getTime());
		**应用场景：
			*使用毫秒数处理缓存的效果
				http://www.baidu.com?毫秒数

4.js的Math对象

*数学的运算
**里面都是静态方法，使用可以直接使用Math.方法();
**ceil(x);向上舍入
	var mm=10.4;
	document.write(Math.ceil(mm));
**floor(x);向下舍入
	document.write(Math.floor(mm));
**round(x);四舍五入
	document.write(Math.round(mm));
**random();伪随机数0-1；
	 document.write(Math.random());
	-实现0-9的随机数
	 document.write(Math.floor(Math.random()*10));
**pow(x,y);
	document.write(Math.pow(2,5));

5.js的全局函数

*由于不属于任何一个对象，直接写名称使用
-eval()：执行js代码(如果字符串是一个js代码，使用方法直接执行)
	var str="alert('123');";
    eval(str);
-encodeURI():对字符进行编码
	//encodeURI()编码
    document.write("<hr>");
    var str1="测试中文aa1234";
    var encode1=encodeURI(str1);
    document.write(encode1);
-decodeURI()：对字符进行解码
	//decodeURI()解码
    document.write("<hr>");
    var decode1=decodeURI(encode1);
    document.write(decode1);
-encodeURIComponent()和decodeURIComponent()：
-isNaN():判断当前的字符串是否为数字，是数字返回false
-parseInt():类型转换为int
	var str3="123";
    document.write(parseInt(str3)+1);

6.js函数的重载

**什么是重载？方法名相同，参数不同
**js的重载是否存在？不存在 
	--调用最后一个方法
	--把传递的参数保存到arguments数组里面
	（1）js里面不存在重载
	（2）js里面可以通过其他方式来模拟重载
	 function add1() {
            //比如传递的是俩个参数
            if(arguments.length==2)
            {
                return arguments[0]+arguments[1];
            }else if(arguments.length==3)
            {
                return arguments[0]+arguments[1]+arguments[2];
            }else if(arguments.length==4)
            {
                return arguments[0]+arguments[1]+arguments[2]+arguments[3];
            }else
            {
                return 0;
            }
        }

7.js的BOM对象

**有哪些对象？
***navigator:获取浏览器的信息
	-navigator.appName
		 document.write( navigator.appName);
***screen:屏幕信息
	-screen.width
		 	document.write(screen.width);
	        document.write("<br>");
	        document.write(screen.height);
***location:url地址
	-href属性
		***获取到请求的url地址
			document.write(location.href);
		***设置url地址
			location.href="http://www.baidu.com"
***history：请求的url的历史记录
		-到访问的上一个页面
			history。back();
			history.go(-1);
		-到访问的下一个页面
			history。forward();
			history.go(-1);
****window(重点)
	*窗口对象
	*顶层对象
	**方法
		-window.alert()简写alert();
		-window.confirm():确认提示框
			 var flag=window.confirm("买了风冷");
    		 alert(flag);
		-prompt():输入的对话框
			 window.prompt("赶紧输入","cb");
		-open():打开一个新窗口
			**open("打开的新窗口的地址","","窗口的特征，例如宽高")
		function open1() {
            window.open("http://www.baidu.com","","width=200,height=100");
        }
		-close():关闭窗口
			  window.close();兼容性差某些浏览器不显示
		-做定时器
		**setInterval("js代码",毫秒数):指定周期内调用函数
			window.setInterval("alert('123');",3000);
		**setTimeout()：在指定毫秒数后调用，只会执行一次
			 window.setTimeout("alert('abc')",4000);
		**clearInterval():清除掉setInterval的定时器
		**clearTimeout():清除掉setTimeout的定时器
	   代码：var id1=window.setInterval("alert('123');",3000);
	        var id2=window.setTimeout("alert('abc')",4000);
	        function clear1() {
	            window.clearInterval(id1);
	        }
	        function clear2() {
	            window.clearTimeout(id2);
	        }

8.js的dom对象

	*dom:文档对像模型
	**文档：
		超文本文档（超文本标记文档）html,xml
	**对象:
		属性和方法
	**模型：使用属性和方法来操作超文本标记文档
	***可以使用js的dom的对象，使用对象的属性和方法，对标记型文档进行操作
	***想要对标记性文档进行操作，首先需要对我的标记性文档里面的所有内容封装为对象
		--需要把html里面的标签属性和文本内容都封装成为对象
	***要想对标记型文档进行操作，解析标记型文档
		![](https://i.imgur.com/0IxH7mx.png)
	***解析过程
		根据html的层级结构，在内存中分配一个树形结构，需要把html中的每部分封装成对象
		-document对象：整个文档
		-element对象：标签对象
		-属性对象
		-文本对象
		---node节点对象：这个对象是这些对象的父对象
			***如果在对象里面找不到想要的方法，就到node对象里面去找
	***Dom模型有三种：
		Dom level 1:将html文档封装成对象
		Dom level 2:在level 1的基础上添加新的功能，例如：对于事件和css样式的支持。
		Dom level 3:支持xml1.0的一些新特性
	*DHTML 很多技术的简称
		**html:封装数据
		**css：使用属性和属性值设置样式
		**dom：操作html文档
		**javascript：专门指的是js的语法语句（ecmaScript）

9.document对象

	*表示整个文档
	**常用方法
		****write（）方法：
			(1)向页面输出变量（值）
		   （2）向页面输出html代码
		****getElementById();
				-通过id得到元素（标签）
			var input1=document.getElementById("nameid");
	        alert(input1.value);
	        alert(input1.name);
	        input1.value="bbb";
		****getElementsByName();
			-通过标签的name的属性值得到标签
			-返回一个数组
				 //使用getElementsByName得到input标签
			        var inputs=document.getElementsByName("name1");
			        //alert(inputs.length);
			        //遍历数组
			        for(var i=0;i<inputs.length;i++)
			        {
			            var input1=inputs[i];
			            alert(input1.value);
			        }
		****getElementsByTagName("标签名称");
			-通过标签名称得到元素
					<script type="text/javascript">
			        //演示
			        var inputs1=document.getElementsByTagName("input");
			        alert(inputs1.length);
			        //遍历数组得到每个input标签
			        for(var m=0;m<inputs1.length;m++)
			        {
			            //得到每个input标签
			            var input1=inputs[m];
			            alert(input1.value);
			        }
			    </script>
		****注意地方
			！！！只有一个标签，这个标签只能使用name获取到，这个使用，使用getElementsByTagName返回的是一个数组，但是现在只有一个元素，这个时候不需要遍历，而是可以通过数组下标获取到值
			<input type="text" name="name11" value="wwww">
		    <script type="text/javascript">
		        //通过name得到input标签
		        var input2=document.getElementsByName("name11")[0];
		        alert(input2.value);
		    </script>
		***
			  //通过input名称获取
		        var inputss=document.getElementsByTagName("input")[0];
		        alert(inputss.value);

10.window弹窗案例

-实现过程
	1.创建一个页面
		**俩个输入项，一个按钮
		**按钮上面有一个事件；弹出一个新窗口 open（）；
	2.创建弹出页面
		**表格
		**每一个有一个按钮和编号和姓名
		**按钮上有一个事件，把当前编号和姓名复制到第一个页面相应的位置
		****实现s1方法
			 <script type="text/javascript">
		        function s1(num1,name1) {
		            //需要把我的num1和name1复制到window页面
		            var pwin=window.opener;//得到创建这个窗口的窗口
		            pwin.document.getElementById("numid").value=num1;
		            pwin.document.getElementById("nameid").value=name1;
		            //关闭窗口
		            window.close();
		        }
		    </script>
		-opener属性：获取创建当前窗口的窗口