转载的JavaScript的文章有助于大家学习

最新推荐文章于 2024-12-01 10:14:15 发布

程序猿与攻城狮

最新推荐文章于 2024-12-01 10:14:15 发布

阅读量140

点赞数 1

分类专栏：代码解答Java开发的问题文案分享文章标签： JavaScript

文案分享同时被 3 个专栏收录

19 篇文章

订阅专栏

解答Java开发的问题

14 篇文章

订阅专栏

代码

11 篇文章

订阅专栏

本文介绍使用JavaScript进行动态网页设计的方法，包括样式动态调整、文本大小变化、复选框值显示、时间获取、节点动态增删等实用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原

Js---练习小项目

2018年10月20日 15:50:53 浮生醉清风i 阅读数 1540

                    版权声明：若要转载请声明出处！                        https://blog.youkuaiyun.com/weixin_41678001/article/details/83213654                    </div>
                                    <link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/ck_htmledit_views-cd6c485e8b.css">
                                                        <link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/ck_htmledit_views-cd6c485e8b.css">
                <div class="htmledit_views" id="content_views">
                    <h1><a name="t0"></a><span style="color:#3399ea;">添加样式：</span></h1>


 
 
   
   
    
    
   
   
   
   
    
     
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <!DOCTYPE html>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <html>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <head lang="en">
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         <meta charset="UTF-8">
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         //可以存在多个style标签
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         <style>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             .div1{width: 30%; height: 30%;background-color: aqua;}
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         </style>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         <style>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             .div1{width: 30%; height: 30%;background-color: red;}
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         </style>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         <script>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             //获取第二个样式表的样式
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             var sheet=document.styleSheets[1];
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             function test(){
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 //样式是否不可见，false可见，true不可见
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 sheet.disabled=false
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             }
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             function test1(){
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 sheet.disabled=true
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             }
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             function add(){
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 // 插入一个样式
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 sheet.insertRule(".div1{border:double}",1); // insertRule(“规则”，在第几个样式表)
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             }
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             function del(){
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 //删除第几个样式表的样式
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 sheet.deleteRule(1)
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             }
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         </script>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     </head>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <body>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <input value="红色" type="button" οnclick="test()">
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <input value="蓝色" type="button" οnclick="test1()">
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <input value="添加" type="button" οnclick="add()">
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <input value="删除" type="button" οnclick="del()">
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <div class="div1" style="width: 500px;height: 100px"> aa </div>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     </body>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     </html>

任意放大缩小文字：

※关键是设置一个全局变量记录字体大小。

经常用(document.getElementById("id").style.属性="值" 需要加引号 )通过DOM修改样式，而不用element.setAttribute(属性名,值)设置样式。


 
 
   
   
    
    
   
   
   
   
    
    
     
     <!DOCTYPE html>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <html>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <head lang="en">
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         <meta charset="UTF-8">
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         <script>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             var size=16;
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             function change() {
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 // 通过DOM修改修改元素的样式
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 var t = document.getElementById('div1');
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 //修改t的背景颜色样式
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 t.style.backgroundColor="red";
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 t.style.fontSize = "80px";
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             }
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             function save(){
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 var t = document.getElementById('div1');
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 t.style.backgroundColor=null;
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 t.style.fontSize = "16px";
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             }
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             function big(){
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 size=size+5;
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 document.getElementById('a1').style.fontSize =size+"px";
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             }
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             function small(){
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 size=size-5;
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 document.getElementById('a1').style.fontSize =size+"px";
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             }
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         </script>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     </head>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <body>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <!-"onmouseover":鼠标移上去触发的事件，"onmouseout"：鼠标挪开触发的事件->
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <div id="div1" οnmοuseοver="change()" οnmοuseοut="save()"> 百度一下 </div>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <a id="a1">百度一下</a>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <input value="放大" type="button" id="a" οnclick="big()">
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <input value="缩小" type="button" οnclick="small()">
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     </body>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     </html>

同时显示多个被选复选框的值：

※：同一类的复选框的name应该相同。checkd判断是否选中，返回bool值。

innerHTML可读可写，获取的值为带标签的文字。innerText获取文字，不带标签。


 
 
   
   
    
    
   
   
   
   
    
     
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <!DOCTYPE html>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <html>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <head lang="en">
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         <meta charset="UTF-8">
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         <title></title>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         <script>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             function show(){
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 var text = "";
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 var t=document.getElementById('div1');
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 // 通过相同的name获取到一个数组
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 var likes=document.getElementsByName("like");
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     //            循环遍历检查所有选中的框
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 for(var i=0;i<likes.length;i++) {
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                    //判断时候被选中 
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                    if(likes[i].checked==true){
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                         text += likes[i].value+" "
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                     }
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 }
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 // 往固定的区域写入内容
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 t.innerHTML="您的选择是"+text;
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             }
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         </script>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     </head>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <body>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     //name必须相同
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     登山<input type="checkbox" name="like" value="登山" οnchange="show()"><br>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     游泳<input type="checkbox" name="like" value="游泳" οnchange="show()"><br>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     看书<input type="checkbox" name="like" value="看书" οnchange="show()"><br>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     钢琴<input type="checkbox" name="like" value="钢琴" οnchange="show()">
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <div id="div1"></div>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     </body>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     </html>

获取时间：

※：通过toLocaleString转换为中文样式。


 
 
   
   
    
    
   
   
   
   
    
    
     
     <!DOCTYPE html>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <html>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <head lang="en">
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         <meta charset="UTF-8">
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         <title></title>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         <script>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             function system_time(){
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 // 初始化一个time对象
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 var time=new Date();
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 // 获取当前年
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 var year=time.getFullYear();
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 // 获取当前月份，从0开始所以+1
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 var month=time.getMonth()+1;
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 // 获取当前日期
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 var day=time.getDate();
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 // 获取小时
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 var hour=time.getHours();
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 // 获取分钟
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 var mi=time.getMinutes();
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 // 获取秒数
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 var se=time.getSeconds();
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 // 美化格式
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 if(month<10){month="0"+month}
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 if(day<10){day="0"+day}
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 if(hour<10){hour="0"+hour}
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 if(mi<10){mi="0"+mi}
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 if(se<10){se="0"+se}
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 var text=year+"-"+month+"-"+day+"-"+hour+":"+mi+":"+se;
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 div1.innerHTML=text;
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             }
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         </script>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     </head>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     // 当加载body时触发函数   setInterval(def,time)  每多长时间(ms)运行函数def
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <body οnlοad="setInterval(system_time,1000)">
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <div id="div1"></div>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     </body>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     </html>

动态添加和删除节点：

※：createElement(‘标签名’) 创建一个标签。 createTextNode("文本内容") 创建一个文本节点。

通过appendchild(添加的元素) 添加内容。removechild("要删除的节点") 删除一个节点


 
 
   
   
    
    
   
   
   
   
    
     
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <!DOCTYPE html>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <html>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <head lang="en">
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         <meta charset="UTF-8">
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         <title></title>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         <script>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             function add(){
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     //          获取要修改的标签
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 var a=document.getElementById("div1");
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     //            创建P标签
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 var p1=document.createElement("p");
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     //            创建文本节点
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 var t=document.createTextNode("添加节点");
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     //            创建好的标签吃掉文本节点
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 p1.appendChild(t);
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     //            要修改的标签吃掉创建好的标签
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 a.appendChild(p1)
    
    
   
   

   
   
    
    
   
   
   
   
    
     
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             }
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             function del(){
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     //            获取删除的div
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 var a=document.getElementById("div1");
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     //            删除该标签的最后一个子节点
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 a.removeChild(a.lastElementChild);
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             }
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         </script>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     </head>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <body>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <input type="button" value="添加节点" οnclick="add()">
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <input type="button" value="删除节点" οnclick="del()">
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <div id="div1"></div>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     </body>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     </html>