原创 html關於列表的顯示和隱藏
實現的效果是 點擊向下箭頭，隱藏列表。 點擊向上箭頭，顯示列表 主要用到的是jQuery的toggle方法，以及箭頭的顯示和隱藏的判斷,在箭頭上添加onclick方法 具體實現的函數方法如下: var toggleFlag =
2020-06-28 20:07:24
原创 用checkbox實現多列表的顯示和隱藏
由於上一篇存在bug… 所以就改用checkbox來實現多列表的顯示和隱藏 html代碼： <header>覆蓋醫院名單</header> <ul class="cover_list"> <li class
2020-06-28 19:12:23
原创 checkbox實現開關按鈕
效果： 關閉時： 打開時： html部分： <div class='search_checkbox'> <input type='checkbox' id='switch'> <label f
2020-06-28 19:12:23
原创 基於防抖和節流的性能優化
介紹： 當下網頁中的交互越來越多，很多高頻事件帶來的性能問題，已經是繞不過去的一個坎。怎麼去優化這些高頻事件，以下來基於防抖和節流的性能優化。 1、防抖和節流的概念： 防抖：就是指觸發事件後在n秒內函數只能執行一次，如果在n秒內又
2020-06-28 19:12:23
原创 前端input密碼輸入強度驗證
需求： 1.需要對用戶輸入的密碼進行驗證，驗證的級別分爲強中弱，如果輸入的密碼強度少於6時，則不會驗證，只有密碼強度在6-20時纔會進行驗證。 相關的正則 //密碼爲八位及以上並且字母數字特殊字符三項都包括
2020-06-21 11:20:41
1
原创 CSS文本強制換行兼容
pre { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ w
2020-06-21 11:20:41
原创 CSS通用媒體查詢
/* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-d
2020-06-21 11:20:41
原创 htmlPC端省份城市二級聯動
主要編程思想：根據省份索引與城市索引聯動，JS用的是對象編程思想 html代碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <m
2020-06-21 11:20:41
原创 CSS跨不同瀏覽器透明度opacity設置
.transparent { filter: alpha(opacity=50); /* internet explorer */ -khtml-opacity: 0.5; /* khtml, old s
2020-06-21 11:20:41
原创 bscroll.js實現html手機端城市列表
效果圖 直接上代碼： html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" con
2020-06-21 11:20:41
原创 html登錄表單驗證
html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=d
2020-06-21 11:20:41
原创 原生JS實現數據動態渲染的豎向步驟條
實現以下效果： 運用的知識點主要是html的僞元素。然後步驟條通過js動態渲染。最後一條數據的狀態顏色狀態爲高亮狀態。 直接上代碼 html部分： <ul class="progress_box"> </ul> css
2020-06-21 11:20:41
原创 JS面向對象寫法實現豆瓣電影搜索
一個項目的開發往往是多人協同開發，爲了防止我們自己在開發時候寫的代碼會影響到其他人寫的代碼，這就需要我們獨立命名一個對象變量，就在這個對象裏面編寫我們自己的代碼。 現在就用這種方法實現豆瓣電影搜索功能。 效果，搜索前： 輸入搜索
2020-06-21 11:20:41
原创 JS實現canvas簡單小畫板功能
Html部分： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="widt
2020-06-21 11:20:41
原创 純css實現loading加載動畫
下面就來介紹簡單的純CSS動畫加載 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" cont
2020-06-14 05:43:16