シンプルなグラフィックタブレット

<スタイル> 
　　スパン{位置：絶対;底：20ピクセル、左：30px;} 
　　入力{位置：絶対; Z -index：1 ;} 
　　入力：n番目 -child（1 ）{左：20ピクセル;} 
　　入力：n番目 -child （2 ）{左：60PX;} 
　　入力：n番目 -child（3 ）{左：100pxに;}
 </スタイル> 

<BODY> 
　　の<input type = " ボタン"値= " + " ID = " BTN1 " > 
　　<INPUTタイプ= 「ボタン」値= 「- 」ID = "BTN2 " > 
　　の<input type = " 色" ID = " 色" > 
　　の<span> </スパン> 
</ body> 

<SCRIPT> のvar ospan = document.querySelector（" スパン」）; // 选择控制元素VAR obtn1 = document.getElementById（" BTN1 " ）;
　　VARの obtn2 =のdocument.getElementById（" BTN2 " ）;
　　VAR ocolor =のdocument.getElementById（" 色" ）。// プリフォームの幅と高さ（円の大きさ）VAR
　　
 

　　
　　
 

　　
　　= W 5。;
　　VARの H = 5 ;
　　// プリフォームカラー
　　VaRの C = " ＃000 " ; 
 

 
　　document.onmousemove =関数（イベント）{ 
　　E = イベント ||ウィンドウ。イベント;
　　// にconsole.log（e.clientX、E .clientY）; // マウス（スクロール距離を含まないブラウザの可視領域に対する相対座標） 
　　ospan.innerHTML e.clientX + = " ＆ENSP ;,＆ENSP; " + e.clientY; //は、ページに表示座標
 

　　// ドットで構成されるライン：ポイントの作成、ハイライト・ワイドは、背景色を設定するために丸みを帯びた
　　VAR（odiv =のdocument.createElementを"DIV " ）; 
　　odiv.style.cssText = " 幅：" + W + " PX;高さ：" + + H " PX;ボーダーRADIUS：50％;背景：" + C + " ;位置：絶対;左：" + e.clientX + " PX; " + " 上：" + e.clientY + " PX 」、
　　document.body.appendChild（odiv）; // 迅速な選挙法のボディ：document.body; 
　　} 
 

　　// +クリック幅と高さ（円の大きさ）を追加するボタン 
　　obtn1を。onclickの= 関数（）{ 
　　W + =5 ; 
　　H + = 5 ; 
　　} 
 

　　// -クリックボタンは、幅と高さ（円の大きさ）が減少 
　　obtn2.onclick = 関数（）{
　　IF（W <= 5 || H <=を。5 ）{ 
　　W = 5 ; 
　　H = 5 ; 
　　} 他{ 
　　W - = 5。; 
　　H - = 5 ; 
　　} 
　　} 
 

　　// ボタンの色が変化、修正色値 
　　ocolor.onchange =関数（）{ // 変更イベントと変色色で（のonclickイベント変更内容は、常に色を取得するために、ステップの後ろになります最後のステップ）である
　　// はconsole.log（this.value）;// 現在のカラーの値を取得 
　　C = この.Valueのを; 
　　}

 </ SCRIPT>
シンプルなグラフィックタブレット

おすすめ
