java基础63 JavaScript中的Number、Math、String、Date对象（网页知识）

本文知识点（目录）：

    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+"日&nbsp;"+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

欢迎转载，转载务必说明出处。（如果本文对您有帮助，可以点击一下右下角的推荐，或评论，谢谢！）