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. VS2008 项目启动时报：“无法直接启动带有类库输出类型的项目”

    解决办法一: 右击要解决方案项目--属性-通用属性—单启动项目 解决方法二:直接选中界面类,右击设为启动项目, 如果还是这样,那么在此项目上按右键 (VS2010的资源管理工具中),点属性,更改设置.

  2. [Python3] 013 集合：你不能两次进入同一个集合

    目录 0. 集合的独白 1. 集合的创建 2. 集合的特性 (1) 概述 (2) 少废话,上例子 3. 集合的遍历 4. 集合内涵 5. 集合的内置方法 6. 可供集合使用的一些方法/函数 (1) 又 ...

  3. shutdown的几种方法和利弊

    1.shutdown normal      正常方式关闭数据库. 2.shutdown immediate      立即方式关闭数据库.      在SVRMGRL中执行shutdown imme ...

  4. 洛谷 - P3391 【模板】文艺平衡树（Splay） - 无旋Treap

    https://www.luogu.org/problem/P3391 使用无旋Treap维护序列,注意的是按顺序插入的序列,所以Insert实际上简化成直接root和Merge合并,但是假如要在序列 ...

  5. 成为k8s大佬，从这个操作开始(伪) - 程序员学点xx 42 k8s

    目录 Kubernetes -2- 这是yann的第97篇分享 本日状态: ​ 饿着肚子写公众号的 yann 同学. 第 1 部分 反省 昨天的内容被熊哥批评了. 熊哥说,「你光想着自己爽,一句我认为 ...

  6. python学习笔记(13):python并发编程以及系统常用模块

    一.进程与线程 1.进程:程序的一次执行(程序装载入内存,系统分配资源运行).n 每个进程有自己的内存空间.数据栈等,只能使用进程间通讯,而不能直接共享信息 2.线程:所有线程运行在同一个进程中,共享 ...

  7. 【推荐系统】知乎live入门1.推荐概览与框架

    参考链接 [推荐系统]知乎live入门 目录 1.推荐概览与框架 2. 推荐系统的架构和模块 3. 推荐召回 4. 排序 5. 用户画像 6. 特征工程 7. 回归到推荐算法 总结 参考文献 ==== ...

  8. vue项目上传到OSS

    1.输入阿里云登陆地址 http://signin.aliyun.com/1987179281335458/login.htm 登陆地址 阿里云账号    2.选择对象oss,建议文件夹   3.将文 ...

  9. Cocos2d-x视频教程

    目录 1. 我的技术专栏 2. 相关推荐 3. 下载链接 4. cocos2d-xx Lua+JS+C++教学视频 5. 杨丰盛Cocos2D-X游戏课程 6. [Cocos2d-x]塔防游戏开发实战 ...

  10. Java版基于SpringBoot+Vue.js实现自动创表自动定时采集(各个微信公众号商城产品进行采集)-爬虫篇