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. Markdown编辑器editor.md的使用

      目录(?)[-] 一Markdown和editormd简介 二editormd的使用 1下载 2简单使用 21在自己的页面上引入相关的css和js代码如下 22在自己的页面中加上DIV 23在同页 ...

  2. nvm-windows编译源码 go遇到的问题

    异常: Microsoft Windows [Version 10.0.17134.1006] (c) Microsoft Corporation. All rights reserved. C:\U ...

  3. 5G调研与总结

    5G的重点是: 将极大地超越现有的4G,主要包括速度,时延,带宽,能耗等方面 传输速度的快速提高(相对于4G来说提升了近10倍),在万物物联上的作用会更大 由于传速度快,让各种远程操控成为了可能(AR ...

  4. Temporal-Difference Control: SARSA and Q-Learning

    SARSA SARSA algorithm also estimate Action-Value functions rather than State-Value function. The dif ...

  5. 安全运维 - Linux系统攻击应急响应

    Linux 应急相应 - 总纲 应急准备: 制定应急策略 组建应急团队 其他应急资源 安全事件处理: 痕迹数据获取 分析.锁定攻击源删除可疑账号关闭异常进程.端口禁用相应异常开机启动项删除异常定时任务 ...

  6. MySQL的练习

    mysql登录:方法1:使用Command Line Client登录,缺点:不显示报错信息 方法2:使用cmd登录(cmd的常用:查看ip地址:ipcongfi-----定时关机:shutdown ...

  7. Linux安装软件-CentOS和Ubuntu介绍

    开发十年,就只剩下这套架构体系了! >>>   不同Linux发行版的软件安装会有不同的方式,其中CentOS安装软件的主要方式是rpm和yum,Ubuntu可以使用apt-get, ...

  8. 微信小程序wxss制作扭蛋机

    小程序制作扭蛋机 2019-09-24 13:26:53 公司要制作活动小程序,其中有一个扭蛋机的效果实现抽奖的功能.在网上找了好久竟没有找到(不知道是不是我找代码的方式有问题).最后还是自己做一个吧 ...

  9. 在navcat中清空数据后，设置id归零方法

    写后台完成后,需要清空Mysql数据库中的测试数据,但是后面新增的数据,一直是以原来所删除数据的最大id为增量基本,比如,对于一些id敏感的项,十分不便,如图 原有10条数据,清空后,新增一两条,手动 ...

  10. 从后台看python--为什么说python是慢的

    python越来越作为一种科学技术研究的语言越来越流行,可是我们经常听到一个问题,python是慢的.那么我们从后台分析一下,为什么python是慢的. python是一种动态类型,解释型语言,它的值 ...