原创 百度地圖可視化定位經緯度地理位置。

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name

原创 H5 input新增type屬性color顏色拾取器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,

原创 原生javasript實現Ctr+c複製Ctr+v粘貼

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,

原创 原生js實現ajax請求(帶請求頭header)和數據傳參過程代碼

一、Ajax 概述 Ajax 是 Asynchronous Javascript And XML 的簡寫 Ajax是一門技術,並不是一門語言 使用XHTML+CSS來標準化呈現 使用XML和XSLT進行數據交換及相關操作 使用XML

原创 Vuex入門小例子

1.安裝 vuex npm install vuex –save 2.vuex理解 官方解釋:vuex是一個專爲vue.js應用程序開發的 狀態管理模式。它採用集中式存儲管理應用的所有的狀態,並以相應的規則保證狀態以一種可預測的方式發生

原创 CSS3自定義滾動條樣式 -webkit-scrollbar

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3自定義滾動條-軒楓閣</title> <style> header {

原创 原生js頁面滾動頂部顯示滾動總進度條效果

最終效果: 代碼如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wid

原创 H5 Notification桌面推送消息

三、HTML5 Web Notification語法 window.Notification 如果瀏覽器支持Web Notification,不考慮私有前綴,則window.Notification就會是一個有很多靜態屬性和實例方法的函

原创 微信小程序餐廳點餐項目源碼

我們經常在外面餐廳吃飯會發現現在還多餐廳桌子上都會有個小程序二維碼,我們點餐的時候直接掃碼就可以點餐支付。今天閒來沒事花了一個早上的時間做了一個,可以實現掃碼點餐,統計商品和計算價錢,支付功能(ps:接口沒有和後端對接)。 最新百度也在搞

原创 原生javascript實現H5拖拽效果。

一、設置元素爲可拖放 首先,爲了使元素可拖動,把 draggable 屬性設置爲 true 二、 ondragstart 和 setData() 當元素被拖動時,事件觸發,所調用的函數。 上面例子代碼中,ondragstart 屬性調用

原创 P標籤裏面爲什麼不能添加div標籤

很多剛接觸html的同學可能比較少注意到這個問題,html標籤裏面是不是可以隨便放標籤,答案是肯定不行的。 爲什麼呢? 我們先看一張圖代碼圖 然後瀏覽器渲染出來的DOM是這樣的 本人使用的瀏覽器是chrome 看到區別了麼,命名

原创 原生javascript用面向對象的方式仿query實現鏈式調用。

原生javascript用面向對象的當時仿query實現鏈式調用。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="v

原创 vuejs實現checkbox全選和全不選

最近一直在用vue,有個功能是要實現全選和取消全選的功能,於是想了一下要怎麼做。 效果如下: 代碼如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

原创 vue父組件向子組件傳值

父組件: <template> <div class="demo" @click='toggle'> <box-bar v-if='box' :deviceid='id'></box-bar> </div> </temp

原创 HTML5本地存儲indexDB新建數據庫、數據庫增刪改查操作

代碼如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width