new Date()
在JS中获取当前时间对象和JAVA类似。都是先创建出一个时间对象，用变量进行接收。var myDate= new Date();
- 获取当前年份
var myYear=myDate.getFullYear(); - 获取当前月份,（java和js中）月份是从0开始的,所以要加1
var myMonth = myDate.getMonth()+1; - 获取当前日期
var date =myDate.getDate(); - 获取当前是星期几,如果是周日则返回0.
var myDay=myDate.getDay(); - 获取当前小时
var hour =myDate.getHours(); - 获取当前分钟
var min =myDate.getMinutes(); - 获取当前秒
var sec =myDate.getSeconds();
动态显示时间
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
var oBox =document.getElementById('box');
var oP=document.getElementById('imgTime');
function runTime(){
var myDate =new Date();
var year =myDate.getFullYear();
var mon =myDate.getMonth()+1;
var day =myDate.getDate();
var hour =myDate.getHours();
var min =myDate.getMinutes();
var sec =myDate.getSeconds();
var strDate = formatTime(year)+'-'+formatTime(mon)+'-'+formatTime(day)+' '+formatTime(hour)+':'+formatTime(min)+':'+formatTime(sec);
var strDate1 = formatTime(hour)+':'+formatTime(min)+':'+formatTime(sec);
oBox.innerHTML = strDate;
for(var i =0;i<strDate1.length;i++){
var num = strDate1.charAt(i);
if(i != 2 && i != 5){
var aImg=oP.getElementsByTagName('img');
aImg[i].src = 'img/'+num+'.JPG';
}
}
}
runTime();
var timer = setInterval(function(){
runTime();
},1000);
function formatTime(date){
if(date<10){
date = '0'+date;
}
return date;
}
}
</script>
</head>
<body>
<div id="box">
</div>
<p id="imgTime">
<img src="img/0.JPG">
<img src="img/0.JPG">
<img src="img/colon.JPG" >
<img src="img/0.JPG">
<img src="img/0.JPG">
<img src="img/colon.JPG" >
<img src="img/0.JPG">
<img src="img/0.JPG">
</p>
</body>
</html>
日期差的运用
var myDate1 = new Date(2019, 3, 16, 15, 22, 0);
var myDate2 = new Date();
var times = myDate1-myDate2;
- 日期相减为毫秒（myDate1-myDate2 值为毫秒）
- 天: Math.floor(times/86400);
- 时: Math.floor(times%86400/3600);
- 分: Math.floor(times%86400%3600/60);
- 秒: Math.floor(times%60);
倒计时
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="datetime">
</div>
<script type="text/javascript">
function djs() {
var myDate1 = new Date(2019, 3, 16, 15, 22, 0);
var myDate2 = new Date();
var times = Math.floor(myDate1 - myDate2) / 1000;
document.getElementById('datetime').innerHTML = Math.floor(times / 86400) + '天' + Math.floor(times % 86400 / 3600) +
'时' + Math.floor(times % 86400 % 3600 / 60) + '分' + Math.floor(times % 60) + '秒';
}
djs();
timer = setInterval(function() {
djs();
}, 1000);
</script>
</body>
</html>
字符串操作
<script>
var str = 'A前台技术';
// alert(str.length);空格占长度
// alert(str.charAt(2));//找不到的话什么也不显示
// alert(str.charCodeAt());// 返回unicode码
// alert(String.fromCharCode(22945)); 返回unicode码代表的字符
// alert(str.charCodeAt());// 0-9 48-57
// alert(str.charCodeAt());// a-z 97-122
// alert(str.charCodeAt());// A-Z 65-90
</script>
slice和substring都有截取字符串的意思，slice的应用更贴近于java。
- slice 中参数是一个负数时,从倒数位数截取
- substring 中参数是一个负数时 ,和0一样
indexOf(v,num)查看字符串v在索引num后出现的位置。如果返回值为-1则说明没有找到该字符串v。
lastIndexOf查看字符串出现的所有位置
split(a): var arrStr=str.split(a)将字符串str按照a拆分成数组。a没了。
arrStr.join();//将数组中的内容用逗号（,）进行拼接
arrStr.join(“”);//将数组中的内容无缝拼接。
展开/收缩文字
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box {
background: #0F7CBF;
border: 10px solid red;
padding: 10px;
width: 500px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="box">
<!-- <span>
但我家的我阿囧的加我啊就掉进外景地挖机的加我啊降低，
</span>
<a href="javascript:;">展开</a> -->
<span>
但我家的我阿囧的加我啊就掉进外景地挖机的加我啊降低，
但我家的我阿囧的加我啊就掉进外景地挖机的加我啊降低，
但我家的我阿囧的加我啊就掉进外景地挖机的加我啊降低，
但我家的我阿囧的加我啊就掉进外景地挖机的加我啊降低，
但我家的我阿囧的加我啊就掉进外景地挖机的加我啊降低，
但我家的我阿囧的加我啊就掉进外景地挖机的加我啊降低，
但我家的我阿囧的加我啊就掉进外景地挖机的加我啊降低，
</span>
<a href="javascript:;">收缩</a>
</div>
<script type="text/javascript">
var oBox = document.getElementById('box');
var oSpan = oBox.getElementsByTagName('span')[0];
var oA = oBox.getElementsByTagName('a')[0];
var text = oSpan.innerHTML;
var onOff =true;
oA.onclick = function() {
if(onOff){
var html = oSpan.innerHTML.slice(0, 28);
oSpan.innerHTML = html;
oA.innerHTML='...展开';
}else{
oSpan.innerHTML = text;
oA.innerHTML='收缩';
}
onOff = !onOff;
}
</script>
</body>
</html>
网友评论