java基础63 JavaScript中的Number、Math、String、Date对象（网页知识）
2018-08-10 09:51
1046 查看
本文知识点（目录）：
1、Number对象
2、Math对象
3、String对象
4、Date对象 (日历例子)
1、Number对象
1.1、Number对象的创建方式
方式1： var 变量 = new Number(数字); 方式2： var 变量 = 数字;
1.2、Number对象的常用方法
1.toString()：把数组转换成指定进制形式的字符串
2.toFixed()：指定保留小数位,而且还带四舍五入的功能
1.3、实例
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd">
3 <html>
4 <head>
5 <script type="text/javascript">
6 var num=10;//十进制
7 document.write("十进制:"+num.toString()+"<br/>");
8 document.write("二进制:"+num.toString(2)+"<br/>");//十进制转换成2进制
9 document.write("八进制:"+num.toString(8)+"<br/>");//十进制转换成8进制
10 document.write("十六进制:"+num.toString(16)+"<br/>");//十进制转换成16进制
11 document.write("三进制:"+num.toString(3)+"<br/>");//十进制转换成3进制
12 var num1=3.1415926;
13 document.write("保留两位小数"+num1.toFixed(2)+"<br/>");
14 document.write("保留两位小数"+num1.toFixed(3)+"<br/>");
15 </script>
16 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
17 <title>无标题文档</title>
18 </head>
19 <body>
20
21 </body>
22 </html>
实例结果图
2、Math对象
2.1、Math对象的常用方法
1.ceil()：向上取整
2.floor()：向下取整
3.random()：随机数
4.round()：四舍五入
2.2、实例
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd">
3 <html>
4 <head>
5 <script type="text/javascript">
6 document.write("向上取整："+Math.ceil(3.14)+"</br>");//返回值：4
7 document.write("向下取整："+Math.floor(3.14)+"</br>");//返回值：3
8 document.write("产生随机数："+Math.random()+"</br>");//每次运行结果都不一样，但，结果一定在[0,1)之间。
9 document.write("四舍五入："+Math.round(3.4)+"</br>");//返回值：3
10 document.write("四舍五入："+Math.round(3.5)+"</br>");//返回值：4
11 document.write("四舍五入："+Math.round(-3.5)+"</br>");//返回值：-3
12 document.write("四舍五入："+Math.round(-3.6)+"</br>");//返回值：-4
13 </script>
14
15 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
16 <title>无标题文档</title>
17 </head>
18
19 <body>
20 </body>
21 </html>
3、String对象
3.1、String对象的创建方式
方式一:
new String("字符串的内容");
方式二:
var str = "字符串的内容";
3.2、String对象的常用方法
1.anchor()：生产锚点 （注意：想要看到锚点，就要定义一条连接跳转到你指定的锚点处。 比如：锚点<a name="aaa">这是锚点</a>；跳转连接<a href="#aaa">跳转</a>。）
2.blink()：为元素添加blink标签
3. charAt()：返回指定索引位置的字符
4.charCodeAt()：返回的是一个整数,代表指定位置上的Unicode编码
5.fontcolor()：把带有color属性的一个HTML<FONT>标记方法String对象的文本两端
6.indexOf()：返回指定字符串第一次出现字符串的字符的位置
7.italics()：把字符串显示为斜体
8.lastIndexOf()：返回指定字符串最后一次出现字符串的字符的位置
9.link()：把一个HREF属性的HTML锚点放在了Sring对象的两侧
10.replace()：替换
11.split()：切割
12.substr()：截取字符串
13.toLowerCase()：把指定的字符串全部转换成小写
14.toUpperCase()：把指定的字符串全部转换成
3.3、实例
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>JavaScript字符串对象</title>
6 </head>
7 <script type="text/javascript">
8 /*
9 var str1=new String("hello");
10 var str2=new String("hello");
11 document.write("两个字符串是同一个对象吗?"+(str1.toString()==str2.toString()));//返回值：true
12 */
13 document.write("第五章".anchor("five")+"</br>");
14 document.write("第五章".blink()+"</br>");
15 document.write("abc".charAt(2)+"</br>");//返回值：c
16 document.write("abc".charCodeAt()+"</br>");//返回值：97
17 document.write("第七章".fontcolor("#FFCE44")+"</br>");
18 document.write("abchellohelloWorldWorldhello".indexOf("hello")+"</br>");//返回值：3
19 document.write("百度".italics()+"</br>");
20 document.write("abchellohelloWorldWorldhello".lastIndexOf("hello")+"</br>");//返回值：23
21 document.write("百度".link("http://www.baidu.com")+"</br>");
22 document.write("明天我讲xml".replace("xml","DOM编程")+"</br>");
23
24 var str="我们-大家-好";
25 var arr=str.split("-");
26 for(var index=0;index<arr.length;index++){
27 document.write(arr[index]+","); //返回值：我们,大家,好,
28 }
29
30 document.write("</br>");
31 document.write("abchellohelloWorldWorldhello".substr(2,5)+"</br>");//返回值：chell
32 document.write("abc".toUpperCase()+"</br>");//返回值：ABC
33 document.write("ABC".toLowerCase()+"</br>");//返回值：abc
34
35 </script>
36 <body>
37 </body>
38 </html>
实例结果图
4、Date对象
4.1、例1
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd">
3 <html>
4 <head>
5 <script type="text/javascript">
6 var date=new Date();//获取当前系统时间
7 document.write("年:"+date.getFullYear()+"</br>");
8 document.write("月:"+(date.getMonth()+1)+"</br>");
9 document.write("日:"+date.getDate()+"</br>");
10 document.write("时:"+date.getHours()+"</br>");
11 document.write("分:"+date.getMinutes()+"</br>");
12 document.write("秒:"+date.getSeconds()+"</br>");
13
14 document.write("当前时间是:"+date.toLocaleString()+"</br>");
15
16 </script>
17 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
18 <title>无标题文档</title>
19 </head>
20
21 <body>
22 </body>
23 </html>
结果图
4.2、例2
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>无标题文档</title>
6 </head>
7
8 <body>
9 当前系统时间：<span id="time"></span>
10 </body>
11 <script type="text/javascript">
12 function getCurrentTime(){
13 //获取当前系统时间
14 var date = new Date();
15 var nowMonth = date.getMonth()+1;//因为月份是从0开始算的，所以要加1。
16 var nowDate = date.getDate();//日
17 var nowHours = date.getHours();//时
18 var nowMinutes = date.getMinutes();//分
19 var nowSeconds = date.getSeconds();//秒
20 //当前月、日、时、分、秒，小于10的时候，将以00,01,02,03...09,10,11...的形式出现
21 nowMonth =(nowMonth<10 ? "0"+nowMonth:nowMonth);
22 nowDate =(nowDate<10 ? "0"+nowDate:nowDate);
23 nowHours =(nowHours<10 ? "0"+nowHours:nowHours);
24 nowMinutes =(nowMinutes<10 ? "0"+nowMinutes:nowMinutes);
25 nowSeconds =(nowSeconds<10 ? "0"+nowSeconds:nowSeconds);
26
27 //alert(nowMonth);
28 //把当前系统时间拼装成我指定的格式
29 var timeInfo = date.getFullYear()+"年"+nowMonth+"月"+nowDate+"日 "+nowHours+":"+nowMinutes+":"+nowSeconds;
30 //找span对象
31 var spanObj = document.getElementById("time");
32 //设置span标签的内容
33 spanObj.innerHTML = timeInfo.fontcolor("blue");
34 }
35 getCurrentTime();
36 //定义方法
37 window.setInterval("getCurrentTime()",1000);//每个一秒就调用一下getCurrentTime()函数，实现当前系统时间是动态的
38 </script>
39 </html>
结果图
4.3、例3 （日期及时间）
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>JavaScript日期练习</title>
6 </head>
7 <script type="text/javascript">
8 function getNowFormatDate(){//获取系统当前年月份
9 var date = new Date();
10 var nowYear = date.getFullYear();
11 var nowMonth=date.getMonth()+1;
12 nowMonth =(nowMonth<10 ? "0"+nowMonth:nowMonth);
13 var nowDate = date.getDate();
14 var mydate = (nowYear+"年"+nowMonth+"月"+nowDate+"日");
15 document.write(mydate+"<br/>");
16 //return mydate;//谁调用该函数，就把值给谁
17 }
18 getNowFormatDate();
19
20 function getNowFormatDate2(){
21 var date = new Date();
22 var seperator1 = "-";
23 var seperator2 = ":";
24 var month = date.getMonth() + 1;
25 var strDate = date.getDate();
26 if (month >= 1 && month <= 9){
27 month = "0" + month;
28 }
29 if (strDate >= 0 && strDate <= 9){
30 strDate = "0" + strDate;
31 }
32 var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
33 + " " + date.getHours() + seperator2 + date.getMinutes()
34 + seperator2 + date.getSeconds();
35 document.write(currentdate);//得到当前完整时间，如：XXXX-XX-XX xx:xx:xx
36 //return currentdate;
37 }
38 getNowFormatDate2();
39 </script>
40 <body>
41
42 </body>
43 </html>
结果图
4.4、例4 （简单日历）
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>JavaScript日历练习</title>
6 </head>
7 <style type="text/css">
8 .today{
9 background-color:#0078D7;
10 }
11 </style>
12 <script type="text/javascript">
13 function getNowFormatDate(){//获取系统当前年月份
14 var date = new Date();
15 var Year = date.getFullYear();
16 var Month=date.getMonth()+1;
17 Month =(Month<10 ? "0"+Month:Month);
18 var mydate = (Year+"年"+Month+"月");
19 document.write(mydate+"<br/>");
20 //return mydate;//谁调用该函数，就把值给谁
21 }
22 getNowFormatDate();//必须调用该函数，才会有相应的输出结果；否则什么都没有输出。
23
24 //判断当前年份是否是闰年(闰年2月份有29天，平年2月份只有28天)
25 function isLeap(year) {
26 return year % 4 == 0 ? (year % 100 != 0 ? 1 : (year % 400 == 0 ? 1 : 0)) : 0;
27 }
28 var i, k,
29 today = new Date(),//获取当前日期
30 y = today.getFullYear(),//获取日期中的年份
31 m = today.getMonth(),//获取日期中的月份(需要注意的是：月份是从0开始计算，获取的值比正常月份的值少1)
32 d = today.getDate(),//获取日期中的日(方便在建立日期表格时高亮显示当天)
33 firstday = new Date(y, m, 1),//获取当月的第一天
34 dayOfWeek = firstday.getDay(),//判断第一天是星期几(返回[0-6]中的一个，0代表星期天，1代表星期一，以此类推)
35 days_per_month = new Array(31, 28 + isLeap(y), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31),//创建月份数组
36 str_nums = Math.ceil((dayOfWeek + days_per_month[m]) / 7);//确定日期表格所需的行数
37
38 document.write("<table cellspacing='12'><tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>"); //打印表格第一行(显示星期)
39 for (i = 0; i < str_nums; i++) {//二维数组创建日期表格
40 document.write('<tr>');
41 for (k = 0; k < 7; k++) {
42 var idx = 7 * i + k; //为每个表格创建索引,从0开始
43 var date = idx - dayOfWeek + 1;//将当月的1号与星期进行匹配
44 (date <= 0 || date > days_per_month[m]) ? date = ' ': date = idx - dayOfWeek + 1; //索引小于等于0或者大于月份最大值就用空表格代替
45 date == d ? document.write('<td class="today">' + date + '</td>') : document.write('<td>' + date + '</td>'); //高亮显示当天
46 }
47 document.write('</tr>');
48 }
49 document.write('</table>');
50 </script>
51 <body>
52 </body>
53 </html>
最终效果图
4.4、例4 （完整日历）
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>JavaScript简单日历</title>
6 </head>
7 <style type="text/css">
8 #div1{
9 width:425px;
10 height:420px;
11 border:1px solid gray;
12 }
13 #div2{
14 width:390px;
15 height:390px;
16 margin:auto;
17 margin-top:15px;
18 }
19 #div21{
20 width:220px;
21 height:72px;
22 margin:auto;
23 line-height:72px;
24 margin:auto;
25 }
26 #div22{
27 width:355px;
28 height:310px;
29 margin:auto;
30 }
31 #table1{
32 width:355px;
33 height:30px;
34 border-spacing: 30px 33px;
35 }
36 #table2{
37 width:355px;
38 height:30px;
39 line-height:30px;
40 border-spacing:30px 0px;
41 text-align:center;
42 }
43 table tr td {
44 text-align:center;
45 }
46 </style>
47
48 <body>
49 <div id="div1">
50 <div id="div2">
51 <div id="div21">
52 <button onclick="lastMon()">上一月</button>
53 <text id="yearAndMon"></text>
54 <button onclick="nextMon()">下一月</button>
55 </div>
56 <div id="div22">
57 <table id="table2">
58 <tr class="pan">
59 <td>日</td>
60 <td>一</td>
61 <td>二</td>
62 <td>三</td>
63 <td>四</td>
64 <td>五</td>
65 <td>六</td>
66 </tr>
67 </table>
68 <table id="table1"></table>
69 </div>
70 </div>
71 </div>
72 <script type="text/javascript">
73 var nowDate=new Date();
74 var nowYear=nowDate.getFullYear();
75 var nowMonth=nowDate.getMonth()+1;
76 var nowDate=nowDate.getDate();
77
78 //var month=(nowMonth<10?"0"+momth:month);
79 var text=document.getElementById("yearAndMon");
80 text.innerText=nowYear+"年"+nowMonth+"月";
81 var monthDays1=[31,29,31,30,31,30,31,31,30,31,30,31];
82 var monthDays2=[31,28,31,30,31,30,31,31,30,31,30,31]
83
84 function becomeDate(nowYear,nowMonth,nowDate){
85 var dt=new Date(nowYear,nowMonth-1,1);
86 var firstDay=dt.getDay();
87 var table=document.getElementById("table1");
88 var monthDays=isRunNian();
89 var rows=5;
90 var cols=7;
91 var k=1;
92 for(var i=1;i<=rows;i++){
93 var tri=table.insertRow();
94 for(var j=1;j<=7;j++){
95 var tdi=tri.insertCell();
96 if(i==1&&i*j<firstDay+1){
97 tdi.innerHTML="";
98 }else{
99 if(k>monthDays[nowMonth-1]){
100 break;
101 }
102 tdi.innerHTML=k;
103 if(tdi.innerHTML == nowDate){//高亮显示（有误，待解决）
104 var str = tdi.innerHTML;
105 var num = str.fontcolor("#FF0000");
106 tdi.innerHTML = num;
107 //nowMonth.indexOf(nowMonth)?
108 }
109 k++;
110 }
111 }
112 }
113 }
114
115 function lastMon(){
116 table1.innerHTML="";
117 var text=document.getElementById("yearAndMon");
118 if(nowMonth>1){
119 nowMonth=nowMonth-1;
120 }else{
121 nowYear--;
122 nowMonth=12;
123 }
124 text.innerText=nowYear+"年"+nowMonth+"月";
125 becomeDate(nowYear,nowMonth,nowDate);
126 }
127
128 function nextMon(){
129 table1.innerHTML="";
130 if(nowMonth<12){
131 nowMonth=nowMonth+1;
132 }else{
133 nowYear++;
134 nowMonth=1;
135 }
136 var text=document.getElementById("yearAndMon");
137 text.innerText=nowYear+"年"+nowMonth+"月";
138 becomeDate(nowYear,nowMonth,nowDate);
139 }
140
141 function isRunNian(){
142 if((nowYear%4==0||nowYear%400==0)&&nowYear%100!=0){
143 return monthDays1;
144 }else{
145 return monthDays2;
146 }
147 }
148 becomeDate(nowYear,nowMonth,nowDate);
149 </script>
150 </body>
151 </html>
最终效果图
|
原创作者：DSHORE 作者主页：http://www.cnblogs.com/dshore123/ 原文出自：https://www.cnblogs.com/dshore123/p/9453192.html 欢迎转载，转载务必说明出处。（如果本文对您有帮助，可以点击一下右下角的 推荐，或评论，谢谢！） |
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 【Web前端学习笔记】Javascript_03_常用对象：String,Number,Math,Date,网页时针
- Javascript String|Date|Array|Math|Boolean|Number对象方法详解
- java基础64 JavaScript中的Arrays数组对象和prototype原型属性（网页知识）
- JavaScript 基础（4）ECMAScript（基础语法）——内置对象Array、String、Math、Date
- java基础66 JavaScript中的事件、localtion对象、screen对象（网页知识）
- java基础65 JavaScript中的Window对象（网页知识）
- JavaScript基础——引用类型（四）基本包装类型（Boolean、Number、String）、单体内置对象（Global、Math）
- 04-javascript String、Number、Math、Date对象
- Java基础知识强化101：Java 中的 String对象真的不可变吗 ?
- JavaScript中Date，Math,Global,Number等对象的浅析，Array数组对象的解析
- JavaScript之基础-11 JavaScript 包装类对象(Math、Date、Number、Boolean)
- javascript对象----Boolean、Math、Number、String 、Array、JSON、Object
- JavaScript的内置对象（Date日期+string字符串）基础语法总结
- JavaScript一些简单的内置对象(String,Math,Date)
- JavaScript常用对象(String.Array.Date.Math)
- JavaScript基础（DOM）-Document对象、Element 对象、Attribute 对象 -JavaScript的内置对象（Array 对象、Date 对象、String 对象）
- js中Date对象与Math对象常用基础知识
- javacript内建对象(Math,String,Date,Array,Domain)
- 黑马程序员--Java基础--集合、泛型、其他对象（System、Runtime、Math、Date）
- javascript基础知识梳理-Number与String之间的互相转换