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+"日 "+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 欢迎转载,转载务必说明出处。(如果本文对您有帮助,可以点击一下右下角的 推荐,或评论,谢谢!) |