首页 > 代码库 > JS(四)

JS(四)

2024-08-26 06:18:13   213人阅读

JS的属性好多,方法好多,一下子塞进来真的需要时间消化,很多东西都是当时记得很清楚,但忘得很快,看来需要经常去复习,主要是感觉后面一点的练习题好像少了点,所以就显得不是很熟练.

1.About Time:

/*//输出今天的日期、星期、时间字符串
var today = new Date();
var year = today.getFullYear();
var month = today.getMonth();
var day = today.getDate();
var week = today.getDay();
var hours = today.getHours();
var minutes = today.getMinutes();
var seconds = today.getSeconds();
//定义前导0函数:
function addZero(x){
    return x<10 ? "0"+x : x;
}
arr_month = ["01月","02月","03月","04月","05月","06月","07月","08月","09月","10月","11月","12月"];
arr_week = ["星期天","星期一","星期二","星期三","星期四","星期五","星期六",];
var str = "今天是"+year+"年"+arr_month[month]+addZero(day)+"日"+arr_week[week]+addZero(hours)+"时"+addZero(minutes)+"分"+addZero(seconds)+"秒."
document.write(str);*/

 

2.神奇的滚动框:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚动框</title>
    <style type="text/css">
        *{
            margin:0px;
            padding: 0px;
        }
        ul,li{
            list-style: none;
        }
        #div1{
            width:200px;
            height:250px;
            margin:100px auto;
            overflow: hidden;
        }
        li{
            text-align:center;
            border-bottom: 1px dotted #ccc;
        }
    </style>
    <script type="text/javascript">
    window.onload = function(){
        //1.先找到对象
        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");
        var div3 = document.getElementById("div3");
        //2.将3个div的高度设置成一样
        div2.style.height = div1.offsetHeight+"px";
        div3.style.height = div1.offsetHeight+"px";
        //3.给div3增加内容
        div3.innerHTML = div2.innerHTML;
        //4.设置定时器动画
        window.setInterval(scrolling, 40);
    }
    function scrolling(){
        var div1 = document.getElementById("div1");
        div1.scrollTop==div1.offsetHeight ? div1.scrollTop=0 : div1.scrollTop++;
        /*document.title=div1.scrollTop;*/
    }

    </script>

</head>
<body>
<div id="div1">
    <div id="div2">
        <ul>
            <li>龙珠</li>
            <li>海贼王</li>
            <li>死神</li>
            <li>火影忍者</li>
            <li>死亡笔记</li>
            <li>寄生兽</li>
            <li>吸血鬼日记</li>
            <li>暮光之城</li>
            <li>斯巴达克斯</li>
            <li>权力的游戏</li>
            <li>越狱</li>
        </ul>
    </div>
    <div id="div3"></div>
</div>    
</body>
</html>

 

JS(四)


联系
我们