Heim > Web-Frontend > js-Tutorial > Hauptteil

Einfache Entwicklung eines JavaScript-Skizzenblocks

高洛峰
Freigeben: 2016-12-09 13:57:00
Original
1177 Leute haben es durchsucht

Das Beispiel in diesem Artikel zeigt die Methode zum Erstellen eines einfachen JavaScript-Zeichenbretts als Referenz. Der spezifische Inhalt lautet wie folgt:

<body id="bodys">
<span id="eraser">
清除所有
</span>
<span id="colorbtn">
笔画颜色
</span>
<input type="range" name="ram" id="ram" min="1" max="20" step="1" value="10"/>
<label id="ramnum">字体大小:10px</label>
<ul id="colorpanel">
<li>黑色</li>
<li>红色</li>
<li>绿色</li>
<li>蓝色</li>
</ul>
</body>
Nach dem Login kopieren

CSS:

*{
margin: 0;
padding: 0;
 }
.box_black{
background-color: black;
position: absolute;
}
.box_red{
background-color: red;
position: absolute;
}
.box_green{
background-color: green;
position: absolute;
}
.box_blue{
background-color: blue;
position: absolute;
}
#eraser{
width: 80px;
height: 50px;
background-color: brown;
display: inline-block;
text-align: center;
line-height: 50px;
cursor: pointer;
}
#colorbtn{
width: 80px;
height: 50px;
background-color: tomato;
display: inline-block;
text-align: center;
line-height: 50px;
cursor: pointer;
}
#colorpanel{
width: 80px;
height: 200px;
list-style: none;
margin-left: 88px;
display: none;
}
#colorpanel>li{
width: 80px;
height: 50px;
text-align: center;
line-height: 50px;
background-color: aquamarine;
display: inline-block;
cursor: pointer;
}
#colorpanel>li:hover{
background-color: orange;
}
Nach dem Login kopieren

Javascript:

window.onload=function(){
 
   //把类名存成一个数组
 var classname=["box_black","box_red","box_green","box_blue"];
 //默认类名为box_black
 var clsname=classname[0];
 var oBody=document.getElementById("bodys");
 var oDiv=oBody.getElementsByTagName("div");
 var eraser=document.getElementById("eraser");
 var colorbtn=document.getElementById("colorbtn");
 var colorpanel=document.getElementById("colorpanel");
 var ram=document.getElementById("ram");
 var ramnum=document.getElementById("ramnum");
   colorbtn.onmouseover=function(){
   colorpanel.style.display="block";
   }
    colorbtn.onmouseout=function(){
   colorpanel.style.display="none";
   }
    colorpanel.onmouseover=function(){
    this.style.display="block";
    }
    colorpanel.onmouseout=function(){
    this.style.display="none";
    }
    for(var i=0;i<colorpanel.children.length;i++){
    colorpanel.children[i].index=i;
    colorpanel.children[i].onclick=function(){
    //鼠标点击li切换类名来改变样式
    clsname=classname[this.index];
    colorpanel.style.display="none";
    }
    }
    //定义默认字体大小为10px
    var WIDTH="10px";
    var HEIGHT="10px";
    //通过滑动range来改变字体大小
    ram.onmousemove=function(){
    WIDTH=HEIGHT=ram.value+"px";
    ramnum.innerHTML="字体大小:"+WIDTH;
    }
    //鼠标点击屏幕,通过滑动鼠标不停创建div属性节点,并且给它设置样式
document.onmousedown=function(){
 document.onmousemove=function(event){
 var oevent=event||window.event;
 var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
 var scrollleft=document.documentElement.scrollLeft||document.body.scrollLeft;
 var box=document.createElement("div");
    box.className=clsname;
    box.style.width=WIDTH;
    box.style.height=HEIGHT;
    oBody.appendChild(box);
    box.style.left=scrollleft+oevent.clientX+"px";
    box.style.top=scrolltop+oevent.clientY+"px";
}
}
//当鼠标按键松开,注销鼠标滑动事件
document.onmouseup=function(){
document.onmousemove=null;
}
//当橡皮差按钮被点击,遍历所有div并且把它们一一从父节点里面移除
eraser.onclick=function(){
var oDiv=oBody.getElementsByTagName("div");
for(var i=0;i<oDiv.length;i++){
oBody.removeChild(oDiv[i]);
}
}
//以下为取消按钮的冒泡事件,因为我们点击按钮是不能绘制div的
eraser.onmousedown=function(event){
var ievent=event||window.event;
ievent.cancelBubble=true;
}
colorbtn.onmousedown=function(event){
var ievent=event||window.event;
ievent.cancelBubble=true;
}
colorpanel.onmousedown=function(event){
var ievent=event||window.event;
ievent.cancelBubble=true;
}
ram.onmousedown=function(event){
var ievent=event||window.event;
ievent.cancelBubble=true;
}
}
 
}
Nach dem Login kopieren

Dies ist auf der Grundlage von JavaScript-Ereignissen geschrieben, was relativ einfach ist und tatsächlich weiter optimiert werden kann. Schauen wir uns die Renderings unten an.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!