开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js 开关按钮代码

以下是一个使用纯 JavaScript 实现的简单开关按钮示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .switch {
      position: relative;
      display: inline-block;
      width: 60px;
      height: 34px;
    }

    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      -webkit-transition: .4s;
      transition: .4s;
    }

    .slider:before {
      position: absolute;
      content: "";
      height: 26px;
      width: 26px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      -webkit-transition: .4s;
      transition: .4s;
    }

    input:checked+.slider {
      background-color: #2196F3;
    }

    input:focus+.slider {
      box-shadow: 0 0 1px #2196F3;
    }

    input:checked+.slider:before {
      -webkit-transform: translateX(26px);
      -ms-transform: translateX(26px);
      transform: translateX(26px);
    }

    .slider.round {
      border-radius: 34px;
    }

    .slider.round:before {
      border-radius: 50%;
    }
  </style>
</head>

<body>

  <label class="switch">
    <input type="checkbox" id="mySwitch">
    <span class="slider round"></span>
  </label>

  <script>
    const switchElement = document.getElementById('mySwitch');

    switchElement.addEventListener('change', function () {
      if (this.checked) {
        console.log('开关已打开');
        // 在这里可以添加开关打开时的逻辑
      } else {
        console.log('开关已关闭');
        // 在这里可以添加开关关闭时的逻辑
      }
    });
  </script>

</body>

</html>

在上述代码中：

基础概念：这是一个基于 HTML、CSS 和 JavaScript 实现的自定义开关按钮。通过 HTML 的input元素（类型为checkbox）来表示开关的状态，CSS 用于美化开关的外观，JavaScript 用于监听开关状态的变化。
优势：
- 可定制性强，可以根据需求修改样式。
- 能方便地与其他逻辑结合，根据开关状态执行不同操作。
应用场景：常用于设置页面中的选项开关，如开启/关闭通知、夜间模式切换等。

如果在实现过程中遇到问题，比如开关状态无法正常改变：

可能原因：
- JavaScript 代码中的元素获取错误，例如getElementById的 ID 不匹配。
- CSS 样式冲突导致按钮显示异常。
解决方法：
- 仔细检查 JavaScript 中获取元素的代码，确保 ID 正确。
- 检查 CSS 样式，避免与其他样式产生冲突。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

android开关按钮

刚开始接触开关样式的按钮是在IOS系统上面，它的切换以及滑动十分帅气,深入人心。所谓的开关按钮，就是只有2个状态：on和off，下图就是系统IOS 7上开关按钮效果。...二.重写CompoundButton控件实现带滑动效果的开关按钮：重写CompuundButton的实现可能会显得相对繁琐些，主要是考虑状态是否已经选中等情况的文字显示。 ...三.重写CheckBox控件实现带滑动效果的开关按钮：其实，看上面给的开发文档内容，大家都可以知道，CheckBox其实就是继承CompoundButton控件的，只是重构CheckBox...四.重写View实现带滑动效果的开关按钮：众所周知，以上所有的控件都是继承了View这个父类，所以，如果你用View去操作的话，就没有自带方法的限制，可是要满足你要实现的SwitchButton...你可以进行如下操作（在学习别的人代码中得到的提示，学以致用）：先初始化透明度：255为不透明 /** 最大透明度，就是不透明 */ private final int MAX_ALPHA = 255

4K8 0

Android 开关按钮

--定义一个ToggleButton按钮--> <ToggleButton android:id="@+id/toggle" android:layout_width...wrap_content" android:layout_height="wrap_content" /> 活动代码实现

7011 0

滑动开关按钮SlideSwich

iphone上有开关控件，很漂亮，其实android4.0以后也有switch控件，但是只能用在4.0以后的系统中，这就失去了其使用价值，而且我觉得它的界面也不是很好看。...下载地址：http://home.ustc.edu.cn/~voa/res/HelloJni.apk 2.原理继承自view类，override其onDraw函数，把两个背景图（一个灰的一个红的）和一个开关图...（圆开关）通过canvas画出来；同时override其onTouchEvent函数，实现滑动效果；最后开启一个线程做动画，实现缓慢滑动的效果。...代码 //SlideSwitch.java package com.example.hellojni; import android.content.Context; import ...super.onDraw(canvas); //绘图的时候内部用到了一些数值的硬编码，其实不太好， //主要是考虑到图片的原因，图片周围有透明边界，所以要有一定的偏移 //硬编码的数值只要看懂了代码

1.9K10 0

状态开关按钮ToggleButton

页面设置 1 <ToggleButton 2 android:layout_width="wrap_content" 3 and...

1.1K6 0

android仿ios开关按钮

前一段时间在做项目的时候遇到了一个问题，美工在设计的时候设计的是一个iPhone中的开关，但是都知道Android中的Switch开关和IOS中的不同，这样就需要通过动画来实现一个iPhone开关了。...float mFirstDownX; // 首次按下的X private float mRealPos; // 图片的绘制位置 private float mBtnPos; // 按钮的位置...private float mBtnOnPos; // 开关打开的位置 private float mBtnOffPos; // 开关关闭的位置 private float...mPaint.setXfermode(null); // 绘制边框 canvas.drawBitmap(mFrame, 0, mExtendOffsetY, mPaint); // 绘制按钮

1.9K10 0

Flat风格的Qml开关按钮

可以打开或关闭的开关按钮，使用Qml的Switch控件修改而成。...0x00 Switch按钮代码 import QtQuick 2.0 import QtQuick.Controls 2.0 Switch { id: root property color...x { NumberAnimation { duration: 200 } } } } } 0x01 Switch样式代码

1.1K1 0

Android开发学习笔记（十六）开关按钮

ToggleButton是一个用一条线显示状态的按钮 Switch是开关按钮，看起来Switch更为实用，两者用法几乎一样，参见上图。

6914 0

SwitchButton 开关按钮的多种实现方式

刚开始接触开关样式的按钮是在IOS系统上面，它的切换以及滑动十分帅气,深入人心。所谓的开关按钮，就是只有2个状态：on和off，下图就是系统IOS 7上开关按钮效果。...二.重写CompoundButton控件实现带滑动效果的开关按钮：重写CompuundButton的实现可能会显得相对繁琐些，主要是考虑状态是否已经选中等情况的文字显示。 ...SwitchButton是使用自定义配置的，所以如果不了解自定义配置的可以看以下文章：android 自定义控件使用declare-styleable进行配置属性（源码角度）具体的这边不贴代码了...三.重写CheckBox控件实现带滑动效果的开关按钮：其实，看上面给的开发文档内容，大家都可以知道，CheckBox其实就是继承CompoundButton控件的，只是重构CheckBox会比...四.重写View实现带滑动效果的开关按钮：众所周知，以上所有的控件都是继承了View这个父类，所以，如果你用View去操作的话，就没有自带方法的限制，可是要满足你要实现的SwitchButton

3.2K7 0

开关门js 转

(adsbygoogle = window.adsbygoogle || []).push({});

4.1K2 0

js _页面开关灯效果

DOCTYPE html> 开关灯效果

10.1K3 1

iOS开关按钮，纯CSS给你安排上了

细心的同学可能会发现iOS开关按钮在打开过程中，其背景存在着细微的变化。...为了不引入太多HTML标签，iOS开关按钮的背景使用伪元素::before代替。...一行代码实现惯性回弹厉害不，当然你也可用在其他动画场景上。...为了不引入太多HTML标签，iOS开关按钮的圆点使用伪元素::after代替。...非常贴切今天的主题：「iOS开关按钮，纯CSS给你安排上了」。 ? 整体源码如下。

1.7K5 1

css写一个原生switch开关按钮

DOCTYPE html> switch开关按钮 #checked { width: 60px

9332 0

Qt编写自定义控件42-开关按钮

widgets应用项目上，在项目中应用些类似的开关按钮，估计也会为项目增添不少新鲜感。...总结了大部分的开关按钮控件，基本上有两大类，第一类是纯代码绘制，这种对代码的掌控度要求比较高，但是灵活性比较好。第二类是贴图，专业的美工做好的各种状态的背景图片，只需要用代码将该图片画到界面上即可。...为了能够涵盖两大类的开关按钮，特意将常见的四种类型（圆角矩形/内圆形/外圆形/图片）都集成到了自定义的开关按钮中。...纯代码绘制开关按钮，可以很灵活的设置各种颜色、间隔、文字等，还可以产生动画过度的滑动效果。...7:可设置是否显示动画过渡效果三、效果图 [在这里插入图片描述] 四、头文件代码 #ifndef SWITCHBUTTON_H #define SWITCHBUTTON_H /** * 开关按钮控件

2.4K1 0

js后退按钮事件触发

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/164172.html原文链接：https://javaforall.cn

10.6K4 0

原生JS实现涟漪按钮特效

给大家分享一个用原生JS实现的涟漪按钮特效，效果如下：以下是代码实现，欢迎大家复制粘贴和收藏。原生JS...实现按钮涟漪特效 * { margin: 0; padding:

23.4K2 0

js点击按钮返回页面顶部

22 03:08:28 在进行官网一类的网站建设时，经常会出现页面太长的现象，当用户滚动滚动条到最底部时返回顶部需要滚动多下滚动条，用户体验相当不好，于是就出现了当滚动条滚动到一定位置后出现返回顶部按钮...，点击该按钮返回顶部，并且有一定的效果。...来看一下代码吧：返回顶部上面代码当滚动条滚动到一定位置后出现该a标签，且该a标签的position...点击a标签即会返回到顶部div所在位置再来看第二种方式第二种方式相对来说比较人性化，看起来也比较舒服，直接先来看代码吧落帆亭博客专注web前端开发 <a class...scrollTop:0},1000); return false; }); a标签的样式和方式和第一种方式相同，只不过给其添加了一个点击事件，此事件需要进入jquery.js

25.1K1 0

按钮式超链接代码

HTML菜单栏布局源代码 <!

1.4K3 0

js禁止浏览器后退按钮

js禁止浏览器后退按钮 1.js //禁止浏览器后退按钮 function BanBack(ele) { //禁止浏览器后退按钮 if (window.history && window.history.pushState

13.4K4 0

js通过按钮或链接打开文件

var url = selected[0].PUBLICMATERIAL;if(!url){console.log("获取公示材料查看路径失败!");retur...

10.4K2 0

纯代码给 WordPress 文章编辑器上增加 Prism.js 代码高亮的快捷按钮

之前发过文章说过：使用 Prism.js 实现漂亮的代码语法高亮，本博客也使用的是它直接写代码发布的话，灰茫茫一片，很丑，所以有了 Prism.js 引用的代码片段就变得有了好看的样式 js 代码高亮的快捷按钮打开你的 functions.php 文件，加入以下代码 // 自定义代码高亮按钮 function appthemes_add_quicktags...'); QTags.addButton( 'syz_Js', 'JavaScript', '', '...WordPress 文章编辑器上增加 Prism.js 代码高亮的快捷按钮直接点击编辑器上的按钮，就可以添加对应的片段，不用每次费事的一个一个敲了沈唁志，一个PHPer的成长之路！...原创文章采用CC BY-NC-SA 4.0协议进行许可，转载请注明：转载自：纯代码给 WordPress 文章编辑器上增加 Prism.js 代码高亮的快捷按钮

2.4K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭