Js点击事件——美女合集

实例

效果如下图：

代码如下：

<!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>

定义和用法

onclick 事件会在对象被点击时发生。

请注意， onclick 与 onmousedown 不同。单击事件是在同一元素上发生了鼠标按下事件之后又发生了鼠标放开事件时才发生的。

语法

HTML 中:

<element onclick="SomeJavaScriptCode">

JavaScript 中:

object.onclick=function(){SomeJavaScriptCode};

支持该事件的 HTML 标签：

<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>

支持改事件的 JavaScript 对象：

button, document, checkbox, link, radio, reset, submit

实例

代码如下：

<!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>

运行效果如下图：

持续更新，欢迎大家指教！

JavaScript点击事件——美女合集的更多相关文章

  1. Javascript 语言精粹 代码片段合集

    Javascript 语言精粹 代码片段合集 标签:Douglas-Crockford Javascript 最佳实践 原文链接 更好的阅读体验 使用一个method 方法定义新方法 Function ...

  2. 大量Javascript/JQuery学习教程电子书合集

    ［推荐分享］大量Javascript/JQuery学习教程电子书合集,送给有需要的人   不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小   15天学会jQuery(完整版).pd ...

  3. CSS伪类选择器active模拟JavaScript点击事件

    一.说明 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式. IE7及更早浏览器只支持a元素的:active,从IE8开始支持其它元素的:active. 另:如果需要给超链接定义:访问前 ...

  4. JavaScript点击事件-一个按钮触发另一个按钮

    <input type="button" value="Click" id="C" onclick="Go();" ...

  5. JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题

    javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbi ...

  6. EXCUTE JAVAScript点击事件

    # Execute Javascript document.getElementsByClassName('chooseFile')[${index}].arguments[0].click(); # ...

  7. JavaScript 点击事件的三种写法

    嵌入式 <button οnclick='alert("hello")'>点击按钮</button> 脚本模型 btn.onclick=function() ...

  8. JavaScript简易事件触发合集

    1.<input id="billing" type="text" placeholder="123" onkeyup="t ...

  9. MUI+html5+javascript 点击事件触发页面间传值

    关于如何进行页面转跳,请看 https://www.cnblogs.com/JUNELITTLEPANDA/p/15956176.html,以下跳转方法是采用的其中一种 1-  仅适用于移动端,pc端 ...

随机推荐

  1. 关于服务器无法在已发送http表头之后设置状态问题

    Response.ClearHeaders()方法 ClearHeaders方法只删除头信息,而不删除Response显示输出信息. this.Response.BufferOutput = true ...

  2. String hashCode 这个数字，很多人不知道！

    作者:coolblog segmentfault.com/a/1190000010799123 1. 背景 某天,我在写代码的时候,无意中点开了 String hashCode 方法.然后大致看了一下 ...

  3. python学习第四十三天生成器和next()关联

    我们在用列表生成式的时候,如果有一百万的数据,内存显然不够用,这是python想要什么数据,就生产什么数据给你,就产生了生成器,下面简单讲述生成器用法 1,生成器的用法 a=([a*a for a i ...

  4. 如何在CentOS 7上安装newman

    前提:先安装nodejs,详见:如何在CentOS 7上安装Node.js和npm #sudo npm install -g newman 结果: /usr/local/bin/newman -> ...

  5. Python2/3 安装各类包的教程

    1.pycryptodome(pyCrypto) pyCrypto包已经失效了,需要替换为pycryptodome 有SSR直接 pip install pycryptodome 国内用 pip in ...

  6. GitHub上更新原有的项目代码（二）

    转载自:https://blog.csdn.net/dayewandou/article/details/79175783 项目上传了,现在又写了一些内容想要跟新到项目上去,怎么更新呢? 首先进入项目 ...

  7. 通过利用immutability的能力编写更安全和更整洁的代码

    通过利用immutability的能力编写更安全和更整洁的代码 原文:Write safer and cleaner code by leveraging the power of "Imm ...

  8. python 安装 pip ，并使用pip 安装 filetype

    闲话少说,直接上操作. python版本为2.7.6 可以直接到官网下载,我也提供一个百度云的下载地址 https://pan.baidu.com/s/1kWPXG8Z 这个是window版本,lin ...

  9. SIGINT、SIGQUIT、 SIGTERM、SIGSTOP区别

    2) SIGINT程序终止(interrupt)信号, 在用户键入INTR字符(通常是Ctrl-C)时发出,用于通知前台进程组终止进程. 3) SIGQUIT和SIGINT类似, 但由QUIT字符(通 ...

  10. 阿里P7前端需要哪些技能

    原谅我copy过来的,但是这个条理很清楚很有借鉴意义 前言 以下是从公众号的文章中获取到的一位阿里的前端架构师整理的前端架构p7的技能图谱,当然不是最完整.最系统的,所以之后我会一直维护更新这里的内容 ...