JS 篇（5）

最新推荐文章于 2022-08-08 10:31:39 发布

Dawn___

最新推荐文章于 2022-08-08 10:31:39 发布

阅读量424

点赞数

分类专栏：学习笔记文章标签： javascript

本文链接：https://blog.csdn.net/Dawn___/article/details/65633305

版权

学习笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

设置节点属性

1.获取节点属性

getAttribute(属性) 获取属性

    alert(demo.getAttribute("title"));

2.设置节点属性

setAttribute(“属性”,”值”)；
将类名改为:demo:div.setAttribute(“class”,”demo”);

3.删除某个属性

removeAttribute(“属性”)；
demo.removeAttribute(“title”)
这个盒子就没有title属性了

A.appendChild(B);
B一定是A的孩子，同时B放到了A的里面的最后
A. insertBefore(B,C)
B,C 都是A的孩子；把B放到A里面，但是是C的前面

节点的操作

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
    window.onload = function(){
    var demo = document.getElementById("demo");
    var btn = document.getElementsByTagName("button")[0];
    btn.onclick = function(){
    // 创建新的节点
    var newli = document.createElement("li");
    newli.innerHTML = "文字";
    // 插入节点
    demo.appendChild(newli);   
    //子节点要放入的是父亲的最后面 
    demo.appendChild(demo.cloneNode());                                                        
    demo.parentNode.appendChild(demo.cloneNode());
    //我的爸爸添加孩子相当于给我的兄弟
    }
    }
    </script>
    </head>
    <body>
    <button>点击</button>
    <ul id="demo">
    </ul>
    </body>
    </html>

京东轮播图

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
    *{margin:0;padding:0;}
    ul,ol{list-style:none}
    .box {
    width: 730px;
    height: 454px;
    margin: 100px auto;
    overflow: hidden;
    position: relative;
    }
    .circle {
    position: absolute;
    left: 50%;
    margin-left:-50px;
    bottom:10px;
    }
    .circle span {
    float: left;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: pink;
    text-align: center;
    line-height: 18px;
    margin-right: 10px;
    cursor: pointer;
    }
    .circle span.current {
    background-color: purple;
    }
    </style>
    <script>
    window.onload = function(){
    var scroll = document.getElementById("scroll");
    var circle = document.createElement("div");   // 新的
    //circle.className = "circle";  // 更改的类名
    circle.setAttribute("class","circle");   // 更为常用
    scroll.appendChild(circle);
    var ul = document.getElementById("ul");
    var lis = ul.children;  // ul 的所有孩子
    //alert(lis.length);
    // 生成了新的大盒子

    // 大盒子里面要放入 n个小的span
    for(var i=0; i<lis.length; i++)
    {
    var newspan = document.createElement("span");  // 创建 6次 span
    newspan.innerHTML = i+1;
    circle.appendChild(newspan);
    }
    var child = circle.children;
    child[0].setAttribute("class","current");  // 第一个孩子 添加 current
    }
    </script>
    </head>
    <body>
    <div class="box" id="scroll">
    <div class="slider">
    <ul id="ul">
    <li><img src="images/11.jpg" alt=""/></li>
    <li><img src="images/22.jpg" alt=""/></li>
    <li><img src="images/33.jpg" alt=""/></li>
    <li><img src="images/44.jpg" alt=""/></li>
    <li><img src="images/55.jpg" alt=""/></li>
    <li><img src="images/55.jpg" alt=""/></li>
    <li><img src="images/66.jpg" alt=""/></li>
    </ul>
    </div>
    <!--<div class="circle">-->
    <!--<span>1</span>-->
    <!--<span>2</span>-->
    <!--<span>3</span>-->
    <!--<span>4</span>-->
    <!--<span>5</span>-->
    <!--<span>6</span>-->
    <!--</div>-->
    </div>
    </body>
    </html>

效果如图（根据图片多少自动生成小圆圈）：
这里写图片描述

微博发布

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
    ul{
    list-style-type: none;}
    *{margin:0;padding: 0;}
    .box {
    margin: 100px auto;
    width: 600px;
    height: auto;
    border:1px solid #333;
    padding: 30px 0;
    }
    textarea {
    width: 450px;
    resize: none;  /*防止用户拖动 右下角*/
    }
    .box li {
    width: 450px;
    line-height: 30px;
    border-bottom:1px dashed #ccc;
    margin-left: 80px;
    }
    .box li a {
    float: right;
    }
    </style>
    <script>
    window.onload = function(){
    //获取对象   再次操作对象
    var btn = document.getElementsByTagName("button")[0];
    var txt = document.getElementsByTagName("textarea")[0];
    var ul = document.createElement("ul");  // 创建ul
    btn.parentNode.appendChild(ul);  // 追加到  他的父亲里面
    btn.onclick = function(){
    if(txt.value == "")
    {
    alert("输入不能为空");
    return false;  // 终止函数执行
    }
    var newli = document.createElement("li");
    newli.innerHTML = txt.value + "<a href ='javascript:;'>删除</a>";  // 把表单的值给  新li
    txt.value = "";  // 清空 表单
    var lis = ul.children;  // 获得有多少个li
    //  if else  这个片段  让我们新发布的内容 最上显示
    if(lis.length == 0)  //  第一次创建
    {
    ul.appendChild(newli); // ul 的后面追加
    }
    else
    {
    ul.insertBefore(newli,lis[0]);  // 每次生成的新的li 放到第一个li 的前面
    }
    var as = document.getElementsByTagName("a");  // 获得所 a
    for(var i=0; i<as.length;i++)
    {
    as[i].onclick = function(){
    //removeChild
    ul.removeChild(this.parentNode);  // UL   他的爸爸
    // a 的粑粑是 li
    }
    }
    }
    }
    </script>
    </head>
    <body>
    <div class="box">
    微博发布: <textarea name="" id="" cols="30" rows="10"></textarea>  <button>发布</button>
    </div>
    </body>
    </html>

这里写图片描述

日期函数Date()

1.声明日期

    var date = new Date();

声明一个新的日期函数赋值给了date

2.使用函数

    date.getTime();
    date.valueOf();
    //得到距离某个年份的毫秒数

    var date = new Date();//声明
    console.log(date.getTime());//提倡使用的
    console.log(date.valueOf());
    //直接使用
    console.log(Date.now());
    console.log(+new Date());

3.常用的日期方法

获取日期和时间
getDate() —— 获取日1-31
getDay() —— 获取星期0-6
getMonth() —— 获取月0-11
getFullYear() —— 获取完整年份( 浏览器都支持)
getHours() —— 获取小时0-23
getMinutes() —— 获取分钟0-59
getSeconds() —— 获取秒0-59
getMilliseconds() —— 获取当前的毫秒
getTime() —— 返回累计毫秒数（从1970、1/1午夜）

日历

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
    .box{
    width: 150px;
    height: 180px;
    background-color: #369;
    margin: 100px auto;
    text-align: center;
    }
    .box p {text-align: center;
    line-height: 60px;
    font-size:12px;
    color: #fff;
    }
    .box span{
    display: block;
    width: 75px;
    height: 75px;
    margin: 0 auto;
    font-size:50px;
    color: #000;
    background-color: yellowgreen;
    line-height: 75px;
    }
    </style>
    <script>
    window.onload = function(){
    var box = document.getElementById("box");
    var boys = box.children;
    //日期函数
    var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
    var date = new Date();   // 声明日期函数
    boys[0].innerHTML = date.getFullYear()+"年"+ (date.getMonth()+1) +
             "月" + date.getDate() + "日" + "  " + arr[date.getDay()];
             boys[1].innerHTML = date.getDate();  // 今天的日子
    }
    </script>
    </head>
    <body>
    <div class="box" id="box">
    <p></p>
    <span></span>
    </div>
    </body>
    </html>

定时器

很多情况下，一些操作不需要人工干预，代码会自动去不断执行，而且会有时间的绑定，比如每隔5秒就执行一次。这个时间我们可以设定，让每个动作不断地去执行，在js里面用定时器来表示。
倒计时 = 用将来的时间 - 现在的时间
用毫秒去减，减完后不断转换就行了

    window.setInterval("执行的函数",间隔时间)

（window可以省略）

正确写法：
setInerval(fun,1000);
每隔1秒钟（1000毫秒），就去执行一次fun这个函数

setInterval(“fun()”,1000);
setInterval(function(){},1000);

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
    window.onload = function(){
    var demo = document.getElementById("demo");
    setInterval(fn,1000);  //  每隔1秒，就去 调用 一次 fn 这个函数
    var num = 1;
    function fn(){
    num++;
    demo.innerHTML = num ;
    }
    }
    </script>
    </head>
    <body>
    <div id="demo"></div>
    </body>
    </html>

定义自己时间

    <script>
    var date = new Date();
    console.log(date);  // 得到的是现在的时间
    var endTime = new Date("2015/12/12");
    console.log(endTime);  // 得到的是 2015 12 .12
    var time = new Date(2015,12,12);
    </script>

定义自己的日子

    var endTime = new Date("2015/12/12");

如果date括号里面写日期，就是自己定义的时间，
如果date括号里面不写日期，就是当前时间。

    new Date("2015/12/12 17:30:00");

注意：日期和时分秒中间要用空格隔开

倒计时

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
    body{
    font-size:30px;
    text-align: center;
    color:red;
    }
    </style>
    <script>
    window.onload = function(){
    var demo = document.getElementById("demo");
    var endTime = new Date("2015/12/12 17:30:00"); // 最终时间
    setInterval(clock,1000); // 开启定时器
    function clock(){
    var nowTime = new Date(); // 一定是要获取最新的时间
    //  console.log(nowTime.getTime());  获得自己的毫秒
    var second = parseInt((endTime.getTime() - nowTime.getTime()) / 1000);
    // 用将来的时间毫秒 -  现在的毫秒  / 1000 得到的 还剩下的秒  可能处不断 取整
    // console.log(second);
    // 一小时 3600 秒
    // second / 3600  一共的小时数  /24   天数
    var d = parseInt(second / 3600 / 24);  //天数
    //console.log(d);
    var h = parseInt(second / 3600  % 24)  // 小时
    // console.log(h);
    var m = parseInt(second / 60 );
    //console.log(m);
    var s = parseInt(second ); // 当前的秒
    console.log(s);
    /* if(d<10)
    {
    d = "0" + d;
    }*/
    d<10 ? d="0"+d : d;
    h<10 ? h="0"+h : h;
    m<10 ? m="0"+m : m;
    s<10 ? s="0"+s : s;
    demo.innerHTML = "距离抢购时间还剩: "+d+"天 "+h+"小时 "+m+"分钟 "+s+"秒";
    }
    }
    </script>
    </head>
    <body>
    <div id="demo"></div>
    </body>
    </html>

Dawn___

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS 篇（5）

设置节点属性1.获取节点属性getAttribute(属性) 获取属性 alert(demo.getAttribute("title"));2.设置节点属性setAttribute(“属性”,”值”)；将类名改为:demo:div.setAttribute(“class”,”demo”);3.删除某个属性removeAttribute(“属性”)； demo.removeAttribu
复制链接

扫一扫