【纯原生js】原生实现h5落地页面中的单选组件按钮及功能

h5端的按钮系统自带的一般都很丑，需要我们进行二次美化，比如单选按钮复选框之类的，那怎么对其进行html和css的改造？

实现效果

实现代码

html 复制代码

 <section id="tags">
   <h2>给景区添加标题</h2>
   <label>
     <input type="radio" name="tags" value="服务好" /><span
       >服务好</span
     ></label
   >
   <label>
     <input type="radio" name="tags" value="景色赞" /><span
       >景色赞</span
     ></label
   >
   <label>
     <input type="radio" name="tags" value="千篇一律" /><span
       >千篇一律</span
     ></label
   >
   <label>
     <input type="radio" name="tags" value="看人海" /><span
       >看人海</span
     ></label
   >
   <label>
     <input type="radio" name="tags" value="挤爆了" /><span
       >挤爆了</span
     ></label
   >
   <label>
     <input type="radio" name="tags" value="服务还行" /><span
       >服务还行</span
     ></label
   >
   <label>
     <input type="radio" name="tags" value="美食不错" /><span
       >美食不错</span
     ></label
   >
   <label>
     <input type="radio" name="tags" value="距离近" /><span
       >距离近</span
     ></label
   >
 </section>
 <p id="info" class="info">提示信息</p>
 <input type="button" value="提交" id="btn" class="btn" />
</section>

业务代码

js 复制代码

function fnIndex() {
  const oIndex = id('index')
  let bScore = false
  const oBtn = oIndex.getElementsByClassName('btn')[0]
  bind(oBtn, 'touchend', function () {
    fnIndexEnd()
  })

  function fnIndexEnd() {
    // removeClass(oIndex, 'pageShow')
    // alert('谢谢您的评价')
    const oInfo = id('info')
    bScore = fnScoreChecked()
    console.log('🚀 ~ fnIndexEnd ~ bScore:', bScore)
    if (bScore) {
      // fnInfo(oInfo, '感谢您的参与')
      if (bTag()) {
        // alert('谢谢您的参与')
        fadeIndexout()
      } else {
        fnInfo(oInfo, '给景区添加标签')
      }
    } else {
      fnInfo(oInfo, '请先对风景进行评价')
      // setTimeout(() => {
      //   removeClass(oIndex, 'pageShow')
      // }, 1000)
    }
  }

  function fnScoreChecked() {
    const oScore = id('score')
    const aInput = oScore.getElementsByTagName('input')
    let bS = true
    for (let i = 0; i < aInput.length; i++) {
      if (aInput[i].value == 0) {
        return false
      }
    }
    return true
  }
}

function bTag() {
  const oTags = id('tags')
  const aInput = oTags.getElementsByTagName('input')
  for (let i = 0; i < aInput.length; i++) {
    if (aInput[i].checked) {
      return true
    }
  }
  return false
}

function fadeIndexout() {
  const oMask = id('mask')
  const oIndex = id('index')
  addClass(oMask, 'pageShow')
  setTimeout(() => {
    oMask.style.opacity = 1
    oIndex.style.WebFilter = oIndex.style.filter = `blur(4px)`
  }, 100)
}

css美化

css 复制代码

* {
  padding: 0;
  margin: 0;
}
html,
body {
  height: 100%;
  font-family: Arial, '微软雅黑', sans-serif;
}
.page {
  height: 100%;
  background-color: #fff;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  font-size: 26px;
  z-index: 1;
  display: none;
}

ul li {
  list-style: none;
}
h2,
h1,
strong {
  font-weight: normal;
}

a,
input {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

img {
  border: none;
  vertical-align: top;
  width: 100%;
}
.pageShow {
  display: block;
}

.page:nth-of-type(1) {
  z-index: 10;
}
.page:nth-of-type(1) {
  z-index: 9;
}
.page:nth-of-type(1) {
  z-index: 8;
}
.page:nth-of-type(1) {
  z-index: 7;
}
.page:nth-of-type(1) {
  z-index: 6;
}

/* 欢迎页面 */
@keyframes tree {
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes shake {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(30deg);
  }
  40% {
    transform: rotate(-20deg);
  }
  60% {
    transform: rotate(15deg);
  }
  80% {
    transform: rotate(-8deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.tree {
  position: absolute;
  left: 0;
  top: 10%;
  width: 100%;
  opacity: 0;
  transform: translateY(100px);
  animation: tree 1s linear 0.25s forwards;
}
#logo {
  position: absolute;
  left: 0;
  bottom: 5%;
  text-align: center;
  width: 100%;
  opacity: 0;
  transform: translateY(30px);
  animation: tree 1s linear 0.25s forwards;
}

#welcome {
  transition: all 1s;
}

.welcome2 {
  position: relative;
  padding-top: 50px;
  opacity: 0;
  transform: translateY(30px);
  animation: tree 1s linear 1s forwards;
}
.welcome2 .shake {
  width: 24px;
  position: absolute;
  left: 300px;
  top: 30px;
  height: 24px;
  background: url('../img/shake.png') no-repeat 0 0;
  background-size: 100%;
  animation: shake 0.5s linear infinite;
}

@keyframes cloud {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(-20px);
  }
}

.tree3 {
  padding-top: 20px;
  opacity: 0;
  transform: translateY(30px);
  animation: tree 1s linear 2s forwards;
}
.cloud {
  position: absolute;
  background: url('../img/cloud.png') no-repeat 0 0;
  background-size: contain;
}
.cloud:nth-of-type(1) {
  left: 280px;
  top: 15px;
  width: 59px;
  height: 44px;
  animation: cloud 2s linear infinite alternate-reverse;
}
.cloud:nth-of-type(2) {
  left: 30px;
  top: 77px;
  width: 45px;
  height: 70px;
  animation: cloud 2s linear 1s infinite alternate-reverse;
}
.cloud:nth-of-type(3) {
  left: 200px;
  top: 80px;
  width: 45px;
  height: 70px;
  animation: cloud 2s linear 1.5s infinite alternate-reverse;
}

/* 首页 */
#tabPic {
  overflow: hidden;
  position: relative;
}
#picList {
  overflow: hidden;
  width: 500%;
  transition: all 0.5s;
}
#picList li {
  float: left;
  width: 20%;
}
#picList img {
  width: 100%;
  height: 200px;
}
.picMask {
  height: 40px;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background: -webkit-linear-gradient(
    bottom,
    rgba(0, 0, 0, 0.1),
    rgba(0, 0, 0)
  );
  background: linear-gradient(bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0));
  padding: 0 15px;
}
.picMask p {
  color: #fff;
  font-size: 14px;
  line-height: 40px;
  margin-right: 100px;
}

.picMask nav {
  height: 10px;
  position: absolute;
  right: 40px;
  top: 18px;
}
.picMask nav a {
  float: left;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  margin-right: 5px;
}
.picMask nav a.active {
  background-color: #fff;
}

#score {
  line-height: 40px;
  padding: 10px;
}

#score h2 {
  font-size: 20px;
  color: #333;
}

#score li {
  height: 40px;
  position: relative;
}

#score li span {
  font-size: 18px;
  color: #333;
}

#score li strong {
  float: right;
  margin-right: 20px;
  font-size: 12px;
  color: #333;
}

#score li nav {
  position: absolute;
  left: 130px;
  top: 10px;
  height: 30px;
  /* width:120px; */
}
#score li nav a {
  float: left;
  width: 20px;
  height: 20px;
  background: url('../img/star.png') no-repeat -22px 0;
  background-size: cover;
  margin-right: 10px;
  transition: all 0.2s;
}
#score li nav a.active {
  background-position: 0 0;
}

#tags {
  padding: 10px;
  overflow: hidden;
}

#tags h2 {
  font-size: 20px;
  color: #333;
}

#tags input {
  width: 10px;
  height: 10px;
  margin-right: 5px;
}
#tags label {
  float: left;
  line-height: 34px;
  font-size: 18px;
  margin: 5px 14px 5px 3px;
}
#tags label input {
  display: none;
}
#tags label span {
  float: left;
  border: 1px solid #cdd6e1;
  padding: 0 16px;
  border-radius: 30px;
}

#tags input:checked + span {
  border-color: #333;
  background-color: #3c9bb3;
  color: #fff;
}

.btn {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  height: 40px;
  appearance: none;
  outline: none;
  border: none;
  font-size: 18px;
  font-weight: 400;
  border-radius: 10px;
}
.submit {
  background: #3c9bbb;
  color: #fff;
}
.info {
  font-size: 14px;
  position: absolute;
  text-align: center;
  width: 100%;
  bottom: 50px;
  transform-origin: bottom center;
  transform: scale(0.1);
  opacity: 0;
  transition: all 0.3s ease-out;
}

/* #index:active .info {
  transform: scale(1);
  opacity: 1;
} */

#mask {
  background: rgba(0, 0, 0, 0.7) url('../img/mask.png') no-repeat center 200px /
    200px;
  transition: 1s;
  z-index: 2;
  opacity: 0;
}