javascripts 三_javascripts 图表点击-优快云博客

本文链接：https://blog.youkuaiyun.com/wwwfdfsf/article/details/125911753

一.Dom

getElementById（）//通过id获取元素

getElementsByTagName（）//获取指定标签名的集合（是个数组）。父元素必须是单个对象

getElementsByClassName（‘类名’）//通过类名获取--对象集合

querySelector（‘选择器’）//指定返回第一个元素对象

querySelectorAll（）//指定选择器所有元素对象所有集合

document.body；获取body元素

document.documentElement //获取html元素

二.事件

1.事件：三部分组成事件源事件类型事件处理程序

事件源事件被触发的对象谁按钮

事件类型如何触发什么事件比如：按钮点击经过等

事件处理程序通过一个函数赋值的方式执行

onclick //鼠标点击左键触发

onmouseover//鼠标经过触发

onmouseout // 鼠标离开触发

onfocus //获取鼠标焦点触发

onblur //鼠标失去焦点触发

onmousemove //鼠标移动触发

onmouseup //鼠标弹起触发

onmousedown //鼠标按下触发

三常用元素的属性操作

innerText innerHtml //改变元素内容

src href

id title alt

1.点击切换图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			img{
				height: 200px;
				width: 200px;
			}
		</style>
	</head>
	<body>
		<button id="hz">海贼王</button>
		<button id="ss">死神</button><br />
		<img src="img/1.jpeg" alt="">
		
		<script>
		var oHz=document.getElementById('hz');
		var oSs=document.getElementById('ss');
		var img=document.querySelector('img');
		oHz.onclick = function(){
			img.src = 'img/1.jpeg';
		}
		oSs.onclick = function(){
			img.src = 'img/2.jpeg';
		}

		</script>
	</body>
	
</html>

2.分时问候

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>分时问候</title>
		<style>
			img{
				height: 100px;
				width: 200px;
			}
		</style>
	</head>
	<body>
		<img src="img/3.jpeg" alt="">
		<div>上午好</div>
		
		<script>
			var img=document.querySelector('img');
			var div=document.querySelector('div');
			var date=new Date();
			var h=date.getHours();
			if(h<12){
				img.src='img/3.jpeg';
				div.innerHTML='亲，上午好';
			}else if(h<18){
				img.src='img/5.jpeg';
				div.innerHTML='亲，下午好';
			}else{
				img.src='img/6.jpeg';
				div.innerHTML='亲，晚上好';
			}
		</script>
	</body>
</html>

四表单元素的属性操作

type value checked selected disabled

1. 密码明文与加密

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>密码明文</title>
		<style>
			.box{
				position: relative;
				width: 400px;
				border-bottom: 1px solid #ccc;
				margin: 100px auto;
			}
			.box input{
				width: 370px;
				height: 30px;
				border: 0;
				outline: none;
			}
			.box img{
				position: absolute;
				left: 348px;
				height: 40px;
				width: 48px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<label for="">
				<img src="icon/闭眼.png" alt="" id="eye">
			</label>
			<input type="password" name="" id="pwd">
		</div>
		<script>
			var img=document.getElementById('eye');
			var oInput=document.getElementById('pwd');
			var flag=0;
			img.onclick=function(){
				if(flag==0){
					oInput.type='text';
					img.src='icon/眼睛-睁眼.png';
					flag=1;
				}else{
					oInput.type="password";
					img.src='icon/闭眼.png';
					flag=0;
				}
				
			}
		</script>
	</body>
</html>

五.样式属性操作

element.style //行内样式操作

element.className //类名样式操作

1.关闭二微码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>关闭二维码</title>
		<style>
			.box{
				margin: 100px 55px;
				position: relative;
			}
			.box span{
				height: 35px;
				text-align: center;
				line-height:35px;
				position: absolute;
				left: -20px;
				font-size: 45px;
				border: 1px solid red;
			}
			.box span:hover{
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<span id="close">×</span>
			<img id="code" src="icon/二维码.png" alt="">
		</div>
		<script>
			var oSpan= document.getElementById('close');
			var box = document.getElementsByClassName('box')[0];
			oSpan.onclick=function(){
				box.style.display='none';
			}
		</script>
	</body>
</html>