Js自定义多选框效果的实例代码


Posted in Javascript onJuly 05, 2017

前端入坑纪 27

工作中的一个多选效果,感觉不算太难,就上传来分享下。

Js自定义多选框效果的实例代码

以上图文,纯属测试,如有雷同,请勿当真

HTML 结构

<div id="selexWps" class="seletProds clear">
    <div>
      <span>积分<em>5000</em></span>
      ![](wrap/img/pic.png)
      <p>请选择</p>
    </div>
    <div>
      <span>积分<em>5000</em></span>
      ![](wrap/img/pic.png)
      <p>请选择</p>
    </div>
    <div>
      <span>积分<em>6000</em></span>
      ![](wrap/img/pic.png)
      <p>请选择</p>
    </div>
    <div>
      <span>积分<em>7000</em></span>
      ![](wrap/img/pic.png)
      <p>请选择</p>
    </div>
    <div>
      <span>积分<em>8000</em></span>
      ![](wrap/img/pic.png)
      <p>请选择</p>
    </div>
    <div>
      <span>积分<em>9000</em></span>
      ![](wrap/img/pic.png)
      <p>请选择</p>
    </div>
  </div>
  <div class="endBtnsWrp clear">
    <a class="endBtn" href="javascript:;" rel="external nofollow" rel="external nofollow" >积分:<em id="talval">0</em></a>
    <a class="endBtn" href="javascript:;" rel="external nofollow" rel="external nofollow" >结算</a>
  </div>

这真不晓得什么要特意说明,真要有的话,那底部的结算条,它是fixed 布局,固定在屏幕底部。

CSS 结构

body {
      padding: 0;
      margin: 0;
      background-color: #fff;
      padding-bottom: 60px;
    }

    p {
      padding: 0;
      margin: 0;
    }

    ul,
    li {
      padding: 0;
      margin: 0;
      list-style: none;
    }

    a {
      text-decoration: none;
      color: #525252;
    }

    .fl {
      float: left;
    }

    .fr {
      float: right;
    }

    .clear::after {
      display: block;
      content: "";
      clear: both;
    }

    .seletProds>div {
      float: left;
      position: relative;
      text-align: center;
      border: 2px solid #d8d8d8;
      box-sizing: border-box;
      width: 30%;
      margin: 1.666%;
    }

    .seletProds p {
      font-size: 14px;
      line-height: 37px;
      border-top: 2px solid #d8d8d8;
      text-align: center;
      background-color: #fff;
      color: #525252;
    }

    .seletProds>div img {
      width: 80%;
    }

    .seletProds>div span {
      position: absolute;
      top: 0;
      right: 0;
      background: rgba(255, 92, 92, 0.79);
      padding: 0 3px;
      color: #fff;
      height: 17px;
      font-size: 12px;
    }

    .seletProds>div span em,
    .endBtnsWrp a em {
      font-style: normal;
    }

    .seletProds>div.on p {
      color: #fff;
      background-image: linear-gradient(-90deg, #53a0fe 0%, #5063ed 100%);
    }

    .endBtnsWrp {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
    }

    .endBtn {
      display: block;
      float: left;
      width: 50%;
      line-height: 50px;
      font-size: 17px;
      color: #fff;
      background: #4a4a4a;
      text-align: center;
    }

    .endBtnsWrp a:first-child {
      background: #646464;
      width: 60%;
    }

    .endBtnsWrp a:last-child {
      background-color: #fcc647;
      width: 40%;
    }

css3的属性用了不少,因为这个项目的出发点就是手机端的。比如渐变背景,伪元素等。每个商品是通过浮动布局来实现的。

JS 结构

var odivs = document.getElementById('selexWps').getElementsByTagName("div");
    var emTal = 0; // 这是总的积分数,初始为0
    for (var i = 0; i < odivs.length; i++) {
       // 先给每个点击的项目添加个自定义属性,以便区别点击前和点击后,刚开始是off
      odivs[i].setAttribute("clickv", "off");
      odivs[i].onclick = function() {
        // 点击时,先获取里面的积分文字,转成数字类型
        var themVal = Number(this.getElementsByTagName("em")[0].innerText);
        // 这里判断未点击的点击后,要处理的操作
        if (this.getAttribute("clickv") == "off") {
          emTal += themVal;
          this.className = "on";
          this.getElementsByTagName("p")[0].innerText = "已选择";
          this.setAttribute("clickv", "on");
        } else {
         // 这里自然是已点击过,再点击的操作
          emTal -= themVal;
          this.className = "";
          this.getElementsByTagName("p")[0].innerText = "请选择";
          this.setAttribute("clickv", "off");
        }
         // 这里自然是把点完后,变更的最终积分数添加到页面的结算里
        document.getElementById("talval").innerText = emTal;
        //  console.log(emTal)
      }
    }

js 备注已添加,相对来说还算详细,有兴趣的小伙伴可以尝试实验下。加油吧!!!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中使用css需要注意的地方小结
Sep 01 Javascript
js变量以及其作用域详解
Jul 18 Javascript
为指定的元素添加遮罩层的示例代码
Jan 15 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
Jan 20 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
Jun 23 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
Feb 16 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
Feb 14 Javascript
jquery加载单文件vue组件的方法
Jun 20 jQuery
Angular4学习之Angular CLI的安装与使用教程
Jan 04 Javascript
angularjs http与后台交互的实现示例
Dec 21 Javascript
JavaScript实现数字前补“0”的五种方法示例
Jan 03 Javascript
详解Vue的组件中data选项为什么必须是函数
Aug 17 Javascript
使用 jQuery 实现表单验证功能
Jul 05 #jQuery
详解angularJS自定义指令间的相互交互
Jul 05 #Javascript
利用canvas实现的加载动画效果实例代码
Jul 05 #Javascript
AngularJS使用ocLazyLoad实现js延迟加载
Jul 05 #Javascript
vue一步步实现alert功能
Jul 05 #Javascript
详解vue.js移动端导航navigationbar的封装
Jul 05 #Javascript
JS实现移动端按首字母检索城市列表附源码下载
Jul 05 #Javascript
You might like
php实现简易聊天室应用代码
2015/09/23 PHP
PHP按指定键值对二维数组进行排序的方法
2015/12/22 PHP
php自动提交表单的方法(基于fsockopen与curl)
2016/05/09 PHP
php格式化json函数示例代码
2016/05/12 PHP
容易被忽略的JS脚本特性
2011/09/13 Javascript
Json和Jsonp理论实例代码详解
2013/11/15 Javascript
node.js中使用q.js实现api的promise化
2014/09/17 Javascript
2014年最火的Node.JS后端框架推荐
2014/10/27 Javascript
jquery实现搜索框常见效果的方法
2015/01/22 Javascript
基于Css3和JQuery实现打字机效果
2015/08/11 Javascript
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
Bootstrap表单布局样式代码
2016/05/31 Javascript
jQuery简单自定义图片轮播插件及用法示例
2016/11/21 Javascript
前后端常见的几种鉴权方式(小结)
2019/08/04 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
2020/04/26 Javascript
Openlayers绘制地图标注
2020/09/28 Javascript
Python实现删除文件但保留指定文件
2015/06/21 Python
详解Appium+Python之生成html测试报告
2019/01/04 Python
详解python编译器和解释器的区别
2019/06/24 Python
在Pycharm中调试Django项目程序的操作方法
2019/07/17 Python
python中的Elasticsearch操作汇总
2019/10/30 Python
使用Django实现把两个模型类的数据聚合在一起
2020/03/28 Python
Python 列表反转显示的四种方法
2020/11/16 Python
纯CSS3实现绘制各种图形实现代码详细整理
2012/12/26 HTML / CSS
卡西欧G-SHOCK英国官网: 防水防震手表
2018/01/08 全球购物
狗狗玩具、零食和咀嚼物的月度送货服务:Super Chewer
2018/08/22 全球购物
台湾7-ELEVEN线上购物中心:7-11
2021/01/21 全球购物
标记环网Toke Ring IEEE802.5
2014/05/26 面试题
入党申请书自我鉴定
2013/10/12 职场文书
工程管理专业个人求职信范文
2013/12/07 职场文书
会议接待欢迎词
2014/01/12 职场文书
高中军训感言600字
2014/03/11 职场文书
房屋买卖协议书
2014/04/10 职场文书
审计专业自荐信范文
2014/04/21 职场文书
成本会计实训报告
2014/11/05 职场文书
小学2016年第十八届推普周活动总结
2016/04/05 职场文书