【前端案例】原生js实现一个开关按钮，并记住用户选择

于 2023-07-05 14:02:52 发布
阅读量1.3k 收藏 2
点赞数 1
CC 4.0 BY-SA版权
分类专栏： # 前端demo 文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41675812/article/details/131554034
该文介绍了如何使用CSS设计开关按钮的样式，HTML构建其结构，以及JavaScript处理按钮状态的保存和读取，确保用户的选择能在下次访问时被记住，利用本地存储实现这一功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目标是创建一个开关按钮，并且能够记住用户的选择。主要步骤如下：
  1. 使用CSS创建开关按钮的样式，包括按钮本身和滑块的样式。
  2. 在HTML中创建一个开关按钮，包括一个隐藏的输入框和一个滑块。
  3. 使用JavaScript获取之前的开关状态（如果存在），并设置开关的状态。
  4. 当开关被点击时，使用JavaScript切换状态并保存到本地存储。

Bootstrap v3 使用JavaScript实现面板的开关
yusuhbdybxbdhj的博客
06-28 780
首先在网页文件中引入bootstrap的三个文件，分别是jquery、js、css这三个文件。先到bootstrap中文网v3文档中复制面板的内容，复制完成后直接返回html文件中进行粘贴即可。此时实现面板开关的两种方法就都完成了！Bootstrap中文网v3文档之面板内容。找到两个相对应的类名然后右击复制。然后开始JavaScript部分。找到你想要的面板格式后先右击检查。此时方法一的功能就全部实现了。这里我使用的是表格面板。
前端开关按钮
Xmh1027的博客
08-28 3591
<!DOCTYPE html> <html>     <head>         <meta charset="UTF-8">         <title>前端开关按钮</title> <style type="text/css">            *{  
js实现开关功能
weixin_30606669的博客
01-30 1288
var flag = true; 　　if(flag){ 　　　　d.style.display="block"; 　　　　flag=false; 　　　}else{ 　　　　d.style.display="none";flag=true; 　　　} 转载于:https://www.cnblogs.c...
html5 js开关按钮,【JS函数】js实现开关按钮状态切换
weixin_42495057的博客
06-25 3008
function swch(obj,sw){//开关,2,1var bkgd;var im1,im2;if(obj.nodeName == "IMG"){//本身是图片bkgd = obj.src;im1=bkgd.substring(0,bkgd.length-5);im2=bkgd.substring(bkgd.length-5);if(sw == "on"){obj.src=im1+2+im...
一个简单的开关按钮
10-10
在本案例中，我们将探讨如何使用Bootstrap、jQuery（jq）库来实现一个简单的开关按钮，即"switch"。Bootstrap是流行的前端开发框架，而jQuery则是一个强大的JavaScript库，简化了DOM操作和事件处理。 首先，为了...
高效实用的滑动开关按钮实现方法
2. 交互反馈：一个良好的滑动开关按钮设计应当在视觉上清晰地表明开关的状态。通常状态切换时会有动画效果，增强用户体验。 3. 实现技术：滑动开关按钮可以在多种前端技术中实现，包括但不限于HTML、CSS和...
用Vue.js开发一个电影App的前端界面
mongo_node的专栏
12-22 8570
我们要构建一个什么样的App？我们大多数人使用在线流媒体服务（如Netflix）观看我们最喜欢的电影或者节目。这篇文章将重点介绍如何通过使用vue.js 2 建立一个类似风格的电影流媒体WEB交互界面（见上图）。最终的产品可以去这里找：https://codepen.io/itslit/full/mvvjzr。尽管Bulma将作为应用的CSS框架，但是本文将主要集中在Vue.js的使用和浏览CSS...
《精通react/vue组件设计》之配合React Portals实现一个功能强大的抽屉(Drawer)组件...
趣谈前端
10-17 710
前言本文是笔者写组件设计的第六篇文章,内容依次从易到难,今天会用到react的高级APIReact Portals,它也是很多复杂组件必用的方法之一. 通过组件的设计过程,大家会接触到一...
Vue.js与前端工程化：v-model动态生成在大型项目中的12个应用案例
随着前端开发技术的快速发展，Vue.js凭借其简洁的API和灵活的设计，已成为前端工程师的重要工具之一。本文首先介绍了Vue.js的基础知识和前端工程化的概念，随后深入探讨了v-model指令在Vue.js中的基础应用及其在动态...
js做的开关
07-27
非常漂亮的用js做的开关，是通过滑动来实现，里面有JSP,JS,图片等文件，可以直接通过html看效果和代码。
JavaScript滑块开关按钮
10-22
用HTML、CSS和原生JavaScript设计的滑块开关按钮，点击切换状态。用HTML、CSS和原生JavaScript设计的滑块开关按钮，点击切换状态。
纯js写的一个switch开关（或叫checkbox开关）
06-05
纯js写的一个switch开关（或叫checkbox开关）
js实现按钮开关单机下拉菜单效果
10-17
主要介绍了js实现按钮开关单机下拉菜单效果，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
原生JS中的实现开关逻辑的四种方法
前端-尔嵘
07-06 5144
当你随着对前端学习的深入和做更多的项目时，会发现原生JS中开关逻辑是非常重要的. 注意:在运行的时候去掉注释，下面的代码仅保留第一种方式。 效果如下：（开关图片建议自己找两张，实现点击切换） <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>&lt...
前端 开关按钮样式_纯CSS实现扁平化风格开关按钮
weixin_39895283的博客
12-23 546
开关样式预览图前言最近在基于bootstrap框架开发一个网站，在填写表单一项需要用户填写是否选择某一选项，本来想引用bootstrap框架自带的一个按钮插件，结果在引用js的时候总是出错，就找了找资源，用纯css实现这个按钮开关的功能。具体代码过程话不多说，直接上代码实现！html代码部分是否选择：css代码部分input[type=checkbox] {visibility: hidden;}...
前端学习（146）：伪类选择器checked和disable和focus
歌谣的博客
12-18 682
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
前端 开关按钮样式_前端开发学习之一------前端开发是什么以及我们要学什么...
weixin_42299427的博客
01-05 245
1.web前端开发工程师是做什么的 简单地说，就是要与网站打交道2.成为一名web前端工程师需要具备的条件 ①兴趣 ②敲代码（实践、需要去练习）3.Web前端开发工程师需要学习什么（重点：HTML，CSS，JavaScript硬性指标） ①软件（代码的辅助工具） 浏览器：浏览器有非常多，（谷歌Chrome（性能比较稳定），火狐，IE）（访问网站必...
前端 开关按钮样式_拆解「开关」背后的设计细节
weixin_32442555的博客
12-25 553
作者从生活中的实际情况出发，探讨了开关背后的设计思想并拆解了具体的设计细节。01 生活中的反面案例故事要半年前开始讲起：那个时候我搬到了新的出租屋，房间里配置的洗衣机比之前的大了一倍，而且操作区上分布着的密密麻麻的文字和按钮让洗衣机看起来很高级，我对此很有好感。然而这种好感并没有持续多久，在我第一次使用它时：将衣物放进洗衣机——选择好时间和洗涤方式——按下启动按钮(如下图右侧白色按钮)。按下后洗衣...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

.Tricia.

感谢大人投喂~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值