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

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

实现效果

实现代码

 <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>

• 业务代码

function fnIndex() {const oIndex = id('index')let bScore = falseconst 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 = truefor (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 = 1oIndex.style.WebFilter = oIndex.style.filter = `blur(4px)`}, 100)
}

• 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;
}