原声js 笔记

简介: 原声js 笔记
<!DOCTYPE html>  
<html>  
    <head>  
        <title>设置一个元素是否可见</title>  
        <meta charset="utf-8">  
    </head>  
    <style type="text/css">  
        .tips{width:370px;background:#CCC;display:none;}  
    </style>  
    <script type="text/javascript">  
        //定义一个函数  
        function show_or_hide()  
        {  
            //通过id来获取一个元素  
            var objl =document.getElementById("get_p");  
            // 这种是行内样式的写法,形如:<p style="display:none;"></p>  
            if(objl.style.display == 'block')  
                objl.style.display = 'none';  
            else  
                objl.style.display = 'block';  
        }  
    </script>  
    <body>  
        <!-- 添加点击事件 -->  
        <input type="button" value="隐藏/显示" onclick="show_or_hide()" title="可以点击我一下">  
        <p id="get_p" class="tips" >  
            从前有座山,山上有座庙,庙里有个帅哥写代码  
        </p>  
    </body>  
</html>  
<!-- *************************************************************************************-->  
<!DOCTYPE html>  
<html>  
    <head>  
        <title>鼠标移入移出事件</title>  
        <meta charset="utf-8">  
    </head>  
    <style type="text/css">  
        #get_input{background:yellow;}  
    </style>  
    <script type="text/javascript">  
        function over_bg_color()  
        {  
            var obj = document.getElementById('get_input');  
            // 这种是行内样式的写法,形如:<p style="background:red;"></p>  
            obj.style.background='red';  
        }  
        function out_bg_color()  
        {  
            var obj = document.getElementById('get_input');  
            obj.style.background='yellow';  
        }  
    </script>  
    <body>  
        <!-- 添加鼠标移入移出事件 -->  
        <input id="get_input" type="button" value="隐藏/显示"onmouseover="over_bg_color()" onmouseout="out_bg_color()" >  
    </body>  
</html>  
<!-- *************************************************************************************-->  
<!DOCTYPE html>  
<html>  
    <head>  
        <title>二级菜单</title>  
        <meta charset="utf-8">  
        <style type="text/css">  
            #nav{height:50px;background:red;margin:50px auto 0px;}  
            a  
            {  
                float:left;width:250px;line-height:50px;  
                text-align:center;color:#FFF;text-decoration:none;  
            }  
            #detailed  
            {  
                width:250px;height:200px;background:red;  
                position:relative;border-top:2px solid yellow;  
                display:none;left:0px;  
            }  
        </style>  
        <script type="text/javascript">  
            function show_detailed(index)  
            {  
                var obj = document.getElementById('detailed');  
                // 设置元素可见  
                obj.style.display='block';  
                var move_left = 250*index-250;  
                move_left = move_left+"px";//将结果转换成字符串  
                obj.style.left =move_left;  
            }  
            function hide_detailed()  
            {  
                var obj = document.getElementById('detailed');  
                obj.style.display='none';  
            }  
        </script>  
    </head>  
    <body>  
        <div id="nav">  
            <!-- 这种直接在行内为元素添加事件不美观,可以写在JS里面 -->  
            <a href="#" onmouseover="show_detailed(1)"onmouseout="hide_detailed()"> 首页</a>  
            <a href="#" onmouseover="show_detailed(2)"onmouseout="hide_detailed()">家电</a>  
            <a href="#" onmouseover="show_detailed(3)"onmouseout="hide_detailed()">手机</a>  
            <a href="#" onmouseover="show_detailed(4)"onmouseout="hide_detailed()">付款方式</a>  
            <a href="#" onmouseover="show_detailed(5)"onmouseout="hide_detailed()">客服</a>  
        </div>  
        <div id="detailed">  
            <a href="#">一</a>  
            <a href="#">二</a>  
            <a href="#">三</a>  
            <a href="#">四</a>  
        </div>  
    </body>  
</html>  
<!-- *************************************************************************************-->  
<!DOCTYPE html>  
<html>  
    <head>  
        <title>改变物体外观</title>  
        <meta charset="utf-8">  
        <style type="text/css">  
            body{padding:200px;}  
            #change_box{width:300px;height:300px;background:#CCC;}  
        </style>  
        <script type="text/javascript">  
            function change_color(want_color)  
            {  
                var obj = document.getElementById('change_box');  
                obj.style.background = want_color;  
            }  
            function change_size(width_size,height_size)  
            {  
                var obj = document.getElementById('change_box');  
                obj.style.width = width_size+'px';  
                obj.style.height = height_size+'px';  
            }  
        </script>  
    </head>  
    <body>  
        <input type="button" value="变黄" onclick="change_color('yellow')">  
        <input type="button" value="变绿" onclick="change_color('green')">  
        <input type="button" value="变红" onclick="change_color('red')">  
        <input type="button" value="变大" onclick="change_size(500,600)">  
        <input type="button" value="变小" onclick="change_size(100,200)">  
        <div id="change_box"></div>  
    </body>  
</html>  
<!-- *************************************************************************************-->  
<!DOCTYPE html>  
<html>  
    <head>  
        <title>JS为元素添加事件</title>  
        <meta >  
        <meta charset="utf-8">  
    </head>  
    <body>  
        <input id="btn1" type="button" value="按钮" onclick="abc()" />  
        <script type="text/javascript">  
            // 下面这个获取元素的代码要写在该目标 元素的下面  
            // 因为程序是从上到下执行的,不然的话会报错  
            var obtn = document.getElementById('btn1');  
            function abc()  
            {  
                alert('这是一个弹窗');//可以是单引号,也可以是双引号  
            }  
            //obtn.οnclick=abc;//这种是直接在JS里面为元素添加事件的写法  
            //这里函数不能加括号  
        </script>  
    </body>  
</html>  
<!-- *************************************************************************************-->  
<!DOCTYPE html>  
<html>  
    <head>  
        <title>全选反选按钮</title>  
        <meta charset="utf-8">  
        <style type="text/css">  
            body{padding:150px;background:#CCC;}  
        </style>  
    </head>  
    <body>  
        <input type="button" id="btn_all" value="全选"></input>  
        <input type="button" id="btn_reversed" value="反选"></input>  
        <input type="button" id="btn_no" value="都不选"></input>  
        <div id="ware">  
            <input type="checkbox" ></input><input type="checkbox" ></input>  
            <input type="checkbox" ></input><input type="checkbox" ></input>  
            <input type="checkbox" ></input><input type="checkbox" ></input>  
        </div>  
    </body>  
    <script type="text/javascript">  
        function choose_all()  
        {  
            var obj = document.getElementById('ware');  
            //从一个目标元素中再获取元素  
            //下面是通过html元素名字来获取,结果是数组  
            var ch_b = obj.getElementsByTagName('input');  
            for(var i=0; i <= ch_b.length; i++)  
                //下面的语句类似于:<input type="checkbox" checked="true"></input>  
                ch_b[i].checked = true;  
        }  
        function choose_no()  
        {  
            var obj = document.getElementById('ware');  
            var ch_b = obj.getElementsByTagName('input');  
            for(var i=0; i <= ch_b.length; i++)  
                ch_b[i].checked = false;  
        }  
        function choose_reversed()  
        {  
            var obj = document.getElementById('ware');  
            var ch_b = obj.getElementsByTagName('input');  
            for(var i=0; i <= ch_b.length; i++)  
                ch_b[i].checked = ( ch_b[i].checked == true )? false:true;  
        }  
        //我并没有直接document.getElementById('');这样获取元素  
        //按理说要先获取元素,再来操作,不然是不行的,  
        //我也不知道为什么我的这段代码却可以  
        btn_all.onclick = choose_all;  
        btn_no.onclick = choose_no;  
        btn_reversed.onclick = choose_reversed;  
    </script>  
</html>  
<!-- *************************************************************************************-->  
<!DOCTYPE html>  
<html>  
    <head>  
        <title>选项卡</title>  
        <meta charset="utf-8">  
        <style type="text/css">  
            body{padding:150px;}  
            #xuan_xiang_ka{width:208px;height:350px;}  
            .title{height:50px;}  
            .title input{height:50px;width:50px;float:left;border:1px solid #CCC;margin-left:2px;}  
            .active{background:#5CB85C;}  
            #content_box{background:yellow;}  
            #content_box div{display:none;}/*设置子元素不可见*/  
        </style>  
    </head>  
    <body>  
        <div id="xuan_xiang_ka">  
            <div class="title">  
                <input class="active" type="button" value="新闻1"></input>  
                <input type="button" value="新闻2"></input>  
                <input type="button" value="新闻3"></input>  
                <input type="button" value="新闻4"></input>  
            </div>  
            <div id="content_box" >  
                <div style="display:block;">  
                    从前有座山1  
                </div>  
                <div>  
                    从前有座山2  
                </div>  
                <div>  
                    从前有座山3  
                </div>  
                <div>  
                    从前有座山4  
                </div>  
            </div>  
        </div>  
    </body>  
    <script type="text/javascript">  
        var an_niu = document.getElementsByTagName('input');  
        var temp =document.getElementById('content_box');  
        var wen_zhang =temp.getElementsByTagName('div');  
        for(var i=0; i < an_niu.length; i++)  
        {  
            an_niu[i].index = i;//为每个按钮添加序号  
            an_niu[i].onclick = function ()  
            {  
                for(var j=0; j < an_niu.length; j++)  
                {  
                    an_niu[j].className = '';//清除类  
                    wen_zhang[j].style.display = 'none';  
                }  
                this.className = 'active';//当前按钮添加活动类  
                wen_zhang[this.index].style.display ='block';//当前选项卡可见  
                //思路:在点击一个选项卡之前,把其他的选项卡都影藏,并清除类  
                //之后再为当前的选项卡添加属性  
            }  
        }  
    </script>  
</html>  
<!-- *************************************************************************************-->  
<!DOCTYPE html>  
<html>  
    <head>  
        <title>innerHTML练习</title>  
        <meta charset="utf-8">  
        <style type="text/css">  
            body{padding:50px;}  
            div{border:1px solid red;width:260px;height:200px;padding:20px;}  
        </style>  
    </head>  
    <body>  
        <input id="text1" type="text"></input>  
        <input id="btn1" type="button" value="设置文字"></input>  
        <div id="div1">  
            从前有座山  
        </div>  
    </body>  
    <script type="text/javascript">  
            var btn1 = document.getElementById('btn1');  
            var text1 = document.getElementById('text1');  
            var div1 = document.getElementById('div1');  
            btn1.onclick = function ()  
            {  
                // 让div里面的文字是text里面的文字  
                div1.innerHTML = text1.value;  
            }  
        </script>  
</html>  
<!-- *************************************************************************************-->  
<!DOCTYPE html>  
<html>  
    <head>  
        <title>月历选项卡</title>  
        <meta charset="utf-8">  
        <style type="text/css">  
            *{margin:0px;padding:0px;}  
            .ware{background:yellow;padding:15px 0px 15px 15px;width:285px;margin:100px auto;overflow:hidden;}  
            .month{overflow:hidden;}  
            span{float:left;width:80px;line-height:80px;text-align:center;font-size:16px;color:#FFF;font-weight:bold; margin-right:15px;margin-bottom:15px; background:#999;}  
            .tips{background:red;clear:both;width:240px;padding:15px;font-weight:bold;color:#FFF;}  
            .active{background:#FFF;color:black;}  
        </style>  
    </head>  
    <body>  
        <div class="ware">  
            <div class="month">  
                <span class="active">1</span><span>2</span><span>3</span>  
                <span>4</span><span>5</span><span>6</span>  
                <span>7</span><span>8</span><span>9</span>  
                <span>10</span><span>11</span><span>12</span>  
            </div>  
            <div id="setText" class="tips">  
            </div>  
        </div>  
    </body>  
    <script type="text/javascript">  
        var obj_month = document.getElementsByTagName('span');  
        var objTips = document.getElementById('setText');  
        var arr =[  
                '这个月有元旦',  
                '我们一起过年吧',  
                '这个月有38妇女节',  
                '4月分有什么节日呢?',  
                '哈哈劳动节快到了',  
                '可惜儿童节不属于我们',  
                '貌似有建党节吧',  
                '这个月有建军节吧么么哒',  
                '教师节到了,给老师一份祝福吧',  
                '一起看阅兵式吧',  
                '光棍节到了,有木有很伤心~',  
                '圣诞节不是中国的~'  
        ];  
        // 默认显示第一个月  
        objTips.innerHTML = '<p>1月活动'+'</p>'+arr[0];  
        for(var i=0; i < obj_month.length; i++)  
        {  
            obj_month[i].index = i;  
            obj_month[i].onmousemove = function ()  
            {  
                for(var j=0; j < obj_month.length; j++)  
                    obj_month[j].className = '';  
                this.className = 'active';  
                objTips.innerHTML = '<p>'+(this.index+1)+'月活动'+'</p>'+arr[this.index];  
            }  
        }  
    </script>  
</html>  
<!-- *************************************************************************************-->  
<!DOCTYPE html>  
<html>  
    <head>  
        <title>数组遍历</title>  
        <meta charset="utf-8">  
    </head>  
    <body>  
    </body>  
    <script type="text/javascript">  
        var colorS =['yellow','blue','green','pink','black'];  
        for( var x in colorS)//x 是下标  
        {  
            alert(colorS[x]);  
            //alert(x);  
        }  
    </script>  
</html>  
<!-- *************************************************************************************-->  
<!DOCTYPE html>  
<html>  
    <head>  
        <title>属性用变量代替</title>  
        <meta charset="utf-8">  
        <style type="text/css">  
            body{padding:400px; padding-top:200px;}  
            #box{width:300px;height:300px;background:yellow;}  
        </style>  
    </head>  
    <body>  
        <div id="box"></div>  
        <input type="button" value="点击我一下下~" id="btn"></input>  
    </body>  
    <script type="text/javascript">  
        var value = 'background';  
        var oBtn = document.getElementById('btn');  
        var oBox = document.getElementById('box');  
        oBtn.onclick = function ()  
        {  
            oBox.style[value] = 'red';  
            //等同于 oBox.style.background = 'red';  
        }  
    </script>  
</html>  
<!-- *************************************************************************************-->  
<!DOCTYPE html>  
<html>  
    <head>  
        <title>根据参数个数实现相应功能</title>  
        <meta charset="utf-8">  
    </head>  
    <body>  
        <div id="J_box" style="width:300px;height:240px;background:#CCC;margin:100px;"></div>  
    </body>  
    <script type="text/javascript">  
        var oBox = document.getElementById('J_box');  
        function css ()  
        {  
            if(arguments.length == 2)  
                alert(arguments[0].style[arguments[1]]);  
            if(arguments.length == 3)  
                arguments[0].style[arguments[1]] = arguments[2];  
        }  
        css(oBox,'width','800px');  
    </script>  
</html>  
<!-- *************************************************************************************-->  
<!DOCTYPE html>  
<html>  
    <head>  
        <title>获取非行间样式</title>  
        <meta charset="utf-8">  
        <style type="text/css">  
            #J_box{width:300px;height:240px;background:#CCC;margin:100px;}  
        </style>  
    </head>  
    <body>  
        <div id="J_box"></div>  
    </body>   
    <script type="text/javascript">  
        var oBox = document.getElementById('J_box');  
        if(oBox.currentStyle)  
            alert(oBox.currentStyle.width);//IE  
        else  
            alert(getComputedStyle(oBox,false).width);//FF  
        //采用变量的写法 alert(getComputedStyle(oBox , false)['width']);   
    </script>  
</html>  
 <script type="text/javascript">  
// 函数封装  
//     function getStyle(obj,name)  
//     {  
//         if( obj.currentStyle)  
//             return obj.currentStyle[name];//obj.currentStyle.width;  
//         else  
//             return getComputedStyle(obj,false)[name];//getComputedStyle(obj,false).width;  
//     }  
 </script>  


目录
相关文章
|
6月前
|
JavaScript 前端开发
JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
|
6月前
|
JavaScript 前端开发
JavaScript随手笔记 --- 用正则表达式匹配字符串是否为运算公式
JavaScript随手笔记 --- 用正则表达式匹配字符串是否为运算公式
|
14天前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
30 0
|
2月前
|
JavaScript 前端开发 Java
JavaScript笔记(回顾一,基础知识篇)
JavaScript基础知识点回顾,包括语言定义、ECMAScript规范、字面量、变量声明、操作符、关键字、注释、流程控制语句、数据类型、类型转换和引用数据类型等。
JavaScript笔记(回顾一,基础知识篇)
|
3月前
|
存储 缓存 自然语言处理
深入理解JS | 青训营笔记
深入理解JS | 青训营笔记
38 0
|
5月前
|
JavaScript vr&ar 数据库
技术笔记:Js获取当前日期时间及其它操作
技术笔记:Js获取当前日期时间及其它操作
120 1
|
5月前
|
Web App开发 JavaScript iOS开发
技术笔记:js数组定义和方法(包含ES5新增数组方法)
技术笔记:js数组定义和方法(包含ES5新增数组方法)
|
5月前
|
JavaScript BI
技术笔记:JS获取子节点、父节点和兄弟节点的方法实例总结
技术笔记:JS获取子节点、父节点和兄弟节点的方法实例总结
52 0
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的笔记记录分享网站附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的笔记记录分享网站附带文章源码部署视频讲解等
32 0
|
6月前
|
JavaScript 前端开发 Dart
JavaScript高级笔记-coderwhy版本(三)
JavaScript高级笔记-coderwhy版本
99 0
JavaScript高级笔记-coderwhy版本(三)