A. 我用table寫了一個表格,我想用js當我往數字1那輸入數字時,後面的數字2,數字3格都自動填充數字1里的數字
<script type="text/javascript">
function fill(obj){
$('#num2').val(obj);
$('#num3').val(obj);
}
</script>
<table border="1">
<tr>
<td>付款內容1</td>
<td>付款2</td>
<td>付款3</td>
</tr>
<tr>
<td><input name="num1" id="num1" onpropertychange="fill($(this).val())"/></td>
<td><input name="num2" id="num2"/></td>
<td><input name="num3" id="num3"/></td>
</tr>
</table>
B. fabricjs 濡備綍緇欐枃瀛楄劇疆鍥劇墖鑳屾櫙錛
鎮ㄥ彲浠ヤ嬌鐢╢abricjs鐨凾extbox鍏冪礌鏉ヨ劇疆鏂囧瓧鍜屽浘鐗囪儗鏅銆傞栧厛錛屾偍闇瑕佸壋寤轟竴涓猣abricjs鐢誨竷銆傜劧鍚庯紝鎮ㄥ彲浠ヤ嬌鐢╝dd()鏂規硶灝員extbox鍏冪礌娣誨姞鍒扮敾甯冧腑銆傚湪Textbox鍏冪礌涓錛屾偍鍙浠ヤ嬌鐢╢ill()鏂規硶璁劇疆鏂囨湰棰滆壊錛屽苟浣跨敤backgroundImage灞炴ц劇疆鍥劇墖鑳屾櫙 銆
榪欓噷鏈変竴涓渚嬪瓙錛
```javascript
var canvas = new fabric.Canvas('c');
var textbox = new fabric.Textbox('Hello World', {
left: 50,
top: 50,
width: 150,
fontSize: 20,
backgroundImage: 'path/to/image.jpg'
});
canvas.add(textbox);
```
C. JS數組方法
數組的創建方式
1.字面量的形式: var arr=[1,2,3];
1.構造函數: var arr1=new Array();//不常用
Array構造函數有一個很大的缺陷,就是不同的參數,會導致它的行為不一致。
1.單個數值作為參數,參數表示數組的元素個數
可以看到,Array作為構造函數,行為很不一致。因此,不建議使用它生成新數組,直接使用數組字面量是更好的做法。
push/pop/unshift/shift//增加、刪除元素 (數組的方法,所以使用時應調用
數組名.方法名())
arr. slice/splice//截取元素
arr.slice(); 原數組不發生改變
無參數時,返回原數組,相當於數組的復制。
一個參數時,從參數作為下標的元素截取,至數組結束。
二個參數時,從第一個參數作為下標(索引)的元素開始截取,到第二個參數作為下標的元素結束,但不包括第二個參數作為下標的函數。 (起始元素包含,結尾元素不包含)
多個參數時,前兩個參數起效,後邊的參數無效。
arr.splice(); 原數組改變
無參數時,返回空數組。
一個參數時,從參數作為下標的元素截取,至數組結束。
二個參數時,從第一個參數作為下標(索引)的元素開始截取,即表示截取的起始位置,第二個參數表示截取的元素個數。
多個參數時,前兩個參數起效,後邊的參數從原數組的截取起始位置開始填充,填充到原數組。
reverse/sort//改變元素位置
arr.reverse(); //數組翻轉(元素位置顛倒)
arr.sort(); 從小到大排序,但遵循的是字元串的按位比較規則,所以排序結果容易出現異常。
join();//不改變原數組
join() 以指定參數作為連接符,將所有數組成員連接為一個字元串返回。如果不提供參數,默認用逗號分隔。
concat();//拼接數組 不改變原數組
ES5新增數組操作方法
indexOf (item) 返回元素在數組中對應的索引值,找不到的話,返回-1,用以測試元素是否存在於數組中
forEach(function(item,index)) 遍歷數組,沒有返回值
map(function(item,index)) 遍歷數組,存在返回值
filter(function(item)) {return item>2} 返回大於2的元素
some 返回布爾值,條件部分成立|| arr.some(function(item){return item>2} )
every 返回布爾值,條件全部成立&& arr.every(function(item){return item>2} )
rece (對數組中的所有元素調用指定的回調函數。該回調函數的返回值為累積結果,並且此返回值在下一次調用該回調函數時作為參數提供。)arr.rece(function(a,b){return a+b;});
toString()和toLocaleString()
功能:將數組的每個元素轉化為字元串,並且輸出用逗號分隔的字元串列表。功能類似join();
參數:無
輸出:字元串
indexOf()和lastIndexOf()
功能:搜索整個數組中具有給定值的元素,返回找到的第一個元素的索引或者如果沒有找到就返回-1;lastIndexOf為反向搜索。
參數:元素的值,起點索引(可選)
輸出:索引值或-1
Array.from()
功能:將兩類對象轉為真正的數組:類似數組的對象和可遍歷的對象
參數:待轉換的對象,第二個參數可選,作用類似於數組的map方法,用來對每個元素進行處理,將處理後的值放入返回的數組。
輸出:數組
Array.of()
功能:將一組值,轉換為數組。
參數:數組元素
輸出:數組
Within()
功能:在當前數組內部,將指定位置的成員復制到其他位置,返回變化後的數組。
參數:索引(從該位置開始替換數據);索引(從該位置開始讀取數據,默認為0,負值表示倒數);索引(到該位置前停止讀取,默認為最大索引)
輸出:返回當前替換後的數組。
注意:改變了當前數組
find()和findIndex()
功能:找到第一個符合條件的數組成員。
參數:回調函數,所有數組成員依次執行該函數,直到找到第一個返回值為true的成員。回調函數可以接受三個參數,依次為值,位置,原數組。
輸出:find()返回找到的成員;findIndex()返回成員的位置。
fill()
功能:使用給定的值,填充一個數組。
參數:第一個參數為待填充的值,第二和第三參數可選,分別表示填充的起始和結束位置(不包括)。
輸出:填充後的數組
entries()、keys()、values()
功能:用於遍歷數組,可以用for…of循環進行遍歷。區別是keys()是對鍵名的遍歷、values是對鍵值的遍歷、entries()是對鍵值對的遍歷。
參數:無
輸出:遍歷器對象
includes()
功能:表示某個數組是否包含給定的值
參數:第一個參數必選(待檢查的給定值),第二個參數可選,表示搜索的起始位置,默認為0,負數表示倒數的位置。
輸出:一個布爾值。
注意:和indexOf的區別,indexOf進行了運算符的強比對,會導致對NaN誤判。
D. JS代碼,創建一個長度為20的數組,並輸出1到100任意的20個數(最好寫一下注釋)
var arr=Array(20)://創建20個空數組
arr=arr.fill(0).map(function(item){ return item+=Math.ceil(Math.random()*100);});//先用0填充,再專每項加一個屬1-100隨機數
E. d3.js魚眼插件效果是怎麼實現的
D3 提供了 4 個方法用於實現圖形的過渡:
- transition()
啟動過渡效果,其前後是圖形變化前後的狀態(形狀、位置、顏色等等),例如:
.attr("fill","red") //初始顏色為紅色.transition() //啟動過渡.attr("fill","blue") //終止顏色為藍色
D3 會自動對兩種顏色(紅色和藍色)之間的顏色值(RGB值)進行插值計算,得到過渡用的顏色值。
- ration()
指定過渡的持續時間,單位為毫秒。
如 ration(2000) ,指持續 2000 毫秒,即 2 秒。
- ease()
指定過渡的方式,常用的有:
linear:普通的線性變化
circle:慢慢地到達變換的最終狀態
elastic:帶有彈跳的到達最終狀態
bounce:在最終狀態處彈跳幾次
調用時,格式形如: ease("bounce")。
- delay()
指定延遲的時間,表示一定時間後才開始轉變,單位同樣為毫秒。此函數可以對整體指定延遲,也可以對個別指定延遲。
例如,對整體指定時:
如此,圖形整體在延遲 500 毫秒後發生變化,變化的時長為 1000 毫秒。因此,過渡的總時長為1500毫秒。
又如,對一個一個的圖形(圖形上綁定了數據)進行指定時:
如此,假設有 10 個元素,那麼第 1 個元素延遲 0 毫秒(因為 i = 0),第 2 個元素延遲 200 毫秒,第 3 個延遲 400 毫秒,依次類推….整個過渡的長度為 200 * 9 + 1000 = 2800 毫秒。
1. 實現簡單的動態效果
下面將在 SVG 畫布里添加三個圓,圓出現之後,立即啟動過渡效果。
- 第一個圓,要求移動 x 坐標
-第二個圓,要求既移動 x 坐標,又改變顏色
-第三個圓,要求既移動 x 坐標,又改變顏色,還改變半徑