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. 安装mysql8.0.17时候报错1251-Client does not support authentication protocol requested by server; consider upgrading MySQL client

    当mysql数据库安装时候选择的是加密密码时候,用navicat连接时候报错1521,这时候可以cmd之后登陆mysql执行下列代码就可以了 代码: mysql> alter user root ...

  2. VSphere服务器ESXI4.1.0设置虚拟主机来电开机自启动

    vSphere服务器ESXI设置虚拟主机来电自启动 首先查看我自己VMware vSphere版本为4.1.0(需要在虚拟主机电源为关闭状态下编辑) 然后双击主机,点击配置---虚拟机启动/关机 点击 ...

  3. linux中常用的60个命令及作用详解

    Linux 必学的 60 个命令 Linux 提供了大量的命令,利用它可以有效地完成大量的工作,如磁盘操作.文件存取.目录操作.进程管理.文件权限设定等.所以,在 Linux 系统上工作离不开使用系统 ...

  4. Nacos 配置中心原理分析

    我们从原生SDK代码中入手,可以发现最核心的两行代码: ConfigService configService=); 首先我们先来看 NacosFactory.createConfigService ...

  5. 一个 Java 字符串到底有多少个字符?

    来源:http://dwz.win/jqd 依照Java的文档, Java中的字符内部是以UTF-16编码方式表示的,最小值是 \u0000 (0),最大值是\uffff(65535), 也就是一个字 ...

  6. yield-Python大牛必须掌握的高端语法

    小白:大牛哥,刚才看到有一个函数不使用return返回结果,而是使用yield关键字返回结果,看不太明白,Python中yield关键字的用途是什么,它有什么作用呀? 大牛: 要想理解yield的作用 ...

  7. 手写ORM持久层框架（转）

    工程结构: 本文测试的数据库为: 其中student的表结构为: 表数据: 配置文件 DB2.properties driver=com.mysql.jdbc.Driver url=jdbc\:mys ...

  8. Codeforces Round #503 (by SIS, Div. 2) C. Elections （暴力+贪心）

    [题目描述] Elections are coming. You know the number of voters and the number of parties — n and m respe ...

  9. usleep和sleep

    usleep 和 sleep 都是用于将进程挂起, 所不同的是前者在微秒级别, 后者在秒级别.

  10. JavaScript基础7——动态生成表格

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...