Dom轮播图三级联动 Dom常用尺寸

最新推荐文章于 2024-05-02 18:12:22 发布

敲代码的皮皮

最新推荐文章于 2024-05-02 18:12:22 发布

阅读量295

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/cc12345_10/article/details/116275406

版权

1.Dom轮播图


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>dom轮播图</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.wp {
				width:1000px;
				height:600px;
				position: relative;
				border: 1px #f00 solid;
				margin: 30px auto 0;
				overflow: hidden;
			}
			.list {
				height:600px;
				position: absolute;
				left: 0;
				top: 0;
				display: flex;
			}
			.list img {
				display: block;
				height:600px;
				width:1000px;
			}
		</style>
	</head>
	<body>
		<div class="wp">
			<div class="list"></div>
		</div>
	</body>
</html>
<script src="js/tween.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	var list = document.querySelector('.list');
	var index = 0;
	var timmer;
	
	//定义创建图片函数
	function createImg(){
		index++;
		if(index>4){
		   index=1;
		}
		var img = document.createElement('img');
		img.src = '../images/'+index+'.jpg';
		list.appendChild(img);
	}
	//定义删除图片函数
	function delImg(){
		var one = list.firstElementChild;
		list.removeChild(one);
	}
	//创建两个
	for(var i=0;i<2;i++){
		createImg();
	}
	
	//设置计时器
	timmer = setInterval(move,20);
	
	var t = 0;
	var b = 0;
	var c = -1000;
	var d = 100;
	
	// 移动函数
	function move(){
		t++;
		list.style.left = Tween.bounceOut(t,b,c,d)+'px';
		if(t==d){
			t=0; //重置t=0
			//停止计时器
			clearInterval(timmer);
			//创建img
			createImg();
			//删除第一个img
			delImg();
			list.style.left = 0;
			//设置下一次运动，使用延时计时器
			setTimeout(function(){
				timmer = setInterval(move,20);
			},1500);
		}
	}
	
</script>

2.三级联动


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>三级联动</title>
		<style type="text/css">
			select {
				width:120px;
				margin-left:20px;
			}
		</style>
	</head>
	<body>
		<select id="sheng"></select>省
		<select id="shi"></select>市
		<select id="xian"></select>县
	</body>
</html>
<script type="text/javascript">
	var aPro = ['河南省','河北省'];
	var aCity = [ ['郑州市','开封市'],  ['石家庄','邯郸市']  ];
	//aCon[0][0]
	var aCon = [
		[ 
			['二七区','金水区','高新区','中原区'],
			['开封县','兰考县','尉氏县','杞县']
		],
		[	['石家庄1区','石家庄2区','石家庄3区','石家庄4区'],
			['邯郸1县','邯郸2县','邯郸3县','邯郸4县','邯郸5县']
		]
	];
	
	var sheng = document.getElementById("sheng");
	var shi = document.getElementById("shi");
	var xian = document.getElementById("xian");
	
	//设置省的下标
	var proIndex = 0;
	//设置市的下标
	var cityIndex = 0;
	
	//给省添加选项
	for(var i=0;i<aPro.length;i++){
		var opt = document.createElement('option');
		opt.innerHTML = aPro[i];
		sheng.appendChild(opt);
	}
	
	//给市添加可选项
	function changeCity(){
		//清空里面的内容，因为之前可能会有其他内容
		shi.innerHTML = '';
		//创建对应的城市选项
		for(var i=0;i<aCity[proIndex].length;i++){
			var opt = document.createElement('option');
			opt.innerHTML = aCity[proIndex][i];
			shi.appendChild(opt);
		}
	}
	changeCity();
	
	//给县添加可选项
	function changeCon(){
		//清空里面的内容，因为之前可能会有其他内容
		xian.innerHTML = '';
		//创建对应的县选项
		for(var i=0;i<aCon[proIndex][cityIndex].length;i++){
			var opt = document.createElement('option');
			opt.innerHTML = aCon[proIndex][cityIndex][i];
			xian.appendChild(opt);
		}
	}
	changeCon();
	
	//给省添加change事件,内容改变的时候触发
	sheng.onchange = function(){
		// alert(this.value);
		var val = this.value;
		if(val=='河南省'){
			proIndex = 0;
		}else{
			proIndex = 1;
		}
		changeCity();
		changeCon();
	};
	//给市添加change事件
	shi.onchange = function(){
		var val = this.value;
		//获取市的下标
		cityIndex = aCity[proIndex].indexOf(val);
		changeCon();
	};
</script>

3.Dom常用尺寸


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>dom常用尺寸</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.wp {
				width:200px;
				height: 200px;
				background: #04BE02;
				
				border:20px #f00 solid;
				margin: 50px auto 0;
				padding:50px 30px;
			}
			#wp1 {
				border:20px #000 solid;
				width:400px;
				height:400px;
				padding:100px;
				background:#FF6600;
				margin:50px auto;
			}
			#son1 {
				border:20px #999 solid;
				width:200px;
				height:200px;
				padding:50px;
				background:#04BE02;
				margin:50px auto;
				position: relative;
			}
			#son2 {
				border:20px #f00 solid;
				width:100px;
				height:100px;
				margin:20px auto;
				background:#ff0;
			}
			
			.far {
				width:200px;
				height: 200px;
				border:20px #f00 solid;
				overflow: auto;
				margin: 50px auto;
				padding: 50px;
			}
			.child {
				width:500px;
				background: #04BE02;
				padding: 50px;
			}
		</style>
	</head>
	<body>
		<div id="wp1">
			<div id="son1">
				<div id="son2"></div>
			</div>
		</div>
		
		<hr/>
		
		<div class="wp"></div>
		
		<hr/>
		
		<div class="far">
			<div class="child">豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。

时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。俨骖騑于上路，访风景于崇阿；临帝子之长洲，得天人之旧馆。层峦耸翠，上出重霄；飞阁流丹，下临无地。鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体势。

披绣闼，俯雕甍，山原旷其盈视，川泽纡其骇瞩。闾阎扑地，钟鸣鼎食之家；舸舰弥津，青雀黄龙之舳。云销雨霁，彩彻区明。落霞与孤鹜齐飞，秋水共长天一色。渔舟唱晚，响穷彭蠡之滨；雁阵惊寒，声断衡阳之浦。

遥襟甫畅，逸兴遄飞。爽籁发而清风生，纤歌凝而白云遏。睢园绿竹，气凌彭泽之樽；邺水朱华，光照临川之笔。四美具，二难并。穷睇眄于中天，极娱游于暇日。天高地迥，觉宇宙之无穷；兴尽悲来，识盈虚之有数。望长安于日下，目吴会于云间。地势极而南溟深，天柱高而北辰远。关山难越，谁悲失路之人？萍水相逢，尽是他乡之客。怀帝阍而不见，奉宣室以何年？

嗟乎！时运不齐，命途多舛。冯唐易老，李广难封。屈贾谊于长沙，非无圣主；窜梁鸿于海曲，岂乏明时？所赖君子见机，达人知命。老当益壮，宁移白首之心？穷且益坚，不坠青云之志。酌贪泉而觉爽，处涸辙以犹欢。北海虽赊，扶摇可接；东隅已逝，桑榆非晚。孟尝高洁，空余报国之情；阮籍猖狂，岂效穷途之哭！
 
勃，三尺微命，一介书生。无路请缨，等终军之弱冠；有怀投笔，慕宗悫之长风。舍簪笏于百龄，奉晨昏于万里。非谢家之宝树，接孟氏之芳邻。他日趋庭，叨陪鲤对；今兹捧袂，喜托龙门。杨意不逢，抚凌云而自惜；钟期既遇，奏流水以何惭？

呜乎！胜地不常，盛筵难再；兰亭已矣，梓泽丘墟。临别赠言，幸承恩于伟饯；登高作赋，是所望于群公。敢竭鄙怀，恭疏短引；一言均赋，四韵俱成。请洒潘江，各倾陆海云尔：

滕王高阁临江渚，佩玉鸣鸾罢歌舞。

画栋朝飞南浦云，珠帘暮卷西山雨。

闲云潭影日悠悠，物换星移几度秋。

阁中帝子今何在？槛外长江空自流。</div>
		</div>
		
		<button type="button" id="btn">点击回到顶部</button>
	</body>
</html>
<script type="text/javascript">
/*
1. 内尺寸
	clientWidth，clientHeight，clientLeft，clientTop
	clientWidth(元素宽度) = 左右padding + width(不包括滚动条15px)
	clientHeight(元素高度) = 上下padding + height(不包括滚动条15px)
	clientLeft 元素左边框的大小
	clientTop 元素上边框的大小
	
	以上属性均输出数字
*/
var wp = document.querySelector('.wp');
console.log('clientWidth', wp.clientWidth);
console.log('clientHeight', wp.clientHeight);
console.log('clientLeft', wp.clientLeft);
console.log('clientTop', wp.clientTop);

/*
2.外尺寸
offsetParent
offsetWidth offsetHeight offsetLeft offsetTop 
offsetWidth = 左右padding + width(包括滚动条15px)+左右boder的宽
offsetHeight = 上下padding+height(包括滚动条15px)+上下boder的宽
offsetParent 元素的定位父级，也就是具有定位属性的父级。如果元素的所有父级都不是定位父级，在标准浏览器下，offsetParent是body，在ie下是html，因此需要保证html和body统一。html和body的offsetParent是null
offsetLeft 当前元素的左外边框，到它的offsetParent的左内边框的距离
offsetTop 当前元素的上外边框，到它的offsetParent的上内边框的距离
*/
var son2 = document.getElementById("son2");
console.log('offsetWidth', son2.offsetWidth);
console.log('offsetHeight', son2.offsetHeight);
console.log('offsetParent', son2.offsetParent);
console.log('offsetLeft', son2.offsetLeft);
console.log('offsetTop', son2.offsetTop);

var body = document.body;
var html = document.documentElement;
console.log(body.offsetParent,html.offsetParent);

// 计算#son2 到页面顶部的距离
console.log(son2.offsetTop + son2.offsetParent.offsetTop + son2.offsetParent.clientTop);
// 定义一个函数，计算元素到顶部距离
function getTop(obj){
	// 判断obj是不是body或者html
	if(obj.offsetParent==null){
		return 0;
	}
	
	return obj.offsetTop + obj.offsetParent.clientTop + getTop(obj.offsetParent);
}
console.log(getTop(son2));
/*
3.滚动尺寸
scrollWidth scrollHeight scrollTop scrollLeft
scrollWidth 当子元素的盒模型的宽度大于当前元素盒模型的宽的时候，scrollWidth = 子元素的盒模型总宽度小于 + 当前元素的左padding；如果子元素的盒模型总宽度小于当前元素的宽度，那么 scrollWidth = 当前元素的width + 当前元素的左右padding
scrollHeight 它与上面的类似
scrollTop 元素内部卷上去的高度
scrollLeft 元素内部卷到左侧的距离

scrollTop 和 scrollLeft 支持赋值

*/ 
var far = document.querySelector('.far');
console.log(far.scrollWidth);
console.log(far.scrollHeight);

console.log(html.scrollTop);
var btn = document.getElementById("btn");
var timmer;

btn.onclick = function(){
	var top = html.scrollTop;
	timmer = setInterval(function(){
		top--;
		if(top<=0){
			html.scrollTop = 0;
			clearInterval(timmer);
		}
		html.scrollTop = top;
	},5);
};

// 滚动事件
window.onscroll = function(){
	console.log(html.scrollTop);
};
</script>

敲代码的皮皮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Dom轮播图三级联动 Dom常用尺寸

1.Dom轮播图<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>dom轮播图</title> <style type="text/css"> * { margin: 0; padding: 0; } .wp { width:1000px; height:600px; positi
复制链接

扫一扫