整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
起按鈕開關(guān)，在平時(shí)生活中已經(jīng)很普及了，幾乎是隨處可見，與我們的生活息息相關(guān)，那么既然是與我們生活如此息息相關(guān)的一個(gè)東西，那么你對(duì)他的了解又有多少呢？相信如果不是對(duì)這方面有了解的，普通人一般都沒什么了解或者說了解的不多，不夠詳細(xì)，那么接下來將會(huì)從簡(jiǎn)單的關(guān)于按鈕開關(guān)是什么，原理是什么、結(jié)構(gòu)怎么樣、有哪些分類、以及平時(shí)看不懂的型號(hào)說明。來幫助大家更好的去了解什么是按鈕開關(guān)。
首先我們介紹一下，什么是按鈕開關(guān)以及按鈕開關(guān)的原理是什么：
按鈕開關(guān)簡(jiǎn)稱按鈕，通常用來接通和斷開控制電路，它是電力拖動(dòng)中一種發(fā)出指令的低壓電器，應(yīng)用十分廣泛的一種主令電器，在電氣自動(dòng)控制電路中，用于手動(dòng)發(fā)出控制信號(hào)以控制接觸器、繼電器、電磁起動(dòng)器等。其特點(diǎn)是安裝在工作進(jìn)行中的機(jī)器、儀表中，大部分時(shí)間是處于初始自由狀態(tài)的位置上，只是在有要求時(shí)才在外力作用下轉(zhuǎn)換到第二種狀態(tài)(位置)，當(dāng)外力一旦除去，由于彈簧的作用，開關(guān)就又回到初始位置。按鈕開關(guān)可以完成啟動(dòng)、停止、正反轉(zhuǎn)、變速以及互鎖等基本控制。通常每一個(gè)按鈕開關(guān)有兩對(duì)觸點(diǎn)。每對(duì)觸點(diǎn)由一個(gè)常開觸點(diǎn)和一個(gè)常閉觸點(diǎn)組成。當(dāng)按下按鈕，兩對(duì)觸點(diǎn)同時(shí)動(dòng)作，常閉觸點(diǎn)斷開，常開觸點(diǎn)閉合。
當(dāng)我們知道什么是按鈕開關(guān)或者說對(duì)按鈕開關(guān)有一定了解之后，我們接下來介紹一下關(guān)于按鈕開關(guān)的結(jié)構(gòu)：
按鈕開關(guān)的結(jié)構(gòu)：由按鈕帽、復(fù)位彈簧、固定觸點(diǎn)、可動(dòng)觸點(diǎn)、外殼和支柱連桿等組成。按鈕不受外力作用(即靜態(tài))時(shí)觸頭的分合狀態(tài)，分為啟動(dòng)按鈕(即常開按鈕)、停止按鈕(即常閉按鈕)和復(fù)合按鈕(即常開、常閉觸頭組合為一體的按鈕)。對(duì)啟動(dòng)按鈕而言，按下按鈕帽時(shí)觸頭閉合，松開后觸頭自動(dòng)斷開復(fù)位;停止按鈕則相反，按下按扭帽時(shí)觸頭分開，松開后觸頭自動(dòng)閉合復(fù)位。復(fù)合按鈕是按下按鈕帽時(shí)，橋式動(dòng)觸頭向下運(yùn)動(dòng)，使常閉觸頭先斷開后，常開觸頭才閉合;當(dāng)松開按鈕帽時(shí)，則常開常開觸頭先分?jǐn)鄰?fù)位后，常開觸頭再閉合復(fù)位。
接下來我們將詳細(xì)的介紹，按鈕開關(guān)究竟有哪些分類，雖然我們?nèi)粘Ｉ钪薪佑|過很多按鈕開關(guān)，但是對(duì)我們來說是不是都大同小異，感覺都差不多一個(gè)樣呢？其實(shí)呢，雖說外觀看起來相似，實(shí)則他們的作用或者類別可能卻大不相同，所以，下面將會(huì)詳細(xì)的介紹一下到底有哪些分類：
①按鈕開關(guān)按用途和觸頭的結(jié)構(gòu)不同分類?：
1.常開觸頭（動(dòng)合觸頭）：是指原始狀態(tài)時(shí)（電器未受外力或線圈未通電），固定觸點(diǎn)與可動(dòng)觸點(diǎn)處于分開狀態(tài)的觸頭。
2.常閉觸頭（動(dòng)斷觸頭）：是指原始狀態(tài)時(shí)（電器未受外力或線圈未通電），固定觸點(diǎn)與可動(dòng)觸點(diǎn)處于閉合狀態(tài)的觸頭。
3.常開（動(dòng)合）按鈕開關(guān)，未按下時(shí)，觸頭是斷開的，按下時(shí)觸頭閉合接通；當(dāng)松開后，按鈕開關(guān)在復(fù)位彈簧的作用下復(fù)位斷開。在控制電路中，常開按鈕常用來啟動(dòng)電動(dòng)機(jī)，也稱啟動(dòng)按鈕。
4.常閉（動(dòng)斷）按鈕開關(guān)與常開按鈕開關(guān)相反，末按下時(shí)，觸頭是閉合的，按下時(shí)觸頭斷開；當(dāng)手松開后，按鈕開關(guān)在復(fù)位彈簧的作用下復(fù)位閉合。常閉按鈕常用于控制電動(dòng)機(jī)停車，也稱自復(fù)位按鈕。
5.復(fù)合按鈕開關(guān)：將常開與常閉按鈕開關(guān)組合為一體的按鈕開關(guān)，即具有常閉觸頭和常開觸頭。未按下時(shí)，常閉觸頭是閉合的，常開觸頭是斷開的。按下按鈕時(shí)，常閉觸頭首先斷開，常開觸頭后閉合，可認(rèn)為是自鎖型按鈕；當(dāng)松開后，按鈕開關(guān)在復(fù)位彈簧的作用下，首先將常開觸頭斷開，繼而將常閉觸頭閉合。復(fù)合按鈕用于聯(lián)鎖控制電路中。
②按鈕開關(guān)可按操作方式、防護(hù)方式分類：
1.防水式：帶密封的外殼，可防止雨水侵入。代號(hào)為S
2.防腐式：能防止化工腐蝕性氣體的侵入。代號(hào)為F
3.防爆式：能用于含有爆炸性氣體與塵埃的地方而不引起傳爆，如煤礦等場(chǎng)所。代號(hào)為B
4.旋鈕式：用手把旋轉(zhuǎn)操作觸點(diǎn)，有通斷兩個(gè)位置，一般為面板安裝式。代號(hào)為X
5.鑰匙式：用鑰匙插入旋轉(zhuǎn)進(jìn)行操作，可防止誤操作或供專人操作。代號(hào)為Y
6.開啟式：適用于嵌裝固定在開關(guān)板、控制柜或控制臺(tái)的面板上。代號(hào)為K
7.保護(hù)式：帶保護(hù)外殼，可以防止內(nèi)部的按鈕零件受機(jī)械損傷或人觸及帶電部分。代號(hào)為H
8.緊急式：有紅色大蘑菇鈕頭突出于外，作緊急時(shí)切斷電源用。代號(hào)為J或M
9.自持按鈕：按鈕內(nèi)裝有自持用電磁機(jī)構(gòu)，主要用于發(fā)電廠、變電站或試驗(yàn)設(shè)備中，操作人員互通信號(hào)及發(fā)出指令等，一般為面板操作。代號(hào)為Z
10.帶燈按鈕：按鈕內(nèi)裝有信號(hào)燈，除用于發(fā)布操作命令外，兼作信號(hào)指示，多用于控制柜、控制臺(tái)的面板上。代號(hào)為D
11.組合式：多個(gè)按鈕組合。代號(hào)為E
12.聯(lián)鎖式：多個(gè)觸點(diǎn)互相聯(lián)鎖。代號(hào)為C
最后是關(guān)于按鈕開關(guān)的型號(hào)說明，我們平時(shí)可能會(huì)看到按鈕開關(guān)上面有一串字符，字母加數(shù)字甚至帶橫杠的，不知道這些標(biāo)識(shí)到底代表著什么意思，接下來就會(huì)介紹一下這些字符串究竟代表著什么意義：
舉一個(gè)例子：
①PB-②01 ③口 ④口 ⑤R ⑥口
①標(biāo)示產(chǎn)品名稱代碼
②標(biāo)示產(chǎn)品型號(hào)代碼
③標(biāo)示按鈕的個(gè)數(shù)
1：表示2個(gè)按鈕
2：表示4個(gè)按鈕
3：表示6個(gè)按鈕
4：表示8個(gè)按鈕
5：表示10個(gè)按鈕
6：表示12個(gè)按鈕
④標(biāo)示產(chǎn)品的附加操作按鈕搭配代碼
無：無全部功能控制按鈕
E：表示產(chǎn)品中有急停按鈕
⑤R：表示產(chǎn)品中有啟動(dòng)按鈕
S：表示產(chǎn)品中有停止按鈕
O：表示產(chǎn)品中有入切按鈕
D：表示產(chǎn)品中有調(diào)速按鈕
⑥1：表示產(chǎn)品中有2位是雙速控制按鈕
2：表示產(chǎn)品中有4位是雙速控制按鈕
3：表示產(chǎn)品中有6位是雙速控制按鈕
4：表示產(chǎn)品中有8位是雙速控制按鈕
5：表示產(chǎn)品中有10位是雙速控制按鈕
6：表示產(chǎn)品中有12位是雙速控制按鈕
可以根據(jù)自己的需求來自由的組合運(yùn)用。
宏聚開關(guān)（http://www.zghongju.com/hydt/946.html）轉(zhuǎn)載請(qǐng)注明出處！
于前端開發(fā)人員來說，css是我們?cè)偈煜げ贿^的朋友的，它就相當(dāng)于是我們頁面的衣服，頁面好不好看，就看我們css運(yùn)用的是否爐火純青[小鼓掌][小鼓掌][小鼓掌]。css學(xué)起來簡(jiǎn)單，但是我們要把它“修煉”到出神入化境界，那這可不是一丁點(diǎn)時(shí)間就可以的，需要我們的日積月累，時(shí)刻專研。
而今天，就帶給大家一個(gè)CSS特效-霓虹燈按鈕，這也是我看到很不錯(cuò)的效果，帶來分享給大家，希望大家喜歡[送心][送心][送心]
效果如下：
最終效果
那好，廢話不多說，開始我們的CSS代碼。
// 這里我們用div標(biāo)簽來模擬button按鈕，標(biāo)簽可以隨意，a、p、span等都可以
// 通常在開發(fā)中使用別的標(biāo)簽來代替button標(biāo)簽，是因?yàn)樵嫉臉?biāo)簽樣式不好看，
// 我們還得重置樣式，而其他標(biāo)簽不帶有樣式，我們可以更好的控制自己想要的樣式，
// 當(dāng)然，button標(biāo)簽也是可以的，但是如前面所說，原始的樣式需要我們重置。
<div class="btn">button</div>body {
margin: 0;
padding: 0;
background: #000; // 黑色背景，只為更能突出樣式效果
}
// 初始化按鈕樣式
.btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 60px;
text-align: center;
line-height: 60px;
color: #fff;
font-size: 24px;
font-family: sans-serif;
text-decoration: none;
text-transform: uppercase;
box-sizing: border-box;
// linear-gradient() 漸變屬性，函數(shù)用于創(chuàng)建一個(gè)表示兩種或多種顏色線性漸變的圖片
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
background-size: 400%;
border-radius: 30px;
}初始樣式為這樣：
初始樣式
然后我們給按鈕加上動(dòng)畫，代碼如下：
.btn:hover {
// linear: 動(dòng)畫從開始到結(jié)束具有相同的速度。
// infinite: 無限次播放
animation: animate 8s linear infinite;
}
@keyframes animate {
0% {
background-position: 0%;
}
100% {
background-position: 400%;
}
}效果就變?yōu)橄旅孢@樣：
最后我們給它加上鼠標(biāo)移上去的效果，代碼如下：
.btn::before {
content: '';
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
z-index: -1;
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
background-size: 400%;
border-radius: 40px;
opacity: 0;
transition: .5s;
}
.btn:hover::before {
filter: blur(20px);
opacity: 1;
animation: animate 8s linear infinite;
}現(xiàn)在這樣，就是我們的最終效果了：
就此，我們的霓虹燈的按鈕效果就完成了
不足百行，我們就完成了這個(gè)效果，以下是我們的CSS的全部代碼：
<html></html>雙標(biāo)簽 開頭結(jié)尾 HTML標(biāo)簽為最大的標(biāo)簽 稱為根標(biāo)簽
<head></head> 文檔頭部標(biāo)簽 且必須設(shè)置title
<title></title> 頁面標(biāo)題
<body></body> 文檔的主體 包含頁面的內(nèi)容
<h1>-<h6> HTML提供6個(gè)等級(jí)的頁面標(biāo)題 有大到小
<p></p> p標(biāo)簽用于定義段落 可以將頁面分為若干個(gè)段落 根據(jù)窗口大小自動(dòng)換行
<br/>單標(biāo)簽 換行標(biāo)簽 （break打斷）
加粗 <strong></strong>or<b></b>
斜線 <em></em>or<i></i>
刪除線 <del></del>or<s></s>
下劃線 <ins></ins>or<u></u>
沒有語義 屬于一種盒子 來裝內(nèi)容
<div></div> 表示分割分區(qū) 用來布局 一行一個(gè) 大盒子
<span></span>意為跨度，跨距 一行可以哦有多個(gè) 小盒子
<img src="圖像路徑(url)"/> 定義頁面中的圖像
圖像標(biāo)簽包含多個(gè)屬性
src 圖片路徑 必須屬性
alt 文本 替換文本 圖像不能顯示的文字
title 文本 鼠標(biāo)放到圖像上顯示文字
width 像素 寬度
height 高度
border 邊框
相對(duì)路徑和絕對(duì)路徑
相對(duì)路徑：以引用文件所在位置為參考基礎(chǔ)，而建立出的目錄路徑
分類：下級(jí)路徑/ 上級(jí)路徑../
絕對(duì)路徑：是指目錄下的絕對(duì)位置，如硬盤中的路徑或網(wǎng)路地址
<a href="跳轉(zhuǎn)目標(biāo)" target="目標(biāo)窗口的彈出方式">文本或圖像</a>
href用于指定鏈接目標(biāo)的url地址(必須屬性)
target用于指定鏈接打卡方式 _self為默認(rèn)值 _blank為在新窗口打開方式
錨點(diǎn)鏈接：可以快速到頁面某個(gè)位置
在鏈接文本中的href屬性中，設(shè)置屬性值為#名字的形式，如<a href="#two">目標(biāo)</a>
找到目標(biāo)位置標(biāo)簽，里面添加一個(gè)id屬性=名字，如：<h3 id="two">目標(biāo)</h3>
<!-- 注釋語句 --> 快捷鍵CTRL + /
HTML 原代碼 | 顯示結(jié)果 | 描述 |
< | < | 小于號(hào)或顯示標(biāo)記 |
> | > | 大于號(hào)或顯示標(biāo)記 |
& | & | 可用于顯示其它特殊字符 |
" | “ | 引號(hào) |
? | ? | 已注冊(cè) |
? | ? | 版權(quán) |
? | ? | 商標(biāo) |
半個(gè)空白位 | ||
一個(gè)空白位 | ||
不斷行的空白 |
<table></table> 是用于定義表格的標(biāo)簽
<tr></tr> 標(biāo)簽用于定義表格中的行，必須嵌套在<table></table>標(biāo)簽中
<tb></tb> 用于定義表格的單元格，必須嵌套在<tr></tr>標(biāo)簽中
<td> 元素中的文本通常是普通的左對(duì)齊文本。字母td指表格數(shù)據(jù)(table data)，即數(shù)據(jù)單元格的內(nèi)容
表頭單元格標(biāo)簽：
<th>標(biāo)簽表示HTML表格的表頭部分 <th> 元素中的文本通常呈現(xiàn)為粗體并且居中。
表格屬性：
align left center right 規(guī)定表格相對(duì)于周圍元素的對(duì)齊方式
border 1or"" 規(guī)定表格單元是否擁有邊框默認(rèn)為"",表示沒有邊框
cellpadding 像素值 規(guī)定單元邊沿與其內(nèi)容的空白，默認(rèn)1像素
cellspacing 像素值 規(guī)定單元格直接的空白 默認(rèn)2像素
with 像素值or百分比 規(guī)定表格的寬度
合并單元表格方式：
跨行合并：rowspan="合并單元格的個(gè)數(shù)"
跨列合并：colspan="合并單元格的個(gè)數(shù)"
<ul>標(biāo)簽表示無序列表 里面只能包含li
<ol>有序標(biāo)簽 里面只能包含li
<li>相當(dāng)于一個(gè)容器定義列表項(xiàng) 與<ui>or<li>嵌套使用 li里面可以包含任何標(biāo)簽
<dl>標(biāo)簽用于定義描述列表(或自定義列表),該標(biāo)簽會(huì)與<dt>(定義項(xiàng)目和名字)和<dd>(描述每一個(gè)項(xiàng)目名字)一起使用
標(biāo)簽 | 描述 |
<form> | 定義供用戶輸入的表單 |
<input> | 定義輸入域 |
<textarea> | 定義文本域 (一個(gè)多行的輸入控件) |
<label> | 定義了 <input> 元素的標(biāo)簽，一般為輸入標(biāo)題 |
<fieldset> | 定義了一組相關(guān)的表單元素，并使用外框包含起來 |
<legend> | 定義了 <fieldset> 元素的標(biāo)題 |
<select> | 定義了下拉選項(xiàng)列表 |
<optgroup> | 定義選項(xiàng)組 |
<option> | 定義下拉列表中的選項(xiàng) |
<button> | 定義一個(gè)點(diǎn)擊按鈕 |
<datalist> New | 指定一個(gè)預(yù)先定義的輸入控件選項(xiàng)列表 |
<keygen> New | 定義了表單的密鑰對(duì)生成器字段 |
<output> New | 定義一個(gè)計(jì)算結(jié)果 |
<input>標(biāo)簽用于收集用戶信息 包含一個(gè)type屬性 可以有多種樣式
<input type="value">
<input type="屬性值" />屬性值：
button | 定義可點(diǎn)擊按鈕（多數(shù)情況下，用于通過 JavaScript 啟動(dòng)腳本）。 |
checkbox | 定義復(fù)選框。 |
file | 定義輸入字段和 "瀏覽"按鈕，供文件上傳。 |
hidden | 定義隱藏的輸入字段。 |
image | 定義圖像形式的提交按鈕。 |
password | 定義密碼字段。該字段中的字符被掩碼。 |
radio | 定義單選按鈕。 |
reset | 定義重置按鈕。重置按鈕會(huì)清除表單中的所有數(shù)據(jù)。 |
submit | 定義提交按鈕。提交按鈕會(huì)把表單數(shù)據(jù)發(fā)送到服務(wù)器。 |
text | 定義單行的輸入字段，用戶可在其中輸入文本。默認(rèn)寬度為 20 個(gè)字符。 |
<label> 標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)記）。 label是標(biāo)注的意思
label 元素不會(huì)向用戶呈現(xiàn)任何特殊效果。不過，它為鼠標(biāo)用戶改進(jìn)了可用性。如果您在 label 元素內(nèi)點(diǎn)擊文本，就會(huì)觸發(fā)此控件。就是說，當(dāng)用戶選擇該標(biāo)簽時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。
<label> 標(biāo)簽的 for 屬性應(yīng)當(dāng)與相關(guān)元素的 id 屬性相同
詳情可參考
https://www.runoob.com/ 菜鳥教程
https://www.w3school.com.cn/ w3c
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
