资讯专栏INFORMATION COLUMN

javascript新手实例1-DOM基本操作

cocopeak / 2394人阅读

摘要:学习好多同学不知道怎么上手,跟着网上的新手教程做了一遍又觉得很简单,但是真正自己用起来又觉得写不出什么东西,我觉得学习最好的方法就是跟着有趣的例子做所以我们的口号是每天一例,轻松今天给大家带来第一个例子,简单操作,效果先看下图代码设置样式

学习javascript好多同学不知道怎么上手,跟着网上的新手教程做了一遍又觉得javascript很简单,但是真正自己用起来又觉得写不出什么东西,我觉得学习最好的方法就是跟着有趣的例子做,所以我们的口号是“每天一例,轻松javascript”

今天给大家带来第一个例子,简单Dom操作,效果先看下图

html代码



    
        
        DIV设置样式
        
        
    
    
        

请为下面的DIV设置样式:

请选择背景颜色

请选择宽度

  • 200
  • 300
  • 400

请选择高度

  • 400
  • 500
  • 600

css代码

ul li {
    display: inline;
    list-style-type: none;
}
p {
    float: left;
}
#mainbox {
    width: 740px;
    height: 420px;
    background: #ccc;
    float: left;
    padding: 10px;
}
#mainbox p {
    font-size: 20px;
    font-weight: bold;
    margin: 0;
    line-height: 38px;
}
#mainbox input {
    border: none;
    background: #ff0000;
    color: #fff;
    width: 100px;
    height: 40px;
    font-weight: bold;
    cursor: pointer;    
}
#setBox {
    width: 100px;
    height: 100px;
    border: 2px solid #000;
    margin: 20px 0;
    background: #fff;
}
#shadow {
    width: 100%;
    height: 100%;
    background: #000;
    position: absolute;
    opacity: 0.6;
    z-index: 9;
    display: none;
}
#jumpDiv {
    width: 270px;
    height: 170px;
    background: #fff;
    border: 10px solid #999;
    position: absolute;
    padding: 20px 0 0 30px;
    display: none;
    z-index: 99;
    left: 50%;
    top:15%;
    margin: 0 auto;
}
.controlBox {
    width: 100%;
    float: left;
}
.controlBox p {
    width: 120px;
    margin: 0;
    padding: 6px 0 0 0;
}
#jumpDiv ul {
    width: 140px;
    float: left;
    padding: 0;
    margin: 0;
}
#jumpDiv ul li {
    width: 30px;
    height: 30px;
    border: 1px solid #999;
    font-size: 10px;
    float: left;
    margin: 5px;
    background: #ffffd;;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    display: block;
}
#controlButton {
    text-align: center;
    padding: 5px 0 0 0;
    width: 100%;
    height: 30px;
    float: left;
}
#controlButton  input {
    width: 60px;
    height: 30px;
    background: #000080;
    text-align: center;
    color: #fff;
    line-height: 30px;
    border: 1px solid #ccc;
    cursor: pointer;
}

javascript代码

window.onload = function () {
    
    function luka(element) {
        //if (/#/.test(element) == true) 正则也可以匹配,不过正则的效率没有函数高,貌似任何语言都是
        if (element.indexOf("#") > -1) {
            return document.getElementById(element.replace(/#/,""));
        };
        if (element.indexOf(".") > -1) {
            return document.getElementsByClassName(element.replace(/./g,""));
        };
        if (/^[a-zA-Z]+&/.element = true) {
            return document.getElementsByTagName(element);
        };
        console.log(element);
    };
    
    //下面主要是为了偷懒写的循环,不然一个个li去学控制很烦,而且这样能让html看着很清爽,记住写代码就是要怎么偷懒怎么写,这里的偷懒是复用的意思,用最少的功能实现最优的功能
    function liClick() {
        var obj = luka("li");
        //console.log(obj.length);
        for (var i = 0; i < obj.length; i++) {
            obj[i].index = i;
            obj[i].onclick = function() {
                 var numClick = this.index;
                 if (0 <= numClick <= 2) {
                    luka("#setBox").style.backgroundColor = luka("li")[numClick].style.backgroundColor;
                 };
                 if (3 <= numClick <= 5) {
                    luka("#setBox").style.width = luka("li")[numClick].innerHTML+"px";
                 };
                 if (6 <= numClick <= 8) { //等效 numClick == 6 || numClick == 7 || numClick == 8
                    luka("#setBox").style.height = luka("li")[numClick].innerHTML+"px";
                 };
            };
        };
    };
    
    function shadow() {
        luka("#shadow").style.display = "none";
        luka("#jumpDiv").style.display = "none";
    };
    
    luka("#setButton").onclick = function() {
        luka("#shadow").style.display = "block";
        luka("#jumpDiv").style.display = "block";
    };
    
    luka("#reset").onclick = function() {
        luka("#setBox").style.width = "100px";
        luka("#setBox").style.height = "100px";
        luka("#setBox").style.backgroundColor = "#fff";
    };
    
    luka("#ok").onclick = shadow;
    luka("#shadow").onclick = shadow; //点击阴影关闭遮罩和弹出的控制框
    luka("#jumpDiv").onmouseover = liClick; //绑定事件响应的层
    
}

知识点

document.getElementById or getElementsByClassName or getElementsByTagName 这类操作我们经常要用,反复打,又麻烦,效率又低,所以我们封装一个库,方便之后调用,我写的这个:

luka("#id")这种方式就可以调用getElementById

luka(".id")调用getElementsByClassName

luka("element")调用getElementsByTagName

PS:为什么叫luka是因为我喜欢,我爱

不知道大家是不是和我一样,刚开始觉得遮罩很神奇,其实真做了就很简单,遮罩就是加了一个div的半透明层,操作一下控制这个层的display属性就可以简单的实现了

思考:

弹出的层怎么能用鼠标拖动呢?如果你有兴趣,实现了回复我吧

最后求大神指教,求大神优化代码

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/89030.html

相关文章

  • javascript新手实例1-DOM基本操作

    摘要:学习好多同学不知道怎么上手,跟着网上的新手教程做了一遍又觉得很简单,但是真正自己用起来又觉得写不出什么东西,我觉得学习最好的方法就是跟着有趣的例子做所以我们的口号是每天一例,轻松今天给大家带来第一个例子,简单操作,效果先看下图代码设置样式 学习javascript好多同学不知道怎么上手,跟着网上的新手教程做了一遍又觉得javascript很简单,但是真正自己用起来又觉得写不出什么东西,...

    phoenixsky 评论0 收藏0
  • javascript新手实例1-DOM基本操作

    摘要:学习好多同学不知道怎么上手,跟着网上的新手教程做了一遍又觉得很简单,但是真正自己用起来又觉得写不出什么东西,我觉得学习最好的方法就是跟着有趣的例子做所以我们的口号是每天一例,轻松今天给大家带来第一个例子,简单操作,效果先看下图代码设置样式 学习javascript好多同学不知道怎么上手,跟着网上的新手教程做了一遍又觉得javascript很简单,但是真正自己用起来又觉得写不出什么东西,...

    anRui 评论0 收藏0
  • javascript新手实例2-CSS操作

    摘要:他背后的故事,令人动容只是逗你玩为何小程序目前难以取代微信小程序也已经推出了一段时间了,在小程序面世伊始,有观点认为它能够取代手机,给用户带来更清爽的体验。 周末快乐,今天给大家一个经常会用的例子,TAB切换,TAB的原理就是用js来控制不同层的display属性,今天给大家这个也是同样的原理,还是操作css的更多,用js把文章显示区域的css对应切换,这样就实现了不同的显示效果。 还...

    ormsf 评论0 收藏0
  • javascript新手实例2-CSS操作

    摘要:他背后的故事,令人动容只是逗你玩为何小程序目前难以取代微信小程序也已经推出了一段时间了,在小程序面世伊始,有观点认为它能够取代手机,给用户带来更清爽的体验。 周末快乐,今天给大家一个经常会用的例子,TAB切换,TAB的原理就是用js来控制不同层的display属性,今天给大家这个也是同样的原理,还是操作css的更多,用js把文章显示区域的css对应切换,这样就实现了不同的显示效果。 还...

    mudiyouyou 评论0 收藏0
  • javascript新手实例2-CSS操作

    摘要:他背后的故事,令人动容只是逗你玩为何小程序目前难以取代微信小程序也已经推出了一段时间了,在小程序面世伊始,有观点认为它能够取代手机,给用户带来更清爽的体验。 周末快乐,今天给大家一个经常会用的例子,TAB切换,TAB的原理就是用js来控制不同层的display属性,今天给大家这个也是同样的原理,还是操作css的更多,用js把文章显示区域的css对应切换,这样就实现了不同的显示效果。 还...

    jayce 评论0 收藏0

发表评论

0条评论

cocopeak

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<