当前位置：网站首页>Ordinary practice of JS DOM programming
Ordinary practice of JS DOM programming
2022-07-28 22:10:00 【Carry lsh】
Tips ： All of the following code can run normally just by inserting it into this template （ Beginners JS Record it, ha ha ）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js</title>
</head>
<body>
// Yeah, right here
</body>
</html>One 、 Move the mouse to h1 On , change h1 The text in , Leave h1 Then it changes back to the original content
<h1 style="width: 200px; height: 100px; background-color: chartreuse;" align="center" onmouseover="handleMouseOver()" onmouseout="handleMouseOut()"> Move the mouse over </h1>
<script type="text/javascript">
function handleMouseOver(){
let h=document.querySelector("h1");
h.innerHTML=" thank you ";
}
function handleMouseOut(){
let h=document.querySelector("h1");
h.innerHTML=" Move the mouse over ";
}
</script>Two 、 Click on what is the beneficiary text , And display the text content below
<p onclick="handleClick()" style="font-size: 60px; font-weight: 800;"> What is the beneficiary </p>
<script type="text/javascript">
function handleClick(){
let h=document.querySelector("p");
h.innerHTML=" What is the beneficiary <br><b style='font-size: 20px;'> answer ：<b style='font-size: 17px; font-weight: 300;'> The beneficiary is getting what he gets ";
h.style.fontSize="30px";
}
</script>Four 、 Improve the function of the check box , Achieve all options 、 Uncheck and invert .
<table border="1">
<thead>
<tr>
<td>
<input type="submit" value=" Delete selected " onclick="calcelSelect()">
</td>
<td>
full name
</td>
<td>
Age
</td>
<td>
Gender
</td>
<td> operation </td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="ids" value="1">
</td>
<td> Uncle Zhang </td>
<td>18</td>
<td> male </td>
<td>
<a href=""> Delete </a>
<a href=""> to update </a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="ids" value="2">
</td>
<td> Brother Li </td>
<td>18</td>
<td> male </td>
<td>
<a href=""> Delete </a>
<a href=""> to update </a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="ids" value="3">
</td>
<td> Red sister </td>
<td>16</td>
<td> Woman </td>
<td>
<a href=""> Delete </a>
<a href=""> to update </a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="ids" value="4">
</td>
<td> Small V</td>
<td>18</td>
<td> male </td>
<td>
<a href=""> Delete </a>
<a href=""> to update </a>
</td>
</tr>
<tr>
<td colspan="5">
<input type="button" value=" Future generations " onclick="selectAll()">
<input type="button" value=" Totally unselected " onclick="unselectAll()">
<input type="button" value=" Reverse election " 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>5、 ... and 、 Improve the picture switching function （ Click rotation ）
<img src="images/1.jpg" width="300px"height="300px">
<button onclick="changeImg()"> Switch </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>6、 ... and 、 The default is to turn off the light , Move the mouse over the picture to turn it into a light picture , The mouse leaves and turns back to the light off picture
<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>Click to turn the light on and off
<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>7、 ... and 、 Form verification function , When you lose focus , If the user name or password is empty , Add a reminder after
<form action="https://www.baidu.com" onsubmit="return checkForm()">
user name ：<input type="text" name="username" onblur="checkUsername()" /><span id="usernameSpan"></span><br />
password ：<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;'>* The username cannot be empty ";
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;'>* The password cannot be empty ";
return false;
}else{
spanDom.innerHTML = "";
return true;
}
}
</script>8、 ... and 、 select Middle initial is empty , Click Henan Button , Display the city information of Henan Province . When you click the Hebei button , Display the city information of Hebei Province ： shijiazhuang 、 baoding 、 chengde 、 handan
<button onclick="henan()"> Henan </button><button onclick="hebei()"> hebei </button><br/>
<select width="80px">
<option selected> zhengzhou </option>
<option> kaifeng </option>
<option> luoyang </option>
<option> Nanyang </option>
</select>
</body>
<script>
function henan() {
var opt=document.querySelector("select")
opt.innerHTML="<option> zhengzhou </option>"+"<option> kaifeng </option>"+"<option> luoyang </option>"+"<option> Nanyang </option>"
}
function hebei() {
var opt=document.querySelector("select")
opt.innerHTML="<option> shijiazhuang </option>"+"<option> baoding </option>"+"<option> chengde </option>"+"<option> handan </option>"
}
</script>Nine 、 Operation form , Add every click , Just generate a row in the table
<table border="1" cellpadding="">
<thead>
<tr>
<td> user name </td>
<td> password </td>
<td> operation </td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="user"></td>
<td><input type="password" name="pwd"></td>
<td><button> determine </button></td>
</tr>
<tr>
<td><input type="text" name="user"></td>
<td><input type="password" name="pwd"></td>
<td><button> determine </button></td>
</tr>
<tr></tr>
</tbody>
</table>
<button onclick="add()"> add to </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> determine </button></td></tr>'
}
</script>Ten 、 Display current time , Click button , Display the current system time
<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()"> This is the button </button>
<h1 id="time"></h1>11、 ... and 、 Zoom in and out
Here I want to say , When this code runs The first magnification will only show the expansion height , The problem of not extending the width , We don't know what happened , Somebody who knows , You can correct it in the comment area , Thank you thank you
<img src="images/3.jpg" id="m1"/>
<button type="button" onclick="ImageSuofang1(true)" value=""> It's big </button>
<button type="button" onclick="ImageSuofang1(false)" value=""> Small </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>Twelve 、 Click to switch verification code
<h2> Click to switch verification code </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>边栏推荐
- Bugku，Web：都过滤了
- Oracle, SQL Foundation
- Future trend of defi in bear market
- 开放式耳机哪个品牌好、性价比最高的开放式耳机排名
- Nano gold coupled antibody / protein Kit (20nm, 1mg/100 μ g/500 μ G coupling amount) preparation
- Lt7911d type-c/dp to Mipi scheme is mature and can provide technical support
- 第三方软件测试机构提供哪些测试服务?软件测试报告收费标准
- 字节一面：TCP 和 UDP 可以使用同一个端口吗？
- LVS+KeepAlived高可用部署实战应用
- Esp8266 Arduino programming example - timer and interrupt
猜你喜欢
系统分析师
![[NLP] generate word cloud](/img/c4/4e9707bba58732a90d1c30312719a3.png)
[NLP] generate word cloud
Byte side: can TCP and UDP use the same port?
Research on intangible cultural heritage image classification based on multimodal fusion
Oracle database objects
拥抱开源指南
Aimbetter insight into your database, DPM and APM solutions
Part 8: creating camera classes
Data interpolation -- normalize data of different magnitude
Is it necessary to calibrate the fluke dtx-1800 test accuracy?
随机推荐
fluke dtx-1800测试精度有必要进行原厂校准吗？
openresty 请求鉴权
Soft test --- database (3) data operation
HYDAC溢流阀DB08A-01-C-N-500V
Embrace open source guidelines
Research on intangible cultural heritage image classification based on multimodal fusion
内网渗透学习（三）域横向移动——计划任务
拥抱开源指南
ESP8266-Arduino编程实例-深度休眠与唤醒
微信小程序开发公司你懂得选择吗？
Byte side: can TCP and UDP use the same port?
Oracle triggers
科大讯飞笔试
AimBetter洞察您的数据库,DPM 和 APM 解决方案
Using Baidu easydl to realize chef hat recognition of bright kitchen and stove
Two global variables__ Dirname and__ Further introduction to common functions of filename and FS modules
第 7 篇：绘制旋转立方体
Official document of kubevela 1.4.x
Leetcode · 581. shortest unordered continuous subarray · double pointer
Matlab from introduction to mastery Chapter 1 Introduction to matlab