超簡単HTMLでスライドスイッチ風ボタンの作り方(HTML、JavaScript)

2022年6月18日土曜日

GAS HTML/JavaScript

t f B! P L

編集モードオンみないな感じでよくあるスライドスイッチ(風)のボタン
を超簡単に作ることに成功しましたのでメモしておきます☺

超簡単スライドスイッチ


実際のスイッチはこれです。(クリックすると切り替わります。)
編集スイッチ: OFF

クリックするとONとOFFになります。

で、どう作ったかというと・・・

作り方

inputで「type=button」を作ります。
inputボタンの角を「border-radius: 20px;」で丸くします。
inputボタンの値を「○  」で背景をグレーにします。

あとは、JavaScriptでボタンが押されたときに、
「○  」と「  ●」をボタンのValueとして切り替えています。
ちなみに「  」の部分は全角スペース2個です。
また、背景色も切り替え、ボタンの横のspanの文字列もON↔OFFを入れ替えています。

JavaScriptでボタンがON状態だったらと効く場合も ==’  ●’ と判断しなければなりませんが、機能的にはスライドスイッチの機能を満たしています(^^)/

JavaScript

    <script>
    function chgSwitch(){

      var mys = document.getElementById('switchsw');

      if (mys.value=='○  ') {
        mys.value='  ●';
        mys.style.backgroundColor = 'gray';
        document.getElementById('switchm').innerHTML='OFF';
        writeSpreadsheet();
      } else {
        mys.value='○  ';
        mys.style.backgroundColor = 'yellow';
        document.getElementById('switchm').innerHTML='ON';
      }
    }
    </script>

HTML側

編集スイッチ:
<input id="switchsw" onclick="chgSwitch();" style="background-color: grey; border-radius: 20px;
    font-size: larger;" type="button" value="○  " />
<span id="switchm">OFF</span>


そもそも今更なぜか?

そうなんです。今更GAS(Google Apps Script)でHTMLを出力しながらスプレッドシートに保存したりする仕組みを知りました。
私としては、超小規模なWebシステムが簡単に作れる仕組みを発見してしまいました・・・
そして、それはとても大きな海ですね・・・可能性が広がりすぎますね。また、知らないことも沢山あります・・・
ExcelVBAでは実現できない部分ができる感じでとても衝撃を受けています!!
いろいろと試していこうと思います!!




何か気になったらGoogle検索で!

このサイトについて


【テンワンナップ】
普段の生活、仕事などでちょっと効率的に、ちょっと便利に、作業等を効率的にできる様な事をまとめていきます。 1Upまではいきませんが、0.1Upで生産性向上といったところですかね。Excel作業も0.1UPして生産性向上を図る為の小技も紹介していきます。

注目の投稿

(簡易ツール)容量あたりの金額計算

容量あたりの金額計算 容量と金額を入力してください。 パターン 容量(ml/g…) 払う金額(円) 単金(金額/容量) (1)の単金で購入すると ...

人気の投稿

このブログを検索

カウンター

連絡フォーム

名前

メール *

メッセージ *

rakuten

QooQ