当前位置: 首页 > news >正文

【纯原生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;
}

相关文章:

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

h5端的按钮系统自带的一般都很丑&#xff0c;需要我们进行二次美化&#xff0c;比如单选按钮复选框之类的&#xff0c;那怎么对其进行html和css的改造&#xff1f; 实现效果 实现代码 <section id"tags"><h2>给景区添加标题</h2><label><…...

深入浅出:开发者如何快速上手Web3生态系统

Web3作为互联网的未来发展方向&#xff0c;正在逐步改变传统互联网架构&#xff0c;推动去中心化技术的发展。对于开发者而言&#xff0c;Web3代表着一个充满机遇与挑战的新领域&#xff0c;学习和掌握Web3的基本技术和工具&#xff0c;将为未来的项目开发提供强大的支持。那么…...

通过深度点图表示的隐式场实现肺树结构的高效解剖标注文献速递-生成式模型与transformer在医学影像中的应用

Title 题目 Efficient anatomical labeling of pulmonary tree structures via deeppoint-graph representation-based implicit fields 通过深度点图表示的隐式场实现肺树结构的高效解剖标注 01 文献速递介绍 近年来&#xff0c;肺部疾病&#xff08;Decramer等&#xff…...

数据结构 (17)广义表

前言 数据结构中的广义表&#xff08;Generalized List&#xff0c;又称列表Lists&#xff09;是一种重要的数据结构&#xff0c;它是对线性表的一种推广&#xff0c;放松了对表元素的原子限制&#xff0c;容许它们具有其自身的结构。 一、定义与表示 定义&#xff1a;广义表是…...

论文笔记 SliceGPT: Compress Large Language Models By Deleting Rows And Columns

欲买桂花同载酒&#xff0c;终不似&#xff0c;少年游。 数学知识 秩&#xff1a; 矩阵中最大线性无关的行/列向量数。行秩与列秩相等。 线性无关&#xff1a;对于N个向量而言&#xff0c;如果任取一个向量 v \textbf{v} v&#xff0c;不能被剩下的N-1个向量通过线性组合的方式…...

前端工具的选择和安装

选择和安装前端工具是前端开发过程中的重要步骤。现代前端开发需要一些工具来提高效率和协作能力。以下是一些常用的前端工具及其选择和安装指南。 1. 代码编辑器 选择一个好的代码编辑器可以显著提高开发效率。以下是几款流行的代码编辑器&#xff1a; Visual Studio Code (…...

Fantasy中定时器得驱动原理

一、服务器框架启动 public static async FTask Start(){// 启动ProcessStartProcess().Coroutine();await FTask.CompletedTask;while (true){ThreadScheduler.Update();Thread.Sleep(1);}} 二、主线程 Fantasy.ThreadScheduler.Update internal static void Update(){MainS…...

【反转链表】力扣 445. 两数相加 II

一、题目 二、思路 加法运算是从低位开始&#xff0c;向高位进位&#xff0c;因此需要将两个链表进行反转&#xff0c;再进行对齐后的相加操作。力扣 2. 两数相加 三、题解 /*** Definition for singly-linked list.* public class ListNode {* int val;* ListNode …...

SpringBoot 项目中使用 spring-boot-starter-amqp 依赖实现 RabbitMQ

文章目录 前言1、application.yml2、RabbitMqConfig3、MqMessage4、MqMessageItem5、DirectMode6、StateConsumer&#xff1a;消费者7、InfoConsumer&#xff1a;消费者 前言 本文是工作之余的随手记&#xff0c;记录在工作期间使用 RabbitMQ 的笔记。 1、application.yml 使…...

Uniapp 安装安卓、IOS模拟器并调试

一、安装Android模拟器并调试 1. 下载并安装 Android Studio 首先下载 Mac 环境下的 Android Studio 的安装包&#xff0c;为dmg 格式。 下载完将Android Studio 向右拖拽到Applications中&#xff0c;接下来等待安装完成就OK啦&#xff01; 打开过程界面如下图所示&#xf…...

JavaScript 中的原型和原型链

JavaScript 中的原型和原型链也是一个相对较难理解透彻的知识点&#xff0c;下面结合详细例子来进行说明&#xff1a; 一、原型的概念 在 JavaScript 中&#xff0c;每个函数都有一个 prototype 属性&#xff0c;这个属性指向一个对象&#xff0c;这个对象就是所谓的 “原型对…...

数组变换(两倍)

数组变换 以最大元素为基准元素&#xff0c;判读其他元素能否通过 x 2 成为最大值&#xff01; 那么怎么判断呢&#xff1a; max % arr[i] 0arr[i] * 2 ^n max int x 2 ^ n max / arr[i] 3.只需判断 这个 x 是不是 2 的 n 次放就可以了&#xff01; 判断 是否为 2 的 n 次 …...

GBN协议、SR协议

1、回退N步&#xff08;Go-Back-N,GBN&#xff09;协议&#xff1a; 总结&#xff1a; GBN协议的特点&#xff1a; &#xff08;1&#xff09;累计确认机制&#xff1a;当发送方收到ACKn时&#xff0c;表明接收方已正确接收序号为n以及序号小于n的所有分组&#xff0c;发送窗…...

三维扫描检测仪3d扫描测量尺寸-自动蓝光测量

在现代工业及生产过程中&#xff0c;精确、高效的尺寸检测是保证产品质量、提升生产效率的关键因素。 红、蓝光测量&#xff0c;以其高精度、高效率和非接触式的特点&#xff0c;在工业及生产中发挥着越来越重要的作用。蓝光测量技术利用蓝色激光光源&#xff0c;通过扫描被测…...

大模型翻译能力评测

1. 背景介绍 随着自然语言处理技术的飞速发展&#xff0c;机器翻译已经成为一个重要的研究领域。近年来&#xff0c;基于大模型的语言模型在机器翻译任务上取得了显著的进展。这些大模型通常具有数亿甚至数千亿的参数&#xff0c;能够更好地理解和生成自然语言。 但是&#xf…...

MySQL隐式转换造成索引失效

一、什么是 MySQL 的隐式转换&#xff1f; MySQL 在执行查询语句时&#xff0c;有时候会自动帮我们进行数据类型的转换&#xff0c;这个过程就是隐式转换。比如说&#xff0c;我们在一个 INT 类型的字段上进行查询&#xff0c;但是传入的查询条件却是字符串类型的值&#xff0c…...

SuperMap Objects组件式GIS开发技术浅析

引言 随着GIS应用领域的扩展&#xff0c;GIS开发工作日显重要。一般地&#xff0c;从平台和模式上划分&#xff0c;GIS二次开发主要有三种实现方式&#xff1a;独立开发、单纯二次开发和集成二次开发。上述的GIS应用开发方式各有利弊&#xff0c;其中集成二次开发既可以充分利…...

多组数输入a+b:JAVA

链接&#xff1a;登录—专业IT笔试面试备考平台_牛客网 来源&#xff1a;牛客网 输入描述: 输入包含多组数据&#xff0c;每组数据输入一行&#xff0c;包含两个整数 输出描述: 对于每组数据输出一行包含一个整数表示两个整数的和 代码: import java.util.Scanner; pu…...

R语言结构方程模型(SEM)在生态学领域中的应用

目录 专题一、R/Rstudio简介及入门 专题二、结构方程模型&#xff08;SEM&#xff09;介绍 专题三&#xff1a;R语言SEM分析入门&#xff1a;lavaan VS piecewiseSEM 专题四&#xff1a;SEM全局估计&#xff08;lavaan&#xff09;在生态学领域高阶应用 专题五&#xff1…...

架构-微服务-服务调用Dubbo

文章目录 前言一、Dubbo介绍1. 什么是Dubbo 二、实现1. 提供统一业务api2. 提供服务提供者3. 提供服务消费者 前言 服务调用方案--Dubbo‌ 基于 Java 的高性能 RPC分布式服务框架&#xff0c;致力于提供高性能和透明化的 RPC远程服务调用方案&#xff0c;以及SOA服务治理方案。…...

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

3.3.1_1 检错编码(奇偶校验码)

从这节课开始&#xff0c;我们会探讨数据链路层的差错控制功能&#xff0c;差错控制功能的主要目标是要发现并且解决一个帧内部的位错误&#xff0c;我们需要使用特殊的编码技术去发现帧内部的位错误&#xff0c;当我们发现位错误之后&#xff0c;通常来说有两种解决方案。第一…...

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

MySQL 8.0 OCP 英文题库解析(十三)

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

QT3D学习笔记——圆台、圆锥

类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体&#xff08;对象或容器&#xff09;QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质&#xff08;定义颜色、反光等&#xff09;QFirstPersonC…...