JavaScript基础（七）元素样式属性、定时器、系统时间对象

元素样式属性设置与获取获取

*{padding: 0;margin: 0}
#box{width: 100px;background: red}
.on{height: 100px}

<div id="box"></div>
<!-- 
样式优先级：
	内联 > id > class > 标签
	       =========权重
	1、内联样式		1000
	2、id样式		0100
	3、class样式	0010
	4、标签样式		0001
 -->

var oBox = document.getElementById('box');
// 方法一
oBox.style.height = '100px';

// 方法二
oBox.className = 'on';

// 方法三
var oCss = document.getElementById('css');
oCss.innerHTML += '#box{height: 100px};';

// 方法四
oBox.style.cssText = 'height:100px;border: 1px solid yellow;border-radius: 5px;margin: 50px auto;'

var oBox = document.getElementById('box');
/*
// 当用内联样式style="width: 100px;height: 100px;border: 1px solid yellow;"写在div里时
alert(oBox.style.width); // 100px
*/

// 当写在样式表里时#box{width: 100px;height: 100px;border: 1px solid yellow;}
// alert(oBox.style.width); // '' ==> 空
/*
// getComputedStyle(dom)  ===> IE9+
alert(getComputedStyle(oBox).width); // 100px
*/
/*
// currentStyle  ===> 只兼容IE678
alert(oBox.currentStyle.width)
*/

// alert(getStyle(oBox, 'width'));        // IE6+
// alert(getStyle(oBox, 'background'));		// rgb(255, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box
// alert(getStyle(oBox, 'backgroundColor'));     // rgb(255, 0, 0)
alert(getStyle(oBox, ' backgroundColor'));     // undefined

// 获取对象的样式
function getStyle(obj, attr){
	// attr = attr.trim();
	attr = attr.split(' ');
	attr = attr.join('');
	if(obj.currentStyle){
		return obj.currentStyle[attr];
	}else{
		return getComputedStyle(obj)[attr];
	}
}

通过class去获取对象

<div class="box wrap">adsafaf</div>

obj.getElementsByClassName(className)  // IE678不兼容
var oBoxs = document.getElementsByClassName('box');// 类数组
oBoxs[0].onclick = function(){
	alert(123)
}
//所有浏览器都可以获取的方法
var all = document.getElementsByTagName('*');
var arrClass = [];
for(var i=0;i<all.length;i++){
	if(all[i].className == 'box'){
		arrClass.push(all[i]);
	}
}
arrClass[0].onclick = function(){
	alert(1233214);
}
// 当class中有两个以上的时就会报错啦
// 改进方法是：
var all = document.getElementsByTagName('*');
var arrClass = [];
for(var i=0;i<all.length;i++){
	var arr = all[i].className.split(' '); // ['box', 'wrap']
	for(var j=0;j<arr.length;j++){
		if(arr[j] == 'box'){
			arrClass.push(all[i]);// 放入具有box样式的对象
		}
	}
}

自定义属性相关操作

<div id="box" class="" style="" yw="yw"></div>

var oBox = document.getElementById('box');
// alert(oBox.attributes[0].name);  // id
// alert(oBox.attributes[3].name); // yw

// 获取属性值
// alert(oBox.id); // box
/*
.[]可以获取属性，但是不能获取自定义属性
*/
// alert(oBox.getAttribute('yw')); //yw

// 设置属性值
oBox.setAttribute('yw', 'afasklsal');  // ^_^

// 删除属性
oBox.removeAttribute('yw');
oBox.removeAttribute('class');

定时器

setInterval

var num = 0;
var timer = setInterval(function(){
	num++;
	if(num == 10){
		// return; // 只能终止这一次
		// break; // Uncaught SyntaxError: Illegal break statement
		clearInterval(timer); // 定时器清除后，后面的代码还是会执行一次
		// return;  // 要后面的代码不执行，使用return
	}
	document.write(num + '<br/>');
}, 1000);

系统时间对象

new Date();
	getFullYear();
	getMonth();
	getDate();
	getDay();  0 1 2 3 4 5 6
	getHours();
	getMinutes();
	getSeconds();
	getTime();
new Date();
	创建一个时间点：
	1）new Date("month dd,yyyy hh:mm:ss"); 
	2）new Date("month dd,yyyy"); 
	3）new Date(yyyy,mth,dd,hh,mm,ss); 
	4）new Date(yyyy,mth,dd); 
	5）new Date(ms);
	month:用英文 表示月份名称，从January到December 
	mth:用整数表示月份，从0（１月）到１１（１２月） 
	dd:表示一个 月中的第几天，从1到31 
	yyyy:四位数表示的年份 
	hh:小时数，从0（午夜）到23（晚11点） 
	mm: 分钟数，从0到59的整数 
	ss:秒数，从0到59的整数 
	ms:毫秒数，为大于等于0的整数

案例

文字打印

var arr = [];
arr.push('大家晚上好');
arr.push('hello world!!!');
arr.push('哈哈哈哈！！！！！！！');
var pos = 1;
var index = 0;
var len = arr[0].length;
var timer = null;
var p = '';
var row = 0;
function printText(){
	if(row < index){
		p = p + arr[row++] + '<br/>';
	}
	var oText = document.getElementById('text');
	oText.innerHTML = p + arr[index].substring(0, pos);
	if(len == pos){
		index++;
		pos = 0;
		if(index<arr.length){
			len = arr[index].length;
			timer = setTimeout(printText, 100);
		}else{
			clearTimeout(timer);
		}
	}else{
		pos++;
		timer = setTimeout(printText, 100);
	}
}
printText();

无缝运动

*{padding: 0;margin: 0;}
#box{position: relative;width: 200px;height: 50px;margin: 50px auto;border: 1px solid #000;overflow: hidden;}
#list{position: absolute;list-style: none;width: 200%;height: 100%;}
#list li{width: 50px; height: 50px;float: left;}

<div id="box">
	<ul id="list">
		<li style="background: green;"></li>
		<li style="background: red;"></li>
		<li style="background: yellow;"></li>
		<li style="background: blue;"></li>
	</ul>
</div>

window.onload = function(){
	var oList = document.getElementById('list');
	oList.innerHTML += oList.innerHTML;
	setInterval(function(){
		if(oList.offsetLeft < -oList.offsetWidth/2){
			oList.style.left = 0;
		}
		oList.style.left = oList.offsetLeft-10 + 'px';
	}, 50);
}

日期经典案例之倒计时

<h1 id="time"></h1>

window.onload = function(){
	var tDom = document.getElementById("time");
	
	function start(y,m,d){
		var time = new Date();//当前时间
		var end = new Date(y,m-1,d);//截止时间
		var t = end.getTime()-time.getTime();//时间差毫秒
		var sec = t/1000;//获取秒数

		//获取剩余多少天
		var day = Math.floor(sec/60/60/24);
		//获取剩余多少小时
		var hh = Math.floor(sec/60/60%24);
		//获取剩余多少分钟
		var mm = Math.floor(sec/60%60);
		//获取剩余多少秒
		var ss = Math.floor(sec%60);
		
		var html = "距离【"+end.getFullYear()+"年"+(end.getMonth()+1)+"月"+end.getDate()+"号】还有"+day+"天"+hh+"小时"+mm+"分钟"+ss+"秒";
		tDom.innerHTML = html;
	};
	start(2020,5,20);
	setInterval(function(){
		start(2020,5,20);
	},1000);
}