MIswitch

功能描述

实现点击按钮开启/关闭以及switch开关

依赖的插件

快速使用

 相关html 结构
      <section class="section">		  一级结构  
        <label class='switch'>		  二级结构 
          <input type='checkbox'>	  三级结构
          <span></span>
        </label>
      </section>
      <div class="switch-force">	  一级结构
        <input type="button" class="switch-force-btn" id="switch_force" value="已开启" />	  二级机构
      </div>
 主要css样式
      .section			.switch				  默认颜色
      .section-red		.switch-red			  红色
      .section-orange	.switch-orange		  橙色
      .section-yellow	.switch-yellow		  黄色
      .section-green	.switch-green		  绿色
      .section-young	.switch-young		  青色
      .section-blue		.switch-blue		  蓝色
      .section-purple	.switch-purple		  紫色
      .switch-normal	.switch-normal-btn	  开启/关闭按钮-正常
      .switch-Abnormal  .switch-Abnormal-btn  开启/关闭按钮-不正常
      .switch-urgent	.switch-urgent-btn	  开启/关闭按钮-紧急
      .switch-force		.switch-force-btn	  开启/关闭按钮-强制
开启/关闭按钮js
      var switch_normal = (function () {	  
        var btn = document.getElementById('switch_normal');  获取id
        var i = true;										判断按钮是否开启
        btn.onclick = function () {							点击事件
          if (i) {											判断当if=true是按钮关闭，反之开启
            i = false;										
            document.getElementById('switch_normal').value = '已关闭';
            document.getElementById('switch_normal').style.backgroundColor = '#BCBCBC';
          } else {
            i = true;
            document.getElementById('switch_normal').value = '已开启';
            document.getElementById('switch_normal').style.backgroundColor = '#7FFFD4';
          }
        }
      })()

特别说明

无

是否仍需要帮助？ 请保持联络！
最后更新于 2024/04/24