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. Shell脚本中单引号(‘)和双引号(“)的使用区别

    在Linux操作系统上编写Shell脚本时候,我们是在变量的前面使用$符号来获取该变量的值,通常在脚本中使用”$param”这种带双引号的格式,但也有出现使用'$param'这种带引号的使用的场景,首 ...

  2. C++笔记（6）——关于OJ的单点测试和多点测试

    单点测试 PAT使用的就是单点测试(LeetCode应该也是单点测试).单点测试中系统会判断每组数据的输出结果是否正确,正确则通过测试并获得这则测试的分值.题目的总得分等于通过的数据的分值之和. 代码 ...

  3. 一件很奇怪的事关于Nuget包

    两个项目 A,B 分别引用了Newtonsoft.Json.dll A项目有引用B项目. A B 项目引用Newtonsoft.Json.dll文件源路径是相同的.但是经常报版本不匹配. 之后经过细心 ...

  4. Java高级数据类型转换：包装类、String字符串、Date类等与其他类型转换

    1.包装类过渡类型转换 一般情况下,我们首先声明一个变量,然后生成一个对应的包装类,就可以利用包装类的各种方法进行类型转换了.例如: 当希望把float型转换为double型时: float f1=1 ...

  5. PTA第二题

    #include<string.h> #include<stdio.h> #include<malloc.h> ]; ][]={"ling",& ...

  6. python 定义模块作用及分类

    python把一个功能的模块归类,简单来说,模块是一个由Python代码组成的文件.模块可以定义函数,类和变量. 模块还可以包括可运行的代码. 1,python模块的作用 提高代码的方便维护 使用模块 ...

  7. win32 socket编程（五）——客户端实例(TCP)

    一.客户端操作流程 1.1 加载套接字库(WSAStartup()) 1.2创建套接字(socket()). 1.3向服务器发出连接请求(connect()). 对于客户端来说,它不需要绑定,可以直接 ...

  8. 提升JAVA代码的好“味道”

    让代码性能更高 需要 Map 的主键和取值时,应该迭代 entrySet() 当循环中只需要 Map 的主键时,迭代 keySet() 是正确的.但是,当需要主键和取值时,迭代 entrySet() ...

  9. mysql安装，卸载； 库和表的基础操作

    数据库  """ 1.什么是数据库:管理数据的系统 - 安装某种管理数据的系统 - 管理的对象本质是文件 2.存储数据的位置:内存.硬盘 3.什么是系统:运行在硬件基础上 ...

  10. PHP表单数组的具体使用方法介绍

    < input name="a[]" value="1" /> < input name="a[]" value=&quo ...