JS初探

最新推荐文章于 2023-08-20 11:06:32 发布

dgf5765

最新推荐文章于 2023-08-20 11:06:32 发布

阅读量55

点赞数

原文链接：http://www.cnblogs.com/pmlyc/p/8442047.html

版权

如何实现点击后，有下拉菜单的效果呢？

写一个JS效果的步骤：

一、先实现布局

二、实现原理

三、了解JS语法

1、JS获取效果元素

2、知道是什么事件（鼠标事件、键盘事件、表单事件、系统事件、自定义事件。。。。）

3、将要发生的时间添加到元素上

元素.事件

4、明确事件添加后干什么------函数：可以理解为一些命令

function name(){ //还是一个命令，肯定不会主动去执行的

任何想要做的事情

}

5、去执行

1）直接调用：name();

2）事件调用：元素.事件=函数名name；//切记：函数名后面不要括号

匿名函数的调用：

元素.事件=function（）{ }

3）......

要学会测试：

1.alert（‘内容’）;当引号、双引号都行

2.console.log()的使用

热身运动：实现动态改变宽高、背景色

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #wrap{
            padding: 10px;
        }
        #click_btn{
            background-color: red;
            width: 100px;
            height: 30px;
            color: #fff;
        }
        #box{
            width: 100px;
            height: 100px;
            border: 2px solid black;
        }
        #mark{
            width: 100%;
            height: 100%;
            background-color: black;
            opacity: 0.5;
            position: absolute;
            left: 0px;
            top: 0px;
            display: none;
        }
        .content{
            width: 350px;
            height: 300px;
            border: 20px solid #ffa;
            background-color: #fff;
            margin:150px auto;
            text-align: center;
        }
        .s_div{
            padding: 20px;
        }
        .s_div input[type="button"]{
            width: 40px;
            height: 30px;
            margin-right: 10px;
            cursor: pointer;

        }
        #reset,#sure{
            width: 80px;
            height: 50px;
            background-color: blue;
            color: white;
            margin: 20px auto;
            font-size: 16px;
            display: inline-block;
            margin-right:2px;
            line-height: 50px;
            cursor: pointer;
        }
        .color{
            color: white;
        }
        .red{
            background-color: red;
        }
        .yellow{
            background-color: yellow;
        }
        .blue{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <h3>请点击后设置：<input type="button" value="点击设置" id="click_btn"></h3>
        <div id="box"></div>
        <div id="mark">
            <div class="content">
                <div class="s_div" id="s_div">
                    <p title="color">请选择背景色：<input type="button" value="红" class="color red" title="red"><input type="button" value="黄" class="color yellow" title="yellow"><input type="button" value="蓝" class="color blue" title="blue"></p>
                    <p title="width">请选择宽[px]：<input type="button" value="200" title="200"><input type="button" value="300" title="300"><input type="button" value="400" title="400"></p>
                    <p title="height">请选择高[px]：<input type="button" value="200" title="200"><input type="button" value="300" title="300"><input type="button" value="400" title="400"></p>
                    <p><a type="button" id="reset">重置</a><a type="button"  id="sure">确定</a></p>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
        function $(id) {
            return document.getElementById(id);//其中的$只是一个函数名称，换成任何其他的都可以.这个就是个方法, 方法名字叫$ 参数为id. 这个是元素id.
        //传入这个id, 会拿到相应的html代码元素里相应的id的对象.
        }
        $('click_btn').onclick=function(){
            $('mark').style.display='block'
        }
        $('reset').onclick=function(){
            $('box').style.cssText="width:100px;height:100px;background-color:white;"
        }
    window.onload=function(){
        var oInput=$('s_div').getElementsByTagName('input');
        $('sure').onclick=function(){
            $('mark').style.display='none';
        }
        for(var i=0;i<oInput.length;i++){
            oInput[i].onclick=function(){
                var parenNode=this.parentNode.title;//父节点
                var title=isNaN(this.title)?this.title:this.title+'px';//判断是颜色还是数值，是颜色就传原值，是数值就加一个px
                switch(parenNode){
                    case 'color':$('box').style.background=title;
                    case 'width':$('box').style.width=title;
                    case 'height':$('box').style.height=title;
                }
            }
        }
        
    }
</script>
</html>

转载于:https://www.cnblogs.com/pmlyc/p/8442047.html

dgf5765

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS初探

如何实现点击后，有下拉菜单的效果呢？写一个JS效果的步骤：一、先实现布局二、实现原理三、了解JS语法1、JS获取效果元素2、知道是什么事件（鼠标事件、键盘事件、表单事件、系统事件、自定义事件。。。。）3、将要发生的时间添加到元素上元素.事件4、明确事件添加后干什么------函数：可以理解为一些命令function name(){ //...
复制链接

扫一扫

JS初探

“相关推荐”对你有帮助么？