当前位置：网站首页>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>边栏推荐
- 世界肝炎日 | 基层也能享受三甲资源，智慧医疗系统如何解决“看病难”？
- II. Explanation of the sequence and deserialization mechanism of redistemplate
- 基于Xception-TD的中华传统刺绣分类模型构建
- get和post的区别
- 系统分析师
- What technology is needed for applet development
- 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 ）
- Construction of Chinese traditional embroidery classification model based on xception TD
- PCB材料简单介绍
- 从 Web3到Web2.5，是倒退还是另辟蹊径？
猜你喜欢
Matlab from introduction to mastery Chapter 1 Introduction to matlab
纳米金偶联抗体/蛋白试剂盒（20nm，1mg/100μg/500 μg偶联量）的制备
PCB材料简单介绍
从 Web3到Web2.5，是倒退还是另辟蹊径？
Zhuzhou Jiufang middle school carried out drowning prevention and fire safety education and training activities
For the first time, Chinese scientists used DNA to construct convolutional artificial neural network, which can complete 32 types of molecular pattern recognition tasks, or be used for biomarker signa
微信小程序开发公司你懂得选择吗？
Data interpolation -- normalize data of different magnitude
Nano gold coupled antibody / protein Kit (20nm, 1mg/100 μ g/500 μ G coupling amount) preparation
熊市下 DeFi 的未来趋势
随机推荐
Esp8266 Arduino programming example - deep sleep and wake up
Hold high the two flags of 5g and AI: Ziguang zhanrui Market Summit is popular in Shencheng
基于Xception-TD的中华传统刺绣分类模型构建
中国科学家首次用DNA构造卷积人工神经网络，可完成32类分子模式识别任务，或用于生物标志物信号分析和诊断
Soft test --- database (3) data operation
行内元素和块级元素有什么区别？语义化作用
怎样巧用断言+异常处理类，使代码更简洁！（荣耀典藏版）
Apple M1 processor details: performance and energy efficiency have doubled, and Intel Core i9 is no match!
get和post的区别
第三方软件测试机构提供哪些测试服务?软件测试报告收费标准
What technology is needed for applet development
Getting started with Oracle
分而治之，大型文件分片上传
typeof原理
How many tips do you know about using mock technology to help improve test efficiency?
display 各值的区别
数据插值——对不同量级的数据进行归一化
数据可视化新闻，不一样的新闻报道形式
Storage and steps of phospholipid coupled antibody / protein Kit
纳米金偶联抗体/蛋白试剂盒（20nm，1mg/100μg/500 μg偶联量）的制备