发表于： 2022-12-09 20:25:10
0 328
今天学习的js知识点：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>排他思想</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: url("../js2/图片/人像.jpg") no-repeat center top;
}
li {
list-style: none;
}
.baidu {
overflow: hidden; /* overflow:hidden"可以溢出隐藏 */
margin: 100px auto;
background-color: #fff;
width: 370px;
padding-top: 3px;
}
.baidu li {
float: left;
margin: 0 1px;
cursor: pointer; /* 光标为一只手 */
}
.baidu img {
width: 120px;
}
</style>
</head>
<body>
<!-- <button>按钮1</button>-->
<!-- <button>按钮2</button>-->
<!-- <button>按钮3</button>-->
<!-- <button>按钮4</button>-->
<!-- <button>按钮5</button>-->
<ul class="baidu">
<li><img src="../js2/图片/人像.jpg"></li>
<li><img src="../js2/图片/夜景.jpg"></li>
<li><img src="../js2/图片/恶魔.jpg"></li>
</ul>
<script>
//1、获取元素
// var btns = document.getElementsByTagName('button');
// // btns 得到的是伪数组 里面是每一个元素 btns[i]
// for(var i = 0; i < btns.length; i++) {
// btns[i].onclick = function () {
// // 先把所有的按钮颜色去掉
// for(var i = 0; i < btns.length; i++) {
// btns[i].style.backgroundColor = '';
// }
// // 然后才让当前元素的背景颜色为 red
// this.style.backgroundColor = 'red';
// }
// }
//总结：首先先排除其他人，然后才设置自己的样式 这种排除其他人的思想我们称为排他思想
//获取元素
var imgs = document.querySelector('.baidu').querySelectorAll('img');
//注册事件
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = function () {
// this.src 就是我们点击图片的路径
// 把诸葛路径 this.src 给body
// console.log(this.src); 获取路径
document.body.style.backgroundImage = 'url(' + this.src + ')';
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>密码练习</title>
<style>
div {
width: 600px;
margin: 100px auto;
}
.message {
display: inline-block;
font-size: 12px;
color: #999;
/*意思是背景图片不重复，在水平方向靠近容器的左侧居中*/
background: url("../js2/图片/Shape 4.png") no-repeat left center;
padding-left: 20px;
}
.wrong {
color: red;
}
.right {
color: green;
}
</style>
</head>
<body>
<div>
<input type="password" class="ipt">
<p class="message">请输入6~16位密码</p>
</div>
<script>
//获取元素
var ipt = document.querySelector('.ipt');
var message = document.querySelector('.message');
//注册事件 失去焦点
//根据表单里面值的长度 this.value.length 来判断
ipt.onblur = function () {
if(this.value.length < 6 || this.value.length > 16) {
message.className = 'message wrong';
message.innerHTML = '你输入的格式不正确，应该是6~16位';
} else {
message.className = 'message right';
message.innerHTML = '格式正确';
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示隐藏</title>
<style>
input {
color: #999;
}
</style>
</head>
<body>
<input type="text" value="手机">
<script>
var text = document.querySelector('input');
// onfocus 获得焦点事件
text.onfocus = function () {
// console.log('得到了焦点');
if(this.value === '手机') {
this.value = '';
}
//获得焦点，把文本框里面的文字颜色变深
this.style.color = '#333';
}
// onblur 失去焦点事件
text.onblur = function () {
// console.log('失去了焦点');
if(this.value === '') {
this.value = '手机';
}
//失去焦点，把文本框里面的文字颜色变浅
this.style.color = '#999';
}
</script>
</body>
</html>
返回列表
评论