Dom——隔行变色、分时显示问候语

隔行显示

效果

效果如上图所示，当鼠标经过某一行时，该行的背景颜色变深，其余行不变，当鼠标移开，背景颜色恢复。如下图所示。

核心思路

设置一个表格，获取事件源表格的每一行，但不能给每一行设置类名再逐一获取，这样效率太低。我们可以利用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="data: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>

Dom——隔行变色、分时显示问候语相关推荐

java jquery时间问候语_javascript实现根据时间段显示问候语的方法
这篇文章主要介绍了javascript实现根据时间段显示问候语的方法,涉及javascript时间与字符串的相关操作技巧,需要的朋友可以参考下本文实例讲述了javascript实现根据时间段显示问候 ...
HTML根据当前时间显示问候语,用原生JS写根据时间显示问候语
步骤构思 1)需要用到日期内置对象, 2)获取系统小时, 3)利用多分支语句来判断, 4)修改元素内容的相应显示问候语.
列表隔行变色、显示和隐藏下拉菜单、列表的高亮显示效果
列表隔行变色 <!DOCTYPE html> <html lang="zh-CN"> <head><meta charset=" ...
编写js代码，实现根据系统时间显示问候语的功能，通过改变div中的内容，显示不同问候语
要求如下: 6点之前--凌晨好 9点之前--早上好 12点之前--上午好 14点之前--中午好 17点之前--下午好 19点之前--傍晚好 22点之前--晚上好 22点之后包括22点--夜里好 < ...
根据时间显示问候语(Vue)
废话少说,看代码 <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
分时显示不同图片和问候语
//根据系统不同时间判断,需要用到日期内置对象 //利用分支语句设置不同图片 //修改img元素的src属性 //需要一个div显示问候语,跟随时间修改元素内容 <!DOCTYPE html&g ...
本节作业之显示不同问候语、显示密码、关闭二维码、循环精灵图背景、显示隐藏文本框内容、密码框格式提示错误、京东关闭广告、新浪下拉菜单、开关灯、换肤、表格隔行变色、表单取消全选、tab栏切换、发布删除留言
本节作业之显示不同问候语.显示密码.关闭二维码.循环精灵图背景.显示隐藏文本框内容.密码框格式提示错误.京东关闭广告.新浪下拉菜单.开关灯.换肤.表格隔行变色.表单取消全选.tab栏切换.发布删除留言 ...
DOM--操作元素案例：分时显示不同的图片以及问候语；仿淘宝关闭标签案例；隐藏显示文本框内容；仿新浪注册页面中密码长度的判定
分时显示不同的图片以及问候语分析: 根据不同的时间来判断,所以需要获取到系统的时间. 利用分支语言来设置不同的图片需要更换不同的图片,因此需要操作img的元素src 需要一个div来显示不同问候语 ...
js学习-操作元素案例-分时显示不同图片不同问候语
js学习-操作元素案例-分时显示不同图片不同问候语 // 操作元素案例 // 分时显示不同图片,不同问候语// 上午7-11 中午12-13 下午14-18 晚上18-22![请添加图片描述](htt ...

Dom——隔行变色、分时显示问候语

隔行显示

效果

核心思路

代码部分

分时显示问候语

知识点

效果

核心思路

代码

Dom——隔行变色、分时显示问候语相关推荐

最新文章

热门文章