Web前端——JavaScript练习
<h2 id="js练习">Js练习</h2><h3 id="显示和隐藏改变display属性点击查看图片">显示和隐藏，改变display属性(点击查看图片)</h3>
<p><strong>关键代码：</strong></p>
<pre><code>e.style.display = "block";
e.style.display = "none";
</code></pre>
<p><strong>源码：</strong></p>
<pre><code><!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>
</code></pre>
<p>querySelector三种方法介绍</p>
<h3 id="鼠标滑动更改内容-onmouseover">鼠标滑动更改内容 onmouseover</h3>
<p><strong>关键：</strong><br>
onmouse事件</p>
<pre><code><!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>
</code></pre>
<h3 id="时间自动更新">时间自动更新</h3>
<p><strong>关键代码：</strong><br>
Js中内置了Date对象</p>
<ul>
<li>getFullYear 年</li>
<li>getMonth 月</li>
<li>getDate 日</li>
<li>getHours 小时</li>
<li>getMinutes 分钟</li>
<li>getSeconds 秒</li>
<li>getDay 星期几（0-6） 星期日为0</li>
</ul>
<table>
<thead>
<tr>
<th>方法</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>getFullYear()</td>
<td>从 Date 对象以四位数字返回年份。</td>
</tr>
<tr>
<td>getMonth()</td>
<td>从 Date 对象返回月份 (0 ~ 11)。</td>
</tr>
<tr>
<td>getDate()</td>
<td>从 Date 对象返回一个月中的某一天 (1 ~ 31)。</td>
</tr>
<tr>
<td>getDay()</td>
<td>从 Date 对象返回一周中的某一天 (0 ~ 6)。</td>
</tr>
<tr>
<td>getHours()</td>
<td>返回 Date 对象的小时 (0 ~ 23)。</td>
</tr>
<tr>
<td>getMinutes()</td>
<td>返回 Date 对象的分钟 (0 ~ 59)。</td>
</tr>
<tr>
<td>getSeconds()</td>
<td>返回 Date 对象的秒数 (0 ~ 59)。</td>
</tr>
<tr>
<td>getMilliseconds()</td>
<td>返回 Date 对象的毫秒(0 ~ 999)。</td>
</tr>
<tr>
<td>toString()</td>
<td>把 Date 对象转换为字符串。</td>
</tr>
<tr>
<td>toTimeString()</td>
<td>把 Date 对象的时间部分转换为字符串。</td>
</tr>
<tr>
<td>toDateString()</td>
<td>把 Date 对象的日期部分转换为字符串。</td>
</tr>
<tr>
<td>toUTCString()</td>
<td>根据世界时，把 Date 对象转换为字符串。</td>
</tr>
<tr>
<td>toLocaleString()</td>
<td>根据本地时间格式，把 Date 对象转换为字符串。</td>
</tr>
<tr>
<td>toLocaleTimeString()</td>
<td>根据本地时间格式，把 Date 对象的时间部分转换为字符串。</td>
</tr>
<tr>
<td>toLocaleDateString()</td>
<td>根据本地时间格式，把 Date 对象的日期部分转换为字符串。</td>
</tr>
</tbody>
</table>
<pre><code> var now = new Date();
var time =now.getFullYear() + '年' + now.getMonth() + '月'
+ now.getDate() + '日'
+now.getHours() +'时' + now.getMinutes() +'分' + now.getSeconds() + '秒';
</code></pre>
<ol>
<li>setTomeout(fn, 周期：豪秒): 周期只会执行一次</li>
<li>setInterval(fn, 周期：豪秒)： 间隔周期一直执行</li>
</ol>
<p><strong>源码：</strong></p>
<pre><code><!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>
</code></pre>
<p><strong>源码（es拼接字符串）：</strong></p>
<pre><code><!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>
</code></pre>
<h3 id="表单">表单</h3>
<p>关键代码：<code>e.checked=true;</code></p>
<p><strong>全选和反选的实现</strong></p>
<pre><code><!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.checked = true;
} else {
hobbys.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.checked = !hobbys.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>
</code></pre>
</div>
<div id="MySignature" role="contentinfo">
<hr>
<span>提问之前，请先看</span>提问须知
<span>点击右侧图标发起提问</span>
<img border="0" src="http://wpa.qq.com/pa?p=2:1053894518:52" alt="联系我" title="联系我">
<span>或者加入QQ群一起学习</span>
<img border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="Stars-One安卓学习交流群" title="Stars-One安卓学习交流群">
TornadoFx学习交流群:1071184701
<img src="https://img2020.cnblogs.com/blog/1210268/202003/1210268-20200316120825333-1551152974.png" width="1000" height="auto">
<img src="https://img2018.cnblogs.com/blog/1210268/201905/1210268-20190508151523126-971809604.gif" width="1000" height="auto">
<!--<img src="https://img2020.cnblogs.com/blog/1210268/202004/1210268-20200413161422035-1188549898.gif" width="1000" height="auto">--><br><br>
来源：https://www.cnblogs.com/stars-one/p/11105777.html
頁:
[1]