隔行显示
效果
效果如上图所示,当鼠标经过某一行时,该行的背景颜色变深,其余行不变,当鼠标移开,背景颜色恢复。如下图所示。
核心思路
- 设置一个表格,获取事件源表格的每一行,但不能给每一行设置类名再逐一获取,这样效率太低。我们可以利用for进行遍历获取。
- 表头那行不需要变色,因此只需要获取tbody的tr即可。
- 设置事件类型鼠标经过onmouseover和鼠标移开onmouseout,鼠标经过背景颜色发生变化,移开后恢复。(注意:如果不设置ommouseout恢复背景颜色则表格的颜色将无法复原,如下图所示)
代码部分
html部分
<table>
<thead>
<tr>
<th>名字</th>
<th>武器</th>
<th>能力</th>
<th>属性</th>
<th>所属地</th>
<th>突破材料</th>
</tr>
</thead>
<tbody>
<tr>
<td>温迪</td>
<td>天空之翼</td>
<td>击飞、聚怪</td>
<td>风</td>
<td>蒙德</td>
<td>塞西莉亚花</td>
</tr>
<tr>
<td>钟离</td>
<td>护膜之杖</td>
<td>石化、护盾</td>
<td>岩</td>
<td>璃月</td>
<td>石泊</td>
</tr>
<tr>
<td>可莉</td>
<td>四风原典</td>
<td>伤害</td>
<td>火</td>
<td>蒙德</td>
<td>慕风蘑菇</td>
</tr>
<tr>
<td>魈</td>
<td>和璞鸳</td>
<td>扣血,下落攻击</td>
<td>风</td>
<td>璃月</td>
<td>清心</td>
</tr>
<tr>
<td>刻晴</td>
<td>匣里龙吟</td>
<td>瞬移</td>
<td>雷</td>
<td>璃月</td>
<td>石泊</td>
</tr>
<tr>
<td>琴</td>
<td>天空之刃</td>
<td>回血、减抗</td>
<td>风</td>
<td>蒙德</td>
<td>蒲公英籽</td>
</tr>
</tbody>
</table>
css部分
<style>
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
table {
width: 600px;
height: 210px;
text-align: center;
line-height: 30px;
margin: 100px auto;
border: 2px solid #333;
}
thead tr {
height: 30px;
background-color: skyblue;
}
tbody tr {
height: 30px;
}
tbody td {
border-bottom: 1px solid #d7d7d7;
font-size: 12px;
color: blue;
}
</style>
javascript部分
<script>
var trs = document.querySelector('tbody').querySelectorAll('tr');
for (let i = 0; i < trs.length; i++) {
trs[i].onmouseover = function() {
this.style.backgroundColor = '#ccc';
}
trs[i].onmouseout = function() {
this.style.backgroundColor = '';
}
}
</script>
分时显示问候语
知识点
Data日期对象是一个构造函数,必须使用new来调用创建我们的日期对象
- 使用:直接使用var day = new
Date()输出电脑现在的时间- 参数常用写法
①数字型 2021,05,29(逗号隔开)
②字符串型’2021-05-29’(横杆隔开)- 日期格式化
var date = newDate(); //这句话必须要写,实例化
date.getFullYear(); // 返回当前日期的年
date.getMonth()+1; //返回当前的月份(0-11),因此别忘记后面要加1
date.getDate(); // 返回当前的日期
date.getDay(); // 周一到周六返回相应的数字,周日返回的是0
date.getHours(); // 返回时
date.getMinutes(); // 返回分
date.getSeconds(); // 返回秒
// 写一个 “今天是2021年5月29日 星期六”
var date = new Date();
year = date.getFullYear();
month = date.getMonth() + 1;
dates = date.getDate();// 对象不能和之后定义的变量名冲突,因此这里用dates
arr = [‘星期日’, ‘星期一’, ‘星期二’, ‘星期三’, ‘星期四’, ‘星期五’, ‘星期六’];
// 创建一个数字,把星期日放在最前面,用day当索引值输出中文的日期
day = date.getDay();
console.log(‘今天是’ + year + ‘年’ + month + ‘月’ + dates + ‘日’ + arr[day]);
// 写一个时间,格式为00:00:00
var time = new Date();
var h = time.getHours();
h = h < 10 ? ‘0’ + h : h;
var m = time.getMinutes();
m = m < 10 ? ‘0’ + m : m;
var s = time.getSeconds();
s = s < 10 ? ‘0’ + s : s;
alert(h + ‘:’ + m + ‘:’ + s)- 获得Date总的毫秒数(毫秒数永远不会重复的)
①通过valueOf()、getTime():
var date = new Date();
console.log(date.valueOf());
console.log(date.getTime());
②加号前置:
var date = +new Date();
console.log(date);
③H5新增的:
console.log(Date.now());
效果
下午时候
晚上时候
由上面的效果可以看出,页面的内容会随着时间的变化而发生改变。
核心思路
- 首先设置一个图片img和文本p,并分别获取他们的事件源。
- 设置一个变量h,并利用函数获取当前的时间。
- 用if、else if语句进行判断时间,更改图片img和文本p的内容
代码
html
<img src="image/温迪背景.jpg" alt="">
<p>早上好,愿风轻抚你的汗水</p>
css部分
<style>
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
body {
text-align: center;
}
img {
width: 700px;
margin-bottom: 50px;
}
p {
display: block;
width: 300px;
height: 25px;
margin: 0 auto;
line-height: 25px;
text-align: center;
font-family: '仿宋';
font-size: 18px;
font-weight: 700;
}
</style>
javascript部分
<script>
var img = document.querySelector('img');
var p = document.querySelector('p');
var date = new Date();
var h = date.getHours();
if (h < 12) {
img.src = 'image/温迪背景.jpg';
p.innerHTML = '早上好,愿风轻抚你的汗水';
p.style.color = 'green';
} else if (h >= 12 && h < 19) {
img.src = 'image/可莉背景.jpg';
p.style.color = 'red';
p.innerHTML = '下午好,和可莉一起摸鱼吧';
} else if (h >= 19 && h < 24) {
img.src = 'image/甘雨背景.jpg';
p.style.color = 'brown';
p.innerHTML = '晚上好,祝你有个好的夜晚';
}
</script>