![]()
<!DOCTYPE html>
<html lang="en">
<!-- 改变元素内容 -->
<!-- <head>
<meta charset='UTF-8'>
<title>Document</title>
<style>
div,
p {
width: 300px;
height: 30px;
line-height: 30px;
color: #fff;
background-color: pink;
}
</style>
</head>
<body>
<button id='dh'>德华</button>
<button id='xy'>学友</button>
<button id='zl'>之琳</button>
<button id='qsz'>邱淑贞</button>
<img src='images/dh.jpg' tltle='刘德华' alt='' herf='' width=300 height=s200>
<script>
// 修改元素属性 src
// 1.获取元素
var dh = document.getElementById('dh');
var xy = document.getElementById('xy');
var img = document.querySelector('img');
// 2.注册事件
xy.onclick = function () {
img.src = 'images0/xy.jpg';
img.title = '张学友'
}
dh.onclick = function () {
img.src = 'images0/dh.jpg'
img.title = '刘德华'
}
// 关之琳
var zl = document.getElementById('zl');
zl.onmouseover = function () {
img.src = 'images0/zl.jpg'
img.title = '关之琳'
}
// 邱淑贞
var qsz = document.getElementById('qsz');
qsz.onmouseover = function () {
img.src = 'images0/qsz.jpg'
img.title = '邱淑贞'
img.herf = 'https://fashion.qq.com/a/20170615/004020_1.htm'
}
</script>
</body> -->
<!-- 分时显示图片 -->
<!-- <head>
<meta charset='UTF-8'>
<title>Document</title>
<style>
div {
font-size: 20px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
background-color: rgb(200, 247, 146);
}
body {
background-color: bisque;
}
</style>
</head>
<body>
<div id='hello'>
早上好，仙女
</div>
<img src="images/s.jpg" alt="" height="400" width='750'>
<script>
// 1.获取元素
// var div = document.getElementById('hello')
var div = document.querySelector('div') // 同上面的效果一样
var img = document.querySelector('img'); //!! 图片也是需要一个变量来接收的，不接收怎么对人做出改变呢？
// 2.获取当前小时数：①新建对象；②getHours属性
var date = new Date();
var ti = date.getHours();
var ti = 21; // 人为控制
console.log(ti); // 后台查看
// 3. 根据小时数字，改变图片和文字信息
if (ti < 11) {
div.innerHTML = '早上好，仙女！'
img.src = 'images0/s.jpg';
} else if (ti >= 11 && ti < 13) {
div.innerHTML = '中午好，仙女！'
img.src = 'images0/z.jpg';
} else {
div.innerHTML = '下午好，仙女！'
img.src = 'images0/x.jpg';
}
</script>
</body> -->
<!-- 表单属性 -->
<!-- <head>
<meta charset='UTF-8'>
<title>Document</title>
<style>
input{
color:#999;
}
div {
font-size: 20px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
background-color: rgb(200, 247, 146);
}
body {
background-color: bisque;
}
</style>
</head>
<body>
<button>禁用</button>
<input type='text' value='输入内容'>
<script>
// 1.获取元素
var btn = document.querySelector('button');
var input = document.querySelector('input');
// 2.注册事件 处理程序
btn.onclick = function () {
input.innerHTML = '点击了'; // 这个是 普通盒子，比如div标签里的内容
// 表单里面的值 文字内容是通过value来修改的
input.value = '已禁用'
// 如果想要某个表单被禁用，不能再点击 disabled 我们想要这个按钮button被禁用
// btn.disabled = true; // 已被禁用
this.disabled = true; // 效果一致
// this指向的是事件函数的调用者，即btn，this指向btn
}
</script>
</body> -->
<!-- 仿京东显示密码 -->
<!-- <head>
<meta charset='UTF-8'>
<title>Document</title>
<style>
.box {
position: relative;
width: 400px;
/* border: 1px solid red; */
border-bottom: 1px solid #ccc;
margin: 100px auto;
}
.box input {
width: 370px;
height: 30px;
border: 0;
outline: none;
}
.box img {
position: absolute;
top: 2px;
right: 2px;
width: 24px;
}
</style>
</head>
<body>
<div class='box'>
<lable for=''>
<img src='images/close.png' id='eye'>
</lable>
<input type='password' name='' id='pwd'>
</div>
<script>
// 1.获取元素
var eye = document.getElementById('eye');
var pwd = document.getElementById('pwd');
// 2.注册事件 处理程序
var flag = 0;
eye.onclick = function () {
// 点击一次之后，flag一定要变化
if (flag == 0) {
pwd.type = 'text'; // 修改pwd属性
flag = 1;
eye.src = 'images/open.png';
} else {
pwd.type = 'password';
flag = 0;
eye.src = 'images/close.png';
}
}
</script>
</body> -->
<!-- 样式属性的变化 -->
<!-- <head>
<meta charset='UTF-8'>
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
// 1.获取元素
var div = document.querySelector('div');
// 2.注册事件 处理程序
div.onclick = function () {
// div.style 里面的属性，采取驼峰命名法
this.style.backgroundColor = 'purple';
this.style.width = '250px';
}
</script>
</body> -->
<!-- 仿淘宝-点击-关闭二维码-->
<!-- <head>
<meta charset='UTF-8'>
<title>Document</title>
<style>
.box {
position: relative;
width: 74px;
height: 88px;
border: 1px solid #ccc;
margin: 100px auto;
font-size: 12px;
text-align: center;
color: #f40;
display: block;
}
.box img {
width: 60px;
margin-top: 5px;
}
.close-btn {
position: absolute;
top: -1px;
left: -16px;
width: 14px;
height: 14px;
border: 1px solid #ccc;
line-height: 14px;
font-family: Arial, Helvetica, sans-serif;
cursor: pointer;
}
</style>
</head>
<body>
<div class='box'>
淘宝二维码
<img src='images/tao.png' alt=''>
<i class='close-btn'>x</i>
</div>
<script>
// 1.获取元素
var btn = document.querySelector('.close-btn');
var box = document.querySelector('div');
// var box = document.getElementsByClassName('box'); //?? 为啥这个不行
// 2.注册事件 处理程序
btn.onclick = function () {
// this. // 不能用this，因为this指向事件的调用者，即btn按钮本身，但是我们要处理的是整个div
box.style.display = 'none';
}
</script>
</body> -->
<!-- 循环精灵图背景 -->
<!-- <head>
<meta charset='UTF-8'>
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.box {
width: 250px;
margin: 100px auto;
}
.box li {
float: left;
width: 24px;
height: 25px;
background-color: rgb(245, 182, 193);
margin: 15px;
background: url(images/sprite.png) no-repeat;
}
</style>
</head>
<body>
<div class='box'>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
// 1.获取元素
var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
// 让索引号 乘以44 就是每个li的背景y坐标，index就是我们的y坐标
var index = i * 44;
lis[i].style.backgroundPosition = '0 -' + index + 'px'; // 精灵图标的y坐标都是负的
}
</script>
</body> -->
<!-- 显示-隐藏文本框内容 -->
<!-- <head>
<meta charset='UTF-8'>
<title>Document</title>
<style>
input {
color: #999;
}
</style>
</head>
<body>
<input type='text' value='手机'>
<script>
// 1.获取元素
var text = document.querySelector('input');
// 2.注册事件 获得焦点事件 onfocus
text.onfocus = function () {
console.log('得到了焦点');
if (this.value == '手机') {
this.value = '';
}
// 获得焦点 需要把文本框内的文字颜色变黑
this.style.color = '#333';
}
// 3.注册事件 失去焦点事件 onblur
text.onblur = function () {
console.log('失去了焦点');
if (this.value == '') {
this.value = '手机';
}
this.style.color = '#999';
}
</script>
</body> -->
<!-- 通过className更改元素样式 -->
<!-- <head>
<meta charset='UTF-8'>
<title>Document</title>
<style>
div {
width: 200px;
height: 500px;
background-color: pink;
color: greenyellow
}
.change {
background-color: purple;
/* color:#fff; */
font-size: 25px;
margin-top: 100px;
}
</style>
</head>
<body>
<div class='first'>文本</div>
<script>
// 1.使用 element.style 获得修改元素样式 如果样式比较多
var text = document.querySelector('div');
//
text.onclick = function () {
// div.style 里面的属性，采取驼峰命名法
// this.style.backgroundColor = 'purple';
// this.style.width = '250px';
// this.style.color = '#fff';
// this.style.fontSize = '25px';
// this.style.marginTop = '100px';
// 2.我们可以通过 修改元素的className更改元素的样式 这种方法，适用于样式较多，或者功能复杂的情况
// 让我们当前元素的类名改为了 change
this.className = 'change'; // but，这里明明没有保留
// }
// 3.如果想要保留原先的类名，我们可以这么做
// this.className = 'first change';
}
</script>
</body> -->
<!-- 仿新浪-密码验证 -->
<!-- <head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.message{
display:inline-block;
font-size:12px;
padding-left: 20px;
color:#999;
background:url(images/mess.png) no-repeat left center;
}
.wrong{
color:red;
background:url(images/wrong.png) no-repeat left center;
}
.right{
color:green;
background:url(images/right.png) no-repeat left center;
}
</style>
</head>
<body>
<div class="register">
<input type="password" class='ipt'>
<div class="message">请输入6-16位密码</div>
</div>
<script>
// 功能：当失去焦点时，显示输入内容的对错
/* 思路：
① onblur判断失去焦点
② 若失去则执行方法（函数）
③ if判断内容对错
*/
var ipt = document.querySelector('.ipt');
var message = document.querySelector('.message');
ipt.onblur = function() {
if(this.value.length < 6 || this.value.length > 16) {
console.log('错误');
message.innerHTML = '宁输入的位数不对，请输入6-16位密码！';
message.className = 'message wrong';
}else{
message.innerHTML = '输入正确！'
message.className = 'message right';
}
}
</script>
</body> -->
</html>
浙公网安备 33010602011771号