new Date()
在JS中獲取當前時間對象和JAVA類似学搜。都是先創(chuàng)建出一個時間對象衬潦，用變量進行接收。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();
動態(tài)顯示時間
<!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 中參數(shù)是一個負數(shù)時,從倒數(shù)位數(shù)截取
- substring 中參數(shù)是一個負數(shù)時 ,和0一樣
indexOf(v,num)查看字符串v在索引num后出現(xiàn)的位置霹粥。如果返回值為-1則說明沒有找到該字符串v。
lastIndexOf查看字符串出現(xiàn)的所有位置
split(a): var arrStr=str.split(a)將字符串str按照a拆分成數(shù)組疼鸟。a沒了后控。
arrStr.join();//將數(shù)組中的內容用逗號（,）進行拼接
arrStr.join(“”);//將數(shù)組中的內容無縫拼接。
展開/收縮文字
<!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>
數(shù)組
js中數(shù)組的長度是可變的，數(shù)組中可以存儲各種數(shù)據(jù)類型镣隶。
var arr=[1,2,3,4,true,'hello'];
1.快速清空數(shù)組有兩種方法极谊。
①arr=[]什荣；
②arr.length=0;
2.向數(shù)組中添加數(shù)據(jù)有兩種方法。
①在原數(shù)組的末尾添加arr.push(5怀酷，6，7);
②在原數(shù)組的開始位置添加arr.unshift('新數(shù)組第一個元素'嗜闻，'新數(shù)組第二個元素')蜕依。
3.從數(shù)組中刪除數(shù)據(jù)有兩種方法。
①刪除數(shù)組中的最后一個元素琉雳，產(chǎn)生新數(shù)組样眠，并返回最后一個元素的值。arr.pop();
②刪除數(shù)組中的第一個元素翠肘，產(chǎn)生新數(shù)組檐束，并返回第一個元素的值。arr.shift();
4.splice可對數(shù)組進行增刪改
①增加數(shù)據(jù)：arr.splice(2,0,'e');
解釋：在索引值為2的位置束倍，增加e被丧，其余元素位置后移。
②修改數(shù)據(jù)：arr.splice(2,3,'e');
解釋：在索引值為2的位置绪妹，將從該位置的起的三個元素甥桂，替換成e。
③刪除數(shù)據(jù)：arr.splice(1,1)邮旷；
解釋：第一個參數(shù)為索引黄选，第二各參數(shù)為個數(shù)。將索引值為1的元素開始婶肩，刪除一個元素办陷。
利用splice去重數(shù)組中的重復數(shù)據(jù)
<script type="text/javascript">
var arr =[1,2,3,4,5,6,2,1,4,5,2];
//選擇排序
for(var i=0;i<arr.length-1;i++){
for(var j=i+1;i<arr.length;j++){
if(arr[i]==arr[j]){
arr.splice(j,1);
j--;
}
}
}
</script>
省市級聯(lián)動（數(shù)組和DOM）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<select name="" id="province">
<option value="省份" >省份</option>
</select>
<select name="" id="city">
<option value="" >城市</option>
</select>
<script type="text/javascript">
var oPro=document.getElementById('province');
var oCity=document.getElementById('city');
var aPro=['遼寧','河北','湖北'];
var aCity=[
['沈陽','大連','鞍山','撫順','本溪','錦州'],
['石家莊','天津','廊坊','承德'],
['武漢','襄陽','宜昌','黃石','十堰']
];
for(i in aPro){
oPro.innerHTML +='<option value="'+aPro[i]+'">'+aPro[i]+'</option>';
}
// 觸發(fā)改變事件
oPro.onchange=function(){
oCity.innerHTML = '<option value="">城市</option>';
var provalue= oPro.value;
for(i in aPro){
if(aPro[i]==provalue){
for(j in aCity[i]){
// 創(chuàng)建一個節(jié)點
var oPtion =document.createElement('option');
oPtion.value=aCity[i][j];
oPtion.innerHTML=aCity[i][j];
// 追加一個節(jié)點
oCity.appendChild(oPtion);
}
}
}
}
</script>
</body>
</html>
json可以將起看成一個對象，該對象由鍵值對組成律歼。（不準確）比較像Java中的map集合民镜。
<script type="text/javascript">
// json 類似map集合,不恰當?shù)恼f他是一個類似于java的對象
var json = {
"name": "張三",
"age": 16,
"gender": "男"
}
console.log(json['name']);
console.log(json['age']);
console.log(json['gender']);
// 遍歷json,attr為key變量
// json遍歷寫法類似于java foreach遍歷,只不過擺放位置不一樣,代表的意義不一樣
for (attr in json) {
console.log(attr+":"+json[attr]);
}
</script>
DOM操作（節(jié)點操作）（document object model 文檔對象模型）
我們可以把每個標簽都看作一個節(jié)點，標簽兄弟標簽苗膝，父級標簽殃恒，子標簽。即父節(jié)點辱揭、子節(jié)點离唐、兄弟節(jié)點等，對他們的操作稱為節(jié)點操作问窃。
①獲取節(jié)點：獲取節(jié)點的方式有很多亥鬓，常用的有通過ID、標簽名域庇、類名稱嵌戈、name屬性獲取覆积。
通過ID：document.getElementByID()
通過標簽名：document.getElementsByTagName()
通過類名稱：document.getElementsByClassName()
通過name屬性：document.getElementsByName()
②獲取全部子節(jié)點：返回操作節(jié)點的所有子節(jié)點數(shù)組。
var oList = document.getElementById('list');
var aLi = oList.children熟呛；//獲取子節(jié)點數(shù)組
③獲取第一個子節(jié)點：
var oFlist=oList.firstElementChild;
④獲取最后一個子節(jié)點：
var oLlist=oList.lastElementChild;
⑤獲取某節(jié)點的下一個兄弟節(jié)點：
var oSlist=oList.firstElementChild.nextElementSibling;(獲取第二個子節(jié)點：先獲取第一個子節(jié)點宽档，通過第一個子節(jié)點獲取他的下一個節(jié)點)
⑥獲取某節(jié)點的上一個兄弟節(jié)點：
var oTlist=oList.lastElementChild.previousElementSibling;(獲取倒數(shù)第二個子節(jié)點：先獲取倒數(shù)第一個子節(jié)點，通過倒數(shù)第一個子節(jié)點獲取他的上一個節(jié)點)
⑦獲取父節(jié)點
var oFther=oList.parentNode;
⑧獲取有定位的父節(jié)點
oList.offsetParent
⑨距離有定位的父節(jié)點有多少距離
offsetLeft庵朝，offsetTop吗冤，offsetRight，offsetBottom
!!!!!創(chuàng)建節(jié)點和追加子節(jié)點
var oElement=document.createElement('li');//創(chuàng)建li標簽的對象九府。li標簽可以是任意標簽div椎瘟、a等等。
oLi.appendChild(oElement);//將創(chuàng)建的標簽插入oLi對象所在標簽的子標簽中侄旬。
取消默認事件和confirm提示框
用Botton舉例：創(chuàng)建一個表單肺蔚，表單中輸入內容，如果內容不為空儡羔，則跳轉到鏈接地址宣羊，否則不跳轉。
confirm和alert作用相似汰蜘，但是會返回true或false段只。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="https://www.baidu.com" method="" id="form">
<input type="text" id="" value="" name="username" />
<button type="submit">提交</button>
<button type="reset">重置</button>
</form>
<script type="text/javascript">
var oForm = document.getElementById('form');
var oBtn = oForm.getElementsByTagName('button')[0];
oForm.onsubmit = function() {
if (oForm.username.value != null && oForm.username.value != '') {
oForm.submit();
} else {
return false; //取消默認事件
}
}
oForm.onreset = function() {
if (!confirm("確定重置？")) {
return false;
}
}
</script>
</body>
</html>
BOM操作（browser object model 瀏覽器對象模型）
說白了就是打開鉴扫、跳轉赞枕、關閉瀏覽器窗口
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button type="button1">打開窗口1</button>
<button type="button2">打開窗口2</button>
<a target="_blank">打開窗口</a>
<!--
Bom browser object model
關閉窗口
打開窗口
跳轉頁面
-->
<script type="text/javascript">
document.getElementsByTagName('button')[0].onclick=function(){
// 打開窗口(挑IE或者其他瀏覽器的版本，兼容性差)
window.open("https://www.baidu.com","_self");
}
document.getElementsByTagName('button')[1].onclick=function(){
// 打開窗口(跟上面一樣坪创，但是兼容性更好)
window.location.;
}
</script>
</body>
</html>
焦點事件和焦點函數(shù)
獲取焦點函數(shù)：對象.focus();
獲取焦點事件：
對象.onfocus = function() { //焦點事件
//oInput.value = 'dwa';
}
失去焦點函數(shù)：對象.blur();
失去焦點事件：
對象.onblur = function() { //焦點事件
//oInput.value = 'dwa';
}
全選函數(shù)炕婶、計算函數(shù)
全選函數(shù)描述：設置一個按鈕和一個文本框，當在文本框中輸入文字莱预，點擊按鈕柠掂，使文字變成全部選中狀態(tài)。
帶文本框的對象.select()
全選函數(shù)：eval能計算可運算的計算表達式的結果
var num =eval(1+2*3/4);
事件的擴展
onmousemove依沮；鼠標移動事件
onmousedown涯贞；鼠標按下事件
onmouseup；鼠標彈起事件
onkeydown危喉；//ev.keyCode獲取鍵盤碼
document.onkeydown=function(ev){
var ev =ev||event;
//ev.keyCode 獲取鍵盤碼
alert(ev.keyCode);
}
事件流
事件冒泡：所有的事件都具有穿透性,直到穿透到document(子級接收了一個事件宋渔，他的父級同樣接收這個事件),這種機制叫穿透冒泡.
通過event對象,阻止穿透ev.stopPropagation();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>點按鈕圖片顯示，點空白圖片消失</title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background: red;
display: none;
}
</style>
</head>
<body>
<p><button type="button">按鈕</button></p>
<div id="box">
</div>
<script type="text/javascript">
// 事件冒泡:
// 所有的事件都具有穿透性,直到穿透到document(子級接收了一個事件辜限，他的父級同樣接收這個事件),這種機制叫穿透冒泡.
document.getElementsByTagName('button')[0].onclick=function(ev){
var ev =ev||event;
document.getElementById('box').style.display='block';
// 通過event對象,阻止穿透.
ev.stopPropagation();
}
document.onclick=function(){
document.getElementById('box').style.display='none';
}
</script>
</body>
</html>
Event對象
當一個對象觸發(fā)一個事件時皇拣，事件function中設置形參event，event對象會返回描述該事件的所有信息。
代碼描述：當點擊空白窗口時氧急，觀察consle控制臺輸出了什么
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
觸發(fā)該事件的所有信息都會被記錄
-->
<script type="text/javascript">
document.onclick=function(ev){
var ev = ev||event;
for(attr in ev){
console.log(attr+","+ev[attr])
}
}
</script>
</body>
</html>
js實現(xiàn)復制粘貼功能
// input與textarea可以直接使用這個方法颗胡。
let Url = document.getElementById("share_status1");
Url.select();
// 執(zhí)行瀏覽器復制命令用戶定義的代碼區(qū)域用戶定義的代碼區(qū)域（只對可編輯區(qū)域有效果,如 input ,textarea 標簽）
document.execCommand("Copy");
// 這里是復制`<span></span>`中的代碼，與直接復制input中的不一樣吩坝，所以需要一個中轉毒姨，不可以與input的那種一樣
let input = document.createElement('input');
document.body.appendChild(input);
let content = document.querySelector('#share_url').innerHTML;
input.setAttribute('value', content);
input.select();
// #execCommand()這個方法,只對可編輯區(qū)域有效果,如 input ,textarea 標簽,
document.body.removeChild(input);
