Js click event - Beauty Collection
Examples
Results as shown :
code show as below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Js 美女合集</title>
<style>
* {
padding: 0;
margin: 0;
}
body{
background: #000;
}
.parent {
width: 500px;
margin: 20px auto;
}
.parent .pic {
width: 100%;
height: 400px;
}
.parent .pic img {
width: 100%;
height: 100%;
}
.box {
display: flex;
}
.box div {
flex: 1;
text-align: center;
line-height: 100px;
color: #fff;
}
.box div input {
width: 80px;
height: 30px;
border-radius: 5px;
}
#txt{
color: red;
font-size: 24px;
}
</style>
</head>
<body>
<div class="parent">
<div class="pic">
<img src="1.jpg" alt="" id="pic">
</div>
<div class="box">
<div>
<input type="button" value="上一张" id="btnLast">
</div>
<div>
第 <span id="txt">1</span> 张
</div>
<div>
<input type="button" value="下一张" id="btnNext">
</div>
</div>
</div>
<script>
var index = 1;
document.getElementById("btnNext").onclick = function () {
if (index < 14) {
index++;
}
document.getElementById("txt").innerHTML=index;
document.getElementById("pic").src = index + ".jpg";
};
document.getElementById("btnLast").onclick = function () {
if (index > 1) {
index--;
}
document.getElementById("txt").innerHTML=index;
document.getElementById("pic").src = index + ".jpg";
};
</script>
</body>
</html>Definition and Usage
onclick event occurs when the object is clicked.
Please note, onclick and onmousedown different. Click event occurs when the mouse is on the same element after pressing the mouse event took place in open events.
grammar
In HTML:
<element onclick="SomeJavaScriptCode">JavaScript 中:
object.onclick=function(){SomeJavaScriptCode};HTML tags support of the event:
<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>,
<caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>,
<form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>,
<li>, <map>, <object>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>,
<strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>,
<thead>, <tr>, <tt>, <ul>, <var>Support JavaScript objects change events:
button, document, checkbox, link, radio, reset, submitExamples
code show as below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Js 美女合集</title>
<style>
* {
padding: 0;
margin: 0;
}
body{
background: #000;
}
.parent {
width: 500px;
margin: 20px auto;
}
.parent .pic {
width: 100%;
height: 400px;
}
.parent .pic img {
width: 100%;
height: 100%;
}
.box {
display: flex;
}
.box div {
flex: 1;
text-align: center;
line-height: 100px;
color: #fff;
}
.box div input {
width: 80px;
height: 30px;
border-radius: 5px;
}
#txt{
color: red;
font-size: 24px;
}
</style>
</head>
<body>
<div class="parent">
<div class="pic">
<img src="1.jpg" alt="" id="pic">
</div>
<div class="box">
<div>
<input type="button" value="上一张" id="btnLast">
</div>
<div>
第 <span id="txt">1</span> 张
</div>
<div>
<input type="button" value="下一张" id="btnNext">
</div>
</div>
</div>
<script>
var index = 1;
var txt=document.getElementById("txt");
var pic= document.getElementById("pic");
document.getElementById("btnNext").onclick = function () {
if (index < 14) {
index++;
}
txt.innerHTML=index;
document.getElementById("pic").src = index + ".jpg";
};
document.getElementById("btnLast").onclick = function () {
if (index > 1) {
index--;
}
txt.innerHTML=index;
pic.src = index + ".jpg";
};
</script>
</body>
</html>FIG operating results as follows: