Time of Update: 2017-01-19
d3.bisector(accessor)是一種指定參數accessor或者比較子函數返回一個二等分對象。返回的對象有left和right兩個屬性。分別類似於bisectLeft和bisectRight方法。這個方法適用於對象數組而不適用於原始的簡單數組。N>>>1就代表N的二進位右移一位,二進位右移一位就能得到中間值。例如10>>>110的二進位代碼為 1010向右移動一位後為 0101即 5
Time of Update: 2017-01-19
最近做了一個前端項目,其中有需求:通過button直接把input或者textarea裡的值複製到粘貼板裡。下面小編把我實現思路及代碼分享給大家,大家可以直接引入項目中。具體代碼如下所示:function copyToClipboard(elem) {// create hidden text element, if it doesn't already existvar targetId = "_hiddenCopyText_";var isInput = elem.tagName === "
Time of Update: 2017-01-19
前言:大多OO語言都支援兩種繼承方式: 介面繼承和實現繼承 ,而ECMAScript中無法實現介面繼承,ECMAScript只支援實現繼承,而且其實現繼承主要是依靠 原型鏈 來實現。1.原型鏈基本思想:利用原型讓一個參考型別繼承另外一個參考型別的屬性和方法。建構函式,原型,執行個體之間的關係:每個建構函式都有一個原型對象,原型對象包含一個指向建構函式的指標,而執行個體都包含一個指向原型對象的內部指標。原型鏈實現繼承例子:function SuperType() {this.property =
Time of Update: 2017-01-19
在現在代瀏覽器中判斷一個元素在不在一個數組中,咱們可以用Array對象的indexOf()方法來取得這個元素在當前數組中的索引值,若索引值不等於-1,數組中就存在這個元素,例如:var arr = [2,53,23,'test',9,'array'];//判斷array在不在數組arr中arr.indexOf('array') !== -1 ? alert('存在') : alert('不存在');但是IE9以前的版本都不支援此方法,那咱們就只能擴充一個:
Time of Update: 2017-01-19
我們經常參加各種電商優惠活動,比如購買達到一定數額進行抽獎活動,在比如微信抽獎,淘寶抽獎,迅雷賺錢寶圓盤抽獎活動等。這些抽獎活動部分就是由HTML5的Canvas來製作的,今天就為大家分享一下如何使用HTML5的Canvas來製作圓盤抽獎功能。老規矩,先看下效果圖吧:再來看看Canvas的幾個主要api: 全部原始碼如下:<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"&
Time of Update: 2017-01-19
先給大家展示下效果圖: 向下滑動網頁的時候能夠自動載入圖片並顯示。 盛放圖片的盒子模型如下: <div class="box"><div class="box_img"><img
Time of Update: 2017-01-19
Javascript實現蘋果懸浮虛擬按鈕直接引入代碼到頁面即可代碼有部分冗餘的地方,有興趣的小夥伴可也自己修改如果有什麼BUG 記得評論 告訴我哦web-touch.jsvar new_element_N=document.createElement("style"); new_element_N.innerHTML = '#drager {' + ' position: fixed;' + ' width: 35px;' + ' height: 35px;'
Time of Update: 2017-01-19
推薦閱讀:實現非常簡單的js雙向資料繫結MVVM 是 Web 前端一種非常流行的開發模式,利用 MVVM 可以使我們的代碼更專註於處理商務邏輯而不是去關心 DOM 操作。目前著名的 MVVM 架構有 vue, avalon , react 等,這些架構各有千秋,但是實現的思想大致上是相同的:資料繫結 + 視圖重新整理。出於好奇和一顆願意折騰的心,我自己也沿著這個方向寫了一個最簡單的 MVVM 庫 ( mvvm.js ),總共 2000 多行代碼,指令的命名和用法與 vue
Time of Update: 2017-01-19
定義和用法constructor 屬性返回對建立此對象的數組函數的引用。文法object.constructorconstructor,建構函式,對這個名字,我們都不陌生,constructor始終指向建立當前對象的建構函式。這裡有一點需要注意的是,每個函數都有一個prototype屬性,這個prototype的constructor指向這個函數,這個時候我們修改這個函數的prototype時,就發生了意外。如function Person(name,age){this.name = name;
Time of Update: 2017-01-19
通過網上的資料,加上自己的整理,寫了一份html搖一搖功能的簡介,用做技術備份。知識要點 1、DeviceMotionEvent 這是html5支援的重力感應事件,關於文檔請看:http://w3c.github.io/deviceorientation/spec-source-orientation.html事件介紹:deviceorientation 提供裝置的物理方向資訊,表示為一系列本地座標系的旋角。devicemotion
Time of Update: 2017-01-19
本文執行個體為大家分享了js實現日期聯動選擇的相關代碼,適用於生日的選擇,供大家參考,具體內容如下實現目標:年月日三個select 輸入框,以及一個hidden的input,通過js擷取input的值,如果有值切是日期格式,年月日select為input中的時間。否則為空白。年預設區間段為1900年到當今年份本人使用了bootstrap,class請參照bootstrap的相關說明下面是html 內容:<div class="col-sm-9"> <label
Time of Update: 2017-01-19
寫本文之前,我正在做一個基於Tab頁的訂單中心:每點擊一個TAB標籤,會請求對應狀態的訂單列表。之前的項目,我會在js裡使用 + 串連符串連多個html內容:var html = '';html += '<div class="empty-list">' + '<div class="icon
Time of Update: 2017-01-19
最近這段時間因為每天要修改網站,為網站做特效,所以看了很多的js接觸事件,自己只會使用一小部分,有時用的時候也比較混亂,現在系統的整理了一下,特此分享到雲棲社區平台供大家參考下!一、什麼是JavaScript事件?事件(Event)是JavaScript應用跳動的心臟,也是把所有東西粘在一起的膠水,當我們與瀏覽器中Web頁面進行某些類型的互動時,事件就發生了。事件可能是使用者在某些內容上的點擊、滑鼠經過某個特定元素或按下鍵盤上的某些按鍵,事件還可能是Web瀏覽器中發生的事情,比如說某個Web頁面
Time of Update: 2017-01-19
資料共用和資料傳遞是相輔相成的,我們一起來討論這個問題。首先要說的是共用和傳遞都是有範圍的。範圍就是起作用的地區,在同一個範圍資料可以共用,超過這個範圍就是跨範圍,就得用到資料傳遞了。範圍1.ui範圍每一個ui檔案預設都有對應的ui.js。他們作為一個閉合的範圍。ui.js雷根據ui檔案裡組件的id來擷取ui對象;不同的ui檔案可以定義相同id的組件。在ui.js裡定義的變數只能在這個js裡訪問。2.page範圍每次調用openPage都會開啟一個新的page,這個新的page會蓋在舊的page
Time of Update: 2017-01-19
本文執行個體為大家分享了雪花飛舞效果javascript實現,供大家參考,具體內容如下原理:1、js動態建立DIV,指定CLASS類設定不同的背景圖樣式顯示不同的雪花效果。2、js擷取建立的DIV並改變其top屬性值,當下落的高度大於螢幕高後刪除該移動div3、好像不夠完善勿噴效果預覽:http://wjf444128852.github.io/demo02/snow/index.htmlHTML代碼:<!DOCTYPE html><html lang="en"><
Time of Update: 2017-01-19
1.斷點調試是啥?難不難?斷點調試其實並不是多麼複雜的一件事,簡單的理解無外呼就是開啟瀏覽器,開啟sources找到js檔案,在行號上點一下罷了。操作起來似乎很簡單,其實很多人糾結的是,是在哪裡打斷點?(我們先看一個斷點截圖,以chrome瀏覽器的斷點為例)步驟記住沒?用chrome瀏覽器開啟頁面 → 按f12開啟開發人員工具 → 開啟Sources → 開啟你要調試的js代碼檔案 →
Time of Update: 2017-01-19
廢話不多說了,具體方法如下所示:方法一:返回新數組每個位子類型沒變function outRepeat(a){ var hash=[],arr=[]; for (var i = 0; i < a.length; i++) { hash[a[i]]!=null; if(!hash[a[i]]){ arr.push(a[i]); hash[a[i]]=true; } }
Time of Update: 2017-01-19
儘管 JavaScript 曆史上使用冗長而令人生厭的代碼塊來標的特定瀏覽器的時期已經結束了,但是偶爾使用一些簡單的代碼塊和對象檢測來確保一些代碼在使用者機器上正常工作依然是必要的。這篇文章中,我會略述一下 Internet Explorer 和 Firefox 在 JavaScript 文法上不同的 7 個方面。1. CSS “float” 屬性擷取給定對象的特定 CSS 屬性的基本文法是 object.style 屬性,而且有連字號的屬性要用駱駝命名法來代替。例如,擷取一個 ID 為
Time of Update: 2017-01-19
什麼是柯裡化柯裡化是這樣的一個轉換過程,把接受多個參數的函數變換成接受一個單一參數(譯註:最初函數的第一個參數)的函數,如果其他的參數是必要的,返回接受餘下的參數且返回結果的新函數。柯理化函數思想:一個js預先處理的思想;利用函數執行可以形成一個不銷毀的範圍的原理,把需要預先處理的內容都儲存在這個不銷毀的範圍中,並且返回一個小函數,以後我們執行的都是小函數,在小函數中把之前預先儲存的值進行相關的操作處理即可;柯裡化函數主要起到預先處理的作用;bind方法的作用:把傳遞進來的callback回調方
Time of Update: 2017-01-19
如果沒接觸過動態語言,以編譯型語言的思維方式去理解javaScript將會有種神奇而怪異的感覺,因為意識上往往不可能的事偏偏就發生了,甚至覺得不可理喻.如果在學JavaScript這自由而變幻無窮的語言過程中遇到這種感覺,那麼就從現在形始,請放下的您的”偏見”,因為這對您來說絕對是一片新大陸,讓JavaScrip慢慢融化以前一套凝固的編程意識,注入新的生機!好,言歸正傳,先理解JavaScrtipt動態變換運行時上下文特性,這種特性主要就體現在apply,