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 相关文章推荐
JavaScipt基本教程之JavaScript语言的基础
Jan 16 Javascript
Mootools 1.2教程 Tooltips
Sep 15 Javascript
javascript标签在页面中的位置探讨
Apr 11 Javascript
判断一个变量是数组Array类型的方法
Sep 16 Javascript
JavaScript实现添加、查找、删除元素
Jul 02 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
Jun 02 Javascript
js验证真实姓名与身份证号,手机号的简单实例
Jul 18 Javascript
javascript数组遍历的方法实例分析
Sep 13 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
Feb 13 Javascript
微信小程序http连接访问解决方案的示例
Nov 05 Javascript
React 父子组件通信的实现方法
Dec 05 Javascript
如何利用JavaScript实现二叉搜索树
Apr 02 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
我的论坛源代码(一)
2006/10/09 PHP
PHP获取网站域名和地址的代码
2008/08/17 PHP
来自phpguru得Php Cache类源码
2010/04/15 PHP
PHP学习笔记之数组篇
2011/06/28 PHP
PHP压缩html网页代码(清除空格,换行符,制表符,注释标记)
2012/04/02 PHP
Laravel框架实现的批量删除功能示例
2019/01/16 PHP
JS 参数传递的实际应用代码分析
2009/09/13 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
2014/02/13 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
2014/06/06 Javascript
node.js解决获取图片真实文件类型的问题
2014/12/20 Javascript
浅析2种JavaScript继承方式
2015/12/04 Javascript
JavaScript实战(原生range和自定义特效)简单实例
2016/08/21 Javascript
JS 终止执行的实现方法
2016/11/24 Javascript
JS中如何实现复选框全选功能
2016/12/19 Javascript
JavaScript实现简单的四则运算计算器完整实例
2017/04/28 Javascript
BootStrap Fileinput上传插件使用实例代码
2017/07/28 Javascript
Vue修改mint-ui默认样式的方法
2018/02/03 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
2018/04/08 Javascript
koa上传excel文件并解析的实现方法
2018/08/09 Javascript
js中位运算的运用实例分析
2018/12/11 Javascript
微信小程序 生成携带参数的二维码
2019/10/23 Javascript
[10:54]Team Spirit vs Navi
2018/06/07 DOTA
[02:47]2018年度DOTA2最佳辅助位选手4号位-完美盛典
2018/12/17 DOTA
详解Python当中的字符串和编码
2015/04/25 Python
创建pycharm的自定义python模板方法
2018/05/23 Python
Python实现微信翻译机器人的方法
2019/08/13 Python
wxpython自定义下拉列表框过程图解
2020/02/14 Python
Python 执行矩阵与线性代数运算
2020/08/01 Python
Python爬虫实现自动登录、签到功能的代码
2020/08/20 Python
用Python实现定时备份Mongodb数据并上传到FTP服务器
2021/01/27 Python
《晚上的太阳》教学反思
2014/04/23 职场文书
升学宴学生致辞
2015/09/29 职场文书
一篇文章弄懂MySQL查询语句的执行过程
2021/05/07 MySQL
pytorch 实现变分自动编码器的操作
2021/05/24 Python
Django+Celery实现定时任务的示例
2021/06/23 Python
python_tkinter弹出对话框创建
2022/03/20 Python