备案控制台
开发者社区 开发与运维 文章 正文

原声js 笔记

2023-04-14 48
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 原声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>


文章标签：
云数据库 ClickHouse
JavaScript
关键词：
JavaScript笔记
小满zs
目录
相关文章
我是夜阑的狗
|
8天前
|
JavaScript 前端开发
JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
我是夜阑的狗
29 1
我是夜阑的狗
|
8天前
|
JavaScript 前端开发
JavaScript随手笔记 --- 用正则表达式匹配字符串是否为运算公式
JavaScript随手笔记 --- 用正则表达式匹配字符串是否为运算公式
我是夜阑的狗
24 0
明月看潮生
|
8天前
|
JavaScript 前端开发 开发者
编程笔记 html5&css&js 071 JavaScript Symbol 数据类型
编程笔记 html5&css&js 071 JavaScript Symbol 数据类型
明月看潮生
24 0
Cool架构
|
8天前
|
JavaScript 前端开发 Java
JavaScript高级笔记-coderwhy版本（六）
JavaScript高级笔记-coderwhy版本
Cool架构
76 0
Cool架构
|
8天前
|
JavaScript 前端开发 Java
JavaScript高级笔记-coderwhy版本（一）
JavaScript高级笔记-coderwhy版本
Cool架构
37 0
JavaScript高级笔记-coderwhy版本（一）
穆雄雄.
|
8天前
|
JSON JavaScript 前端开发
Node.JS第二讲笔记
Node.JS第二讲笔记
穆雄雄.
33 0
我是夜阑的狗
|
8天前
|
JavaScript 前端开发 索引
JavaScript随手笔记---对比数组差异
JavaScript随手笔记---对比数组差异
我是夜阑的狗
17 0
JavaScript随手笔记---对比数组差异
我是夜阑的狗
|
8天前
|
JavaScript 前端开发
JavaScript随手笔记---轮播图（点击切换）
JavaScript随手笔记---轮播图（点击切换）
我是夜阑的狗
22 0
JavaScript随手笔记---轮播图（点击切换）
我是夜阑的狗
|
8天前
|
JSON JavaScript 前端开发
JavaScript随手笔记---数组中相同的元素进行分组（数据聚合） groupBy函数
JavaScript随手笔记---数组中相同的元素进行分组（数据聚合） groupBy函数
我是夜阑的狗
27 0
我是夜阑的狗
|
8天前
|
JavaScript 前端开发
JavaScript随手笔记---保留小数位
JavaScript随手笔记---保留小数位
我是夜阑的狗
19 0

热门文章

最新文章

  • 1
    JavaScript 权威指南第七版（GPT 重译）（六）(4)
  • 2
    JavaScript 权威指南第七版（GPT 重译）（三）(1)
  • 3
    JavaScript 权威指南第七版（GPT 重译）（二）(1)
  • 4
    JavaScript 权威指南第七版（GPT 重译）（四）(4)
  • 5
    JavaScript 权威指南第七版（GPT 重译）（七）(1)
  • 6
    JavaScript 权威指南第七版（GPT 重译）（六）(3)
  • 7
    JavaScript 权威指南第七版（GPT 重译）（三）(2)
  • 8
    【专栏】Vue.js和Node.js如何结合构建现代Web应用
  • 9
    JavaScript 权威指南第七版（GPT 重译）（一）(1)
  • 10
    JavaScript 权威指南第七版（GPT 重译）（五）(2)
  • 1
    监控内网电脑软件设计与实现：基于Node.js的服务器端架构分析
    148
  • 2
    Java Script 中的垃圾回收机制有哪些缺点
    20
  • 3
    描述 JavaScript 中的垃圾回收机制。
    24
  • 4
    如何使用 JavaScript 操作 DOM？
    20
  • 5
    解释 JavaScript 中的`map()`、`filter()`和`reduce()`方法的用途。
    22
  • 6
    JavaScript 中的数组方法有哪些？
    11
  • 7
    JS设置日期为0时0分0秒
    38
  • 8
    JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
    29
  • 9
    JavaScript随手笔记 --- 用正则表达式匹配字符串是否为运算公式
    24
  • 10
    深入理解JavaScript中的闭包与作用域链
    10

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • Node.js 入门教程文档
  • jQuery开发教程

    • 相关电子书

    更多
  • JavaScript函数
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 前端开发基础6：Node.js和LESS预编译工具
  • HTML及前端框架
  • CSS基础教程
  • 搭建Node.js编程环境
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考