前端入坑纪27

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

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

超文本标记语言结构

div id=' selex wps ' class=' selet rods clear ' div span积分em5000/em/span！[](wrap/img/pic.png) p请选择/p /div跨度积分em5000/em/span！[](wrap/img/pic.png) p请选择/p /div跨度积分em6000/em/span！[](wrap/img/pic.png) p请选择/p /div跨度积分em7000/em/span！[](wrap/img/pic.png) p请选择/p /div跨度积分em8000/em/span！[](wrap/img/pic.png) p请选择/p /div跨度积分em9000/em/span！[](wrap/img/pic.png) p请选择/p/div/div class=' endBtnsWrp clear ' a class=' endBtn ' href=' JavaScript :'rel='外部nofollow' rel='外部' nofollow '积分： em id=' tal val ' 0/em/a class=' EndBtn ' href=' JavaScript :'rel='外部nofollow' rel='外部' nofollow '结算/a /div这真不晓得什么要特意说明，真要有的话，那底部的结算条，它是固定的；不变的布局，固定在屏幕底部。

半铸钢钢性铸铁(铸造半钢)结构

车身{ padd : 0；保证金： 0；背景-color : # fff；填充-底部： 60px} p { padd : 0；保证金： 0；} ul，李{ padd : 0；保证金： 0；列表样式：无；} a { text-decoration : nonecolor: # 525252}。fl { float:左侧；} .fr { float:右侧；} . clear : 03: after在{显示：块之后；内容： " "；clear:两者；} .seletProdsdiv {左侧浮动：相对位置：文本对齐：中心；border: 2px实心# d8d8d8盒子尺寸：边框盒子；宽度： 30%;保证金： 1.666%;} .seletrods p { font-size : 14px线高： 37px边框-top: 2px实心# d8d8d8文本对齐：中心；背景-color : # fff；color: # 525252}。seletrusdiv img { width : 80%；} .seletProdsdiv span {位置：绝对值；top : 0；右： 0；背景： rgba(255，92，92，0.79)；padding: 0 3pxcolor: # fff高度： 17pxfont-size : 12px} .seletProdsdiv span em，1 .endBtnsWrp a em { font-style : normal；} .seletrodsdiv。在p { color : # fff背景-图像：线性-渐变(-90度，#53a0fe 0%，# 5063 ed 100%)；} .endBtnsWrp { position:固定；底部： 0；左： 0；宽度： 100%;} .endBtn { display:块；向左浮动：宽度： 50%;线高： 50pxfont-size : 17pxcolor: # fff背景技术： # 4a 4a文本对齐：中心；} .endBtnsWrp a :第一个孩子{ background: # 646464宽度： 60%;} .endBtnsWrp a :最后一个孩子{背景色： # FCC 647宽度： 40%;}css3的属性用了不少，因为这个项目的出发点就是手机端的。比如渐变背景，伪元素等。每个商品是通过浮动布局来实现的。

射流研究…结构

var odiv s=document . getelementbyid(' selex wps ')。getElementsByTagName(' div ')；var em tal=0；//这是总整数，对于(var I=0；i odivs.lengthI) {//先给每个被点击的项目添加一个自定义属性，以区分点击前后。开始时，它是四分之一。setattribute ('clickv '，' off ')；odiv[I]。onclick=function() {//单击时，首先获取里面的整型文本，并将其转换为数字类型var themval=number (this。getelementsbyname ('em') [0]。inner text)；//这里，判断要处理的操作if (this。getattribute(' click v ')==' off '){ em tal=them val；this.className=' on这个。getelementsbytagname ('p') [0]。innertext=“已选择”；this.setAttribute('clickv '，' on ')；} else {//这里自然是已经点过又点过的操作，emTal-=them val；this.className=这个。getelementsbytagname ('p') [0]。innertext='请选择'；this.setAttribute('clickv '，' off ')；}//在这里，自然会将更改后的最终点数添加到page document . getelementbyid(' talval ')的结算中。innertext=emtal//console . log(emTal)} }增加了js备注，相对详细。感兴趣的伙伴可以尝试一下这个实验。来啊！

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。