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 相关文章推荐
JQuery与iframe交互实现代码
Dec 24 Javascript
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
Jan 17 Javascript
探索Emberjs制作一个简单的Todo应用
Nov 07 Javascript
jquery scroll()区分横向纵向滚动条的方法
Apr 04 Javascript
jQuery分别获取选中的复选框值的示例
Jun 17 Javascript
Bootstrap实现默认导航栏效果
Sep 21 Javascript
jQuery仿京东商城楼梯式导航定位菜单
Jul 25 Javascript
JS生成和下载二维码的代码
Dec 07 Javascript
微信小程序实现YDUI的ScrollNav组件
Feb 02 Javascript
webpack4.x开发环境配置详解
Aug 04 Javascript
如何用原生js写一个弹窗消息提醒插件
May 24 Javascript
使用js和canvas实现时钟效果
Sep 08 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+FastCGI+Nginx配置PHP运行环境
2014/08/07 PHP
js从10种颜色中随机取色实现每次取出不同的颜色
2013/10/23 Javascript
javascript中数组的多种定义方法和常用函数简介
2014/05/09 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
2016/05/17 Javascript
浅谈JS中逗号运算符的用法
2016/06/12 Javascript
jQuery时间日期三级联动(推荐)
2016/11/27 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
2018/07/23 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
2018/09/18 Javascript
浅谈ECMAScript 中的Array类型
2019/06/10 Javascript
Vue实现push数组并删除的例子
2019/11/01 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
2020/07/07 Javascript
详解React 元素渲染
2020/07/07 Javascript
Python性能提升之延迟初始化
2016/12/04 Python
Python实现抓取HTML网页并以PDF文件形式保存的方法
2018/05/08 Python
python实现微信每日一句自动发送给喜欢的人
2019/04/29 Python
Python通用函数实现数组计算的方法
2019/06/13 Python
pandas条件组合筛选和按范围筛选的示例代码
2019/08/26 Python
python数据分析工具之 matplotlib详解
2020/04/09 Python
python读取excel数据绘制简单曲线图的完整步骤记录
2020/10/30 Python
python中altair可视化库实例用法
2021/01/26 Python
HTML5 Canvas基本线条绘制的实例教程
2016/03/17 HTML / CSS
HTML5播放实现rtmp流直播
2020/06/16 HTML / CSS
美国著名首饰网站:BaubleBar
2016/08/29 全球购物
Bealls Florida百货商店:生活服饰、家居装饰和鞋子
2018/02/23 全球购物
Trench London官方网站:高级风衣和意大利皮夹克
2020/07/11 全球购物
Java编程面试题
2016/04/04 面试题
国际商务专业学生个人的自我评价
2013/09/28 职场文书
培训班开班仪式主持词
2014/03/28 职场文书
募捐倡议书
2014/04/14 职场文书
护士求职信范文
2014/05/24 职场文书
体育教师求职信
2014/06/30 职场文书
社区服务活动小结
2014/07/08 职场文书
离婚协议书应该怎么写
2014/10/12 职场文书
教师师德表现自我评价
2015/03/05 职场文书
幼儿园开学温馨提示
2015/07/15 职场文书