原创 clipboard: 實現複製到剪貼板功能

這幾天做項目用到複製到剪貼板功能,發現這個插件挺好用的。奉上demo傳送門 ①引用插件 <script src="libs/clipboard.js"></script>②html <div data-clipboard-text="我是

原创 vue2+webpack+express 簡單入門:從前端到後臺

本文只是簡單的入門,介紹怎樣快速建立項目,利用路由切換頁面;寫接口,前端調用接口等。 默認全局已安裝: nodenpmvue-cli1、進入一個空文件夾,初始化名爲vue-demo項目。 2、進入項目文件內,下載基礎依賴包以及v

原创 純css製作三角形+常用的對話框實例

網頁中經常用到三角形的地方,用css寫三角形的方法很簡單 html: <span class="u-tri"></span>css: .u-tri{ display: inline-block;

原创 angular指令:判斷ng-repeat完成後的回調事件

項目中遇到個功能點,需要在ng-repeat循環完成後才能觸發,記錄下。 ①書寫指令 //自定義repeat完成指令 app.directive('repeatFinish',function($timeout){

原创 vue學習:解決Atom中的 * is only available in ES6(use 'esversion: 6') 問題

官方下載了vue的簡單項目,用Atom打開main.js,代碼前出現黃點,js報錯了 在代碼語句後加上分號,減少一個黃點,但還報錯 把鼠標移至import的波浪線上,出現提示:W119 - ‘import’  is only avail

原创 vue學習:解決vue變量未渲染前代碼顯示問題

在vue變量未渲染前,會有一瞬間顯示代碼,影響代碼美觀。vue有現成的指令來解決這個問題:v-cloak 在css中加入: [v-cloak]{ display: none; }在需要元素加上: <div v-cloak>

原创 javascript:自定義彈窗的寫法

項目中經常出現廣告彈窗,記錄下簡單彈框寫法。 基本html結構: <div class="popBox"> <div class="popBox-mask"></div> <div class="popBox-conten

原创 區別類型爲object的對象、數組和日期

通過typeof(value)方法可以判斷當前變量的數據類型。var a = {id:'1',name:'對象'}; var b = [1,2]; var c = new Date(); typeof(a); //object ty

原创 chimee視頻播放插件

在react中引入chimee插件 1.下載依賴包chimee和chimee-plugin-controlbar chimee是主要插件,用於視頻的播放; chimee-plugin-controlbar是控制欄,可配置項包括進度條,時間

原创 安利jqueryForm:讓文件上傳更輕鬆

很久開始前就用這個插件了,每次都忘記具體的調用方法,特地寫個demo記錄下。 先上這個demo的傳送門,恩!然後開始了... ①先是html <a href="javascript:void(0)" class="j_upLoad

原创 angular指令:實現複製到剪貼板功能

找過clipboard 和 ngclipboard兩個插件,建過簡單的demo測試都是可以的,一旦用到項目中就各種報錯,項目是angular + require搭建的,查閱了各種資料,終於找到了相對簡單的指令實現方法。 var myApp

原创 ui-router強制刷新當前頁面

ui-router根據狀態來加載頁面,進入過的頁面第二次進入,會直接從緩存中讀取。現在要實現強制刷新頁面。  路由配置: .state('demo', { url: '/demo',

原创 sass入門:安裝環境及簡單用法

一、初步瞭解sass sass是css預處理器之一。css預處理器是專門處理css的編程語言,編程中無需考慮瀏覽器的兼容性,使語法簡潔、可讀性和適應性強。 sass下還分sass版和scss版: ①sass以.sass爲文件名結尾,有嚴格

原创 前端自學之路——一個不愛看書的女孩

  本文不聊什麼專業技術,只想說說我是怎麼入前端這個坑的,讓所有想學前端的人瞭解下。         我學的是計算機科學與技術(網絡工程方向),這個專業是我們學校新開的,不像計算機專業的一樣學安卓和深入的java;也沒有其他學校的網工學的

原创 angular指令:彈框點擊空白處隱藏

指令: app.directive('onBlankHide',function(){ return{ restrict:'A', scope: { pop: '='