Web前端——JavaScript练习 - 好文

Js练习

显示和隐藏，改变display属性(点击查看图片)

关键代码：
e.style.display = "block"; e.style.display = "none";
源码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>显示和隐藏</title>
<script type="text/javascript"> function showPicture(){ //普通方式获得控件实例 var e =
document.getElementById("myimg"); e.style.display = "block"; } function
hidePicture(){ //querySelector是html5增加的 //id前面得写#,class前面得写
document.querySelector("#myimg").style.display = "none"; //标签直接写即可,获取到第一个img标签
//document.querySelector("img").style.display = "none"; } </script> </head>
<body> <a href="javascript:void(0);"onclick="showPicture()">查看图片</a> <a
href="javascript:void(0);"onclick="hidePicture()">隐藏图片</a> <br /> <img
id="myimg" src="http://www.w3school.com.cn/i/eg_mouse.jpg" style="display:
none;" > </body> </html>
querySelector三种方法介绍 <https://www.cnblogs.com/xiaohuochai/p/5798014.html>

鼠标滑动更改内容 onmouseover

关键：
onmouse事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script
type="text/javascript"> function moveToBlue(){ var e =
document.querySelector("#btn_blue"); var e2 =
document.querySelector("#btn_green"); var div =
document.querySelector("#content"); e.style.border = "1px solid #ccc";
e.style.backgroundColor = "white"; e2.style.border = "none";
e2.style.backgroundColor = "none"; div.style.backgroundColor = "blue"; }
function moveToGreen(){ var e = document.querySelector("#btn_blue"); var e2 =
document.querySelector("#btn_green"); var div =
document.querySelector("#content"); e2.style.border = "1px solid #ccc";
e2.style.backgroundColor = "white"; e.style.border = "none";
e.style.backgroundColor = "none"; div.style.backgroundColor = "green"; }
</script> </head> <body> <div style="width: 100px;height: 50px;"> <button
id="btn_blue" style="width: 45px;"onmousemove="moveToBlue()">蓝色</button>
<button id="btn_green" style="width:
45px;"onmousemove="moveToGreen()">绿色</button> <div id="content"
style="background-color: blue;width: auto;height: 50px;"></div> </div> <br />
<img id="myimg" src="http://www.w3school.com.cn/i/eg_mouse.jpg" style="display:
none;"> </body> </html>
时间自动更新

关键代码：
Js中内置了Date对象

* getFullYear 年
* getMonth 月
* getDate 日
* getHours 小时
* getMinutes 分钟
* getSeconds 秒
* getDay 星期几（0-6）星期日为0
方法说明
getFullYear() 从 Date 对象以四位数字返回年份。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
toString() 把 Date 对象转换为字符串。
toTimeString() 把 Date 对象的时间部分转换为字符串。
toDateString() 把 Date 对象的日期部分转换为字符串。
toUTCString() 根据世界时，把 Date 对象转换为字符串。
toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串。
toLocaleTimeString() 根据本地时间格式，把 Date 对象的时间部分转换为字符串。
toLocaleDateString() 根据本地时间格式，把 Date 对象的日期部分转换为字符串。 var now = new Date(); var
time =now.getFullYear() + '年' + now.getMonth() + '月' + now.getDate() + '日'
+now.getHours() +'时' + now.getMinutes() +'分' + now.getSeconds() + '秒';
* setTomeout(fn, 周期：豪秒): 周期只会执行一次
* setInterval(fn, 周期：豪秒)：间隔周期一直执行
源码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>时间自动更新</title>
</head> <body> <p></p> <script type="text/javascript"> function setTime() { var
date = new Date(); var time = date.toTimeString();
document.querySelector("p").innerText = time; } setTime(); //setIime不能加上括号 //
setInterval(setTime, 1000); //加括号得得在外层加双引号或者单引号 setInterval("setTime()", 1000);
</script> </body> </html>
源码（es拼接字符串）：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head>
<body> <p></p> <script type="text/javascript"> function setTime() { var now =
new Date(); // 通过css的选择符获得html元素 var timer1 = document.querySelector('p'); var
year = now.getFullYear(); var month = now.getMonth() + 1; var date =
now.getDate(); var hours = now.getHours(); var minutes = now.getMinutes(); var
seconds = now.getSeconds(); //es6中模板字符串,拼接 timer1.innerText =
`${year}年${month}月${date}日${hours}时${minutes}分${seconds}秒`; } setTime();
//setIime不能加上括号 // setInterval(setTime, 1000); //加括号得得在外层加双引号或者单引号
setInterval("setTime()", 1000); </script> </body> </html>
表单

关键代码：e.checked=true;

全选和反选的实现
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script
type="text/javascript"> function selectAll() { var hobbys =
document.getElementsByName("hobby"); var btn =
document.getElementById("checkall"); //原生for,推荐使用这一种 /* for (var i = 0; i <
hobbys.length; i++) { if (btn.checked) { hobbys[i].checked = true; } else {
hobbys[i].checked = false; } } */
//使用foreach,使用HBuilderX,在内置的浏览器会报错,提示foreach不起作用
//使用谷歌浏览器打开则没有问题,下面使用lambda也是如此情况,可能是HBuilder的bug
hobbys.forEach(function(hobby) { //如果全选的是选中,则把全部设置为选中的状态,否则设置为未选中 if
(btn.checked) { hobby.checked = true; } else { hobby.checked = false; } });
//使用lambda /* hobbys.forEach((hobby) => { console.log(hobby); if (btn.checked)
{ hobby.checked = true; } else { hobby.checked = false; } }); */ } function
selectRevese() { var hobbys = document.getElementsByName("hobby"); for (var i =
0; i < hobbys.length; i++) { //设置为另外的状态 hobbys[i].checked = !hobbys[i].checked;
} } </script> </head> <body> <input type="checkbox" name="hobby">读书<br><br>
<input type="checkbox" name="hobby">电影<br><br> <input type="checkbox"
name="hobby">游戏<br><br> <input type="checkbox" name="hobby">游泳<br><br> <input
type="checkbox" name="hobby">写代码<br><br> <input type="checkbox" id="checkall"
onclick="selectAll()">全选 </input> <button type="button"
onclick="selectRevese()">反选</button> </body> </html>

热门工具换一换