当前位置：网站首页>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>边栏推荐
- typeof原理
- What is a prime factor? In number theory, a prime factor (prime factor or prime factor) refers to a prime number that can divide a given positive integer
- Oracle database objects
- kingbase中指定用户默认查找schema，或曰用户无法使用public schema下函数问题
- 如何在 Web3中建立一个去中心化社区
- Desai wisdom number - line chart (stacking area chart): ranking of deposits of different occupational groups in the proportion of monthly income in 2022
- What is the difference between inline elements and block level elements? Semantic function
- [cloud native kubernetes] mapping external service under kubernetes cluster eendpoint
- array_ diff_ The method of not comparing array values when Assoc element is an array
- hcip实验（14）
猜你喜欢
迪赛智慧数——折线图（堆叠面积图）：2022年不同职业人群存款额占月收入比例排名
Two global variables__ Dirname and__ Further introduction to common functions of filename and FS modules
Desai wisdom number - line chart (stacking area chart): ranking of deposits of different occupational groups in the proportion of monthly income in 2022
Getting started with Oracle
Object based real-time spatial audio rendering - Dev for dev column
No swagger, what do I use?
Openeuler embedded sig | distributed soft bus
DHCP和PPPoE协议以及抓包分析
Matlab from introduction to mastery Chapter 1 Introduction to matlab
系统分析师
随机推荐
Intranet penetration learning (III) horizontal movement of domain - planning tasks
HYDAC overflow valve db08a-01-c-n-500v
记录Flutter解决A RenderFlex overflowed by 7.3 pixels on the bottom溢出问题
腾讯云数据库负责人借了一亿元炒股？知情人士：金额不实
Openeuler embedded sig | distributed soft bus
Byte side: can TCP and UDP use the same port?
HCIP（14）
kali里的powersploit、evasion、weevely等工具的杂项记录
hcip实验（15）
Small program canvas generates posters
AimBetter洞察您的数据库,DPM 和 APM 解决方案
JS DOM编程之平平无奇小练习
04.toRef 默认值
No swagger, what do I use?
什么是质因数，质因数（素因数或质因子）在数论里是指能整除给定正整数的质数
如何在 Web3中建立一个去中心化社区
System Analyst
kingbase中指定用户默认查找schema，或曰用户无法使用public schema下函数问题
Object.prototype.toString.call()的原理
Esp8266 Arduino programming example - timer and interrupt