当前位置：网站首页>JS DOM编程之平平无奇小练习
JS DOM编程之平平无奇小练习
2022-07-28 20:19:00 【Carry lsh】
提示：以下所有代码只需套入到此模板中即可正常运行（初学JS记录一下哈哈）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js</title>
</head>
<body>
//没错就是放到这里
</body>
</html>一、鼠标移动到h1上，变化h1中的文字内容，离开h1之后又变回原本的内容
<h1 style="width: 200px; height: 100px; background-color: chartreuse;" align="center" onmouseover="handleMouseOver()" onmouseout="handleMouseOut()">把鼠标移到上面</h1>
<script type="text/javascript">
function handleMouseOver(){
let h=document.querySelector("h1");
h.innerHTML="谢谢";
}
function handleMouseOut(){
let h=document.querySelector("h1");
h.innerHTML="把鼠标移到上面";
}
</script>二、点击什么是受益人文字，并显示下边的文字内容
<p onclick="handleClick()" style="font-size: 60px; font-weight: 800;">什么是受益人</p>
<script type="text/javascript">
function handleClick(){
let h=document.querySelector("p");
h.innerHTML="什么是受益人<br><b style='font-size: 20px;'>解答：<b style='font-size: 17px; font-weight: 300;'>受益人就是得得得得得得得得得得得";
h.style.fontSize="30px";
}
</script>四、完善复选框的功能，实现全选、取消选中和反选。
<table border="1">
<thead>
<tr>
<td>
<input type="submit" value="删除选中" onclick="calcelSelect()">
</td>
<td>
姓名
</td>
<td>
年龄
</td>
<td>
性别
</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="ids" value="1">
</td>
<td>张叔</td>
<td>18</td>
<td>男</td>
<td>
<a href="">删除</a>
<a href="">更新</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="ids" value="2">
</td>
<td>李哥</td>
<td>18</td>
<td>男</td>
<td>
<a href="">删除</a>
<a href="">更新</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="ids" value="3">
</td>
<td>红姐</td>
<td>16</td>
<td>女</td>
<td>
<a href="">删除</a>
<a href="">更新</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="ids" value="4">
</td>
<td>小V</td>
<td>18</td>
<td>男</td>
<td>
<a href="">删除</a>
<a href="">更新</a>
</td>
</tr>
<tr>
<td colspan="5">
<input type="button" value="全选" onclick="selectAll()">
<input type="button" value="全不选" onclick="unselectAll()">
<input type="button" value="反选" onclick="reverseSelect()">
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
function selectAll(){
let checkboxs = document.querySelectorAll("input[type='checkbox']");
for(let i=0;i<checkboxs.length;i++){
checkboxs[i].checked = true;
}
}
function unselectAll(){
let checkboxs = document.querySelectorAll("input[type='checkbox']");
for(let i=0;i<checkboxs.length;i++){
checkboxs[i].checked = false;
}
}
function reverseSelect(){
let checkboxs = document.querySelectorAll("input[type='checkbox']");
for(let i=0;i<checkboxs.length;i++){
checkboxs[i].checked=!checkboxs[i].checked;
}
}
function calcelSelect(){
let checkboxs = document.querySelectorAll("input[type='checkbox']");
for(let i=0;i<checkboxs.length;i++){
checkboxs[i].checked=false;
}
}
</script>五、完善图片切换功能（点击轮换）
<img src="images/1.jpg" width="300px"height="300px">
<button onclick="changeImg()">切换</button>
<script type="text/javascript">
var i=1;
function changeImg(){
i++;
if(i==4){
i = 1;
}
var imgDom = document.querySelector("img");
imgDom.src="images/"+i+".jpg";
}
</script>六、默认是关灯图片，鼠标移动到图片上变成亮灯图片，鼠标离开变回关灯图片
<img src="images/bulb_off.png" onmouseover="handleMouseOver()" onmouseout="handleMouseOut()">
<script type="text/javascript">
function handleMouseOver(){
let h=document.querySelector("img");
h.src="images/bulb_on.png";
}
function handleMouseOut(){
let h=document.querySelector("img");
h.src="images/bulb_off.png";
}
</script>点击也能实现灯亮灯灭
<img src="images/bulb_off.png" onclick="handleClick()">
<script type="text/javascript">
let i=0;
function handleClick(){
i++;
let h=document.querySelector("img");
if(i%2!=0){
h.src="images/bulb_on.png";
}else{
h.src="images/bulb_off.png";
}
}
</script>七、表单校验功能，当失去焦点时，如果用户名或密码为空，在其后添加提醒信息
<form action="https://www.baidu.com" onsubmit="return checkForm()">
用户名：<input type="text" name="username" onblur="checkUsername()" /><span id="usernameSpan"></span><br />
密码：<input type="password" name="pwd1" onblur="checkPwd1()" /><span id="pwd1Span"></span><br />
<input type="submit" />
</form>
<script type="text/javascript">
function checkForm(){
let r1=checkUsername();
let r2=checkPwd1();
let r3=checkPwd2();
return r1&&r2&&r3;
}
function checkUsername(){
let usernameDom = document.querySelector("input[name='username']");
let spanDom = document.querySelector("#usernameSpan");
if(usernameDom.value.trim().length<=0){
spanDom.innerHTML="<b style='color: red;'>*用户名不能为空";
return false;
}else{
spanDom.innerHTML='';
return true;
}
}
function checkPwd1(){
let pwd1Dom = document.querySelector("input[name='pwd1']");
let spanDom = document.querySelector("#pwd1Span");
if(pwd1Dom.value.trim().length <= 0){
spanDom.innerHTML = "<b style='color: red;'>*密码不能为空";
return false;
}else{
spanDom.innerHTML = "";
return true;
}
}
</script>八、 select中初始为空，单击河南 按钮时，显示河南省城市信息。单击河北按钮时，显示河北省城市信息：石家庄、保定、承德、邯郸
<button onclick="henan()">河南</button><button onclick="hebei()">河北</button><br/>
<select width="80px">
<option selected>郑州</option>
<option>开封</option>
<option>洛阳</option>
<option>南阳</option>
</select>
</body>
<script>
function henan() {
var opt=document.querySelector("select")
opt.innerHTML="<option>郑州</option>"+"<option>开封</option>"+"<option>洛阳</option>"+"<option>南阳</option>"
}
function hebei() {
var opt=document.querySelector("select")
opt.innerHTML="<option>石家庄</option>"+"<option>保定</option>"+"<option>承德</option>"+"<option>邯郸</option>"
}
</script>九、操作表格，每点击一次添加，就在表格中生成一行
<table border="1" cellpadding="">
<thead>
<tr>
<td>用户名</td>
<td>密码</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="user"></td>
<td><input type="password" name="pwd"></td>
<td><button>确定</button></td>
</tr>
<tr>
<td><input type="text" name="user"></td>
<td><input type="password" name="pwd"></td>
<td><button>确定</button></td>
</tr>
<tr></tr>
</tbody>
</table>
<button onclick="add()">添加</button>
<script>
var i=1;
function add() {
var add=document.querySelector("tbody")
add.innerHTML += '<tr><td><input type="text" name="user"></td>' +
' <td><input type="password" name="pwd"></td>' +
' <td><button>确定</button></td></tr>'
}
</script>十、显示当前时间，点击按钮，显示当前系统时间
<script type="text/javascript">
function gettime(){
var date = new Date();
var strDate = date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate()+' '+date.getHours()+':'+date.getMinutes()+':'+date.getSeconds();
document.getElementById("time").innerHTML = strDate;
}
</script>
<button type="button" onclick="gettime()">这是按钮</button>
<h1 id="time"></h1>十一、图片放大和缩小
这里我要说一下，这个代码运行时第一次放大会出现只扩展高度，不扩展宽度的问题，咱也不晓得怎么回事，有知道的大佬，路过可以评论区指正一下，感谢感谢
<img src="images/3.jpg" id="m1"/>
<button type="button" onclick="ImageSuofang1(true)" value="">大大大</button>
<button type="button" onclick="ImageSuofang1(false)" value="">小小小</button>
<script type="text/javascript">
function ImageSuofang1(flag){
var im=document.getElementById('m1');
if(flag){
im.width=im.width*2;
im.height=im.height*2;
}else{
im.width=im.width/2;
im.height=im.height/2;
}
}
</script>十二、点击切换验证码
<h2>点击切换验证码</h2>
<div id="" style="width: 100px;height: 50px;background-color: green;line-height: 50px;" onclick="handleEvent()" align="center" ></div>
<script type="text/javascript">
var div = document.querySelector("div");
var inp = document.getElementsByTagName("input")[0];
var btn = document.getElementsByTagName("button")[0];
div.innerHTML = ranFun(1000, 9999);
function handleEvent(){
div.innerHTML = ranFun(1000, 9999);
}
function ranFun(a, b) {
return Math.floor(Math.random() * (b - a + 1) + a);
}
</script>边栏推荐
猜你喜欢
中国农业工程学会农业水土工程专业委员会-第十二届-笔记
如何高效、精准地进行图片搜索？看看轻量化视觉预训练模型
PCB材料简单介绍
How is nanoid faster and more secure than UUID implemented? (glory Collection Edition)
Miscellaneous records of powersploit, evaluation, weevery and other tools in Kali
![[hero planet July training leetcode problem solving daily] dynamic planning on the 28th](/img/79/bc763bb6f12c525454abda18be4265.png)
[hero planet July training leetcode problem solving daily] dynamic planning on the 28th
RHCSA第一天
Construction of Chinese traditional embroidery classification model based on xception TD
比UUID更快更安全NanoID到底是怎么实现的？（荣耀典藏版）
90. 子集 II
随机推荐
ESP8266-Arduino编程实例-深度休眠与唤醒
39. 组合总和
第 7 篇：绘制旋转立方体
融合LSTM与逻辑回归的中文专利关键词抽取
Open earphone which air conduction earphone with good sound quality and recognized sound quality is recommended
Esp8266 Arduino programming example - deep sleep and wake up
Save 70% of the video memory and increase the training speed by 2 times! Zheda & Ali proposed online convolution re parameterization orepa, and the code has been open source! （CVPR 2022 ）
Research on intangible cultural heritage image classification based on multimodal fusion
Log slimming operation: how to optimize from 5g to 1g! (glory Collection Edition)
网格数据生成函数meshgrid
PCB材料简单介绍
Wechat applet development company, do you know how to choose?
The University was abandoned for three years, the senior taught himself for seven months, and found a 12K job
No swagger, what do I use?
90. 子集 II
中国农业工程学会农业水土工程专业委员会-第十二届-笔记
Rhcsa first day
Apifox：满足你对 Api 的所有幻想
Lt7911d type-c/dp to Mipi scheme is mature and can provide technical support
I have been in the industry for 4 years and changed jobs twice. I have understood the field of software testing~