第四课 js之日期对象，定时器应用，Map集合，json

js一次性定时器

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">

        var n = 0;

        /*
         * 除了定时调用，还有一个延时调用
         *  延时调用指函数不马上执行，而是过一段时间以后再执行
         *  使用setTimeout()来设置延时调用，
         *      setTimeout()和setInterval()用法一样
         *      也是需要两个参数：
         *          1.回调函数
         *          2.毫秒数
         *
         * 延时调用中的函数，只会执行一次。而定时调用会执行多次
         *  定时调用和延时调用本质上没有区别，我们可以通过setTimeout()
         *  实现setInterval()的功能，
         * 也可以通过setInterval()实现setTimeout()的功能
         *
         */

        var timer = setTimeout(function(){
            console.log(++n);
        },1000);

        //关闭延时调用
//        clearTimeout(timer);

    </script>
</head>
<body>
</body>
</html>

js周期性定时器

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>

    <script type="text/javascript">

        window.onload = function(){

            /*
             * 使h1中的内容，每隔1s修改一次
             */
            //获取h1
            var count = document.getElementById("count");
            //修改h1中的内容
            //count.innerHTML = 10;

            /*
             * 创建一个for循环，多次修改h1中的内容
             * 循环语句执行的速度是非常非常的快的
             * 
             */
            /*for(var i=0 ; i<10000 ; i++){
             count.innerHTML = i;
             alert("hello");
             }*/

            /*
             * 定时调用
             *     - 定时调用指每间隔一段时间就调用指定的函数一次
             *     - 通过setInterval()来开启一个定时调用
             *  - 参数：
             *         回调函数，该函数将会每间隔一段时间被调用一次
             *         时间，函数调用相隔的时间（毫秒）
             * 
             *  - 返回值：
             *         会返回一个number类型的值作为返回值，
             *             这个number就是定时器的标识
             */

            //定义一个变量来计数
            var num = 1;

            var timer = setInterval(function(){
                count.innerHTML = num++;

                //判断num
                if(num == 11){
                    //关闭定时器
                    clearInterval(timer);
                }

            },1000);

            //console.log(timer);

            /*
             * clearInterval()
             *     - 可以用来关闭一个定时器
             *     - 需要一个定时器的标识作为参数，需要用它来指定要关闭的定时器
             */
            //clearInterval(timer);

        };

    </script>

</head>
<body>

<h1 id="count"></h1>

</body>
</html>

替换背景

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>

<body>

<input type="button" value="换背景吧" />
<input type="button" value="停" />

<script>
var aBtn = document.getElementsByTagName('input');
var arrUrl = [ 'img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg' ];
var num = 0;
var timer = null;

var oBody = document.body;

aBtn[0].onclick = function (){

    clearInterval( timer );            // null、未定义

    timer = setInterval(function(){
        oBody.style.background  = 'url('+ arrUrl[num] +')';
        num++;
        num%=arrUrl.length;
    }, 1000);
};
aBtn[1].onclick = function (){
    clearInterval( timer );
};

// oBody.style.background  = 'url('+ arrUrl[num] +')';

</script>

</body>
</html>

定时器应用

getComputedStyle获得内部样式

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 { width:100px; height:100px; background:red; position:absolute; top:50px; left:300px; }
</style>
</head>

<body>

<input id="btn1" type="button" value="往后" />
<input id="btn2" type="button" value="往前" />
<div id="div1"></div>

<script>
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var oDiv = document.getElementById('div1');

oBtn1.onclick = function () {

    clearInterval( oDiv.timer );

    oDiv.timer = setInterval(function () {

        var speed = parseInt(getComputedStyle( oDiv).left) + -12;            // 步长

        if ( speed < 10 ) {
            speed = 10;
        }

        oDiv.style.left = speed + 'px';

        if ( speed == 10 ) {
            clearInterval( oDiv.timer );
        }

    }, 30);
};

oBtn2.onclick = function () {

    clearInterval( oDiv.timer );

    oDiv.timer = setInterval(function () {

        var speed = parseInt(getComputedStyle( oDiv).left) + 12;            // 步长

        if ( speed > 800 ) {
            speed = 800;
        }

        oDiv.style.left = speed + 'px';

        if ( speed == 800 ) {
            clearInterval( oDiv.timer );
        }

    }, 30);
};

</script>

</body>
</html>

时间对象

new Date(yyyy,MM,dd,hh,mm,ss);


getTime(); 返回从1970年1月1日0点0分0秒0毫秒到现在的毫秒数


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>

<script>

/*
    系统时间对象
*/
// alert( new Date() );        // 当前系统的时间对象

// myTime typeof   object

window.onload = function () {

    var oBody = document.body;

    setInterval( fnTime, 1000 );

    fnTime ();

    function fnTime () {

        var myTime = new Date();

        // number
        var iYear = myTime.getFullYear();
        var iMonth = myTime.getMonth()+1;
        var iDate = myTime.getDate();
        var iWeek = myTime.getDay();
        var iHours = myTime.getHours();
        var iMin = myTime.getMinutes();
        var iSec = myTime.getSeconds();
        var str = '';

        if( iWeek === 0 ) iWeek = '星期日';
        if( iWeek === 1 ) iWeek = '星期一';
        if( iWeek === 2 ) iWeek = '星期二';
        if( iWeek === 3 ) iWeek = '星期三';
        if( iWeek === 4 ) iWeek = '星期四';
        if( iWeek === 5 ) iWeek = '星期五';
        if( iWeek === 6 ) iWeek = '星期六';

        str = iYear+ '年' +iMonth+'月'+iDate+'日 '+iWeek+' '+ toTwo(iHours)+' : '+ toTwo(iMin)+' : '+ toTwo(iSec);

        oBody.innerHTML = str;

    }
};

// alert( toTwo(5) );            // '05'
// alert( toTwo(15) );        // '15'

function toTwo ( n ) {
    return n < 10 ?  '0' + n : '' + n;
}

</script>

</head>

<body style="font-size:60px;">
</body>
</html>

Math对象

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">

            /*
             * Math
             *  - Math可以用来做数学运算相关的操作
             *  - Math并不是一个构造函数，我们也不需要去创建一个Math类型
             *  - Math是一个工具类，它里面封装了一些数学运算相关的常量和方法
             */

            /*
             * Math中的常量
             *  Math.PI 圆周率
             */
            //console.log(Math.PI);

            /*
             * Math.abs()
             *  - 可以用来获取一个数的绝对值
             */
            //console.log(Math.abs(10));

            /*
             * Math.ceil()
             *  - 可以对一个数进行向上取整
             *  - 只要小数点后有值就向上进1
             */
            //console.log(Math.ceil(1.000001));

            /*
             * Math.floor()
             *  - 可以对一个数进行向下取整  
             *  - 小数点后的值都舍去
             */
            //console.log(Math.floor(1.01));

            /*
             * Math.round()
             *  - 对一个数进行四舍五入取整
             */
            //console.log(Math.round(5.4));

            /*
             * Math.random();
             *  - 可以生产一个0-1之间的随机数
             * 
             *  - 生成一个 0-10 之间的随机数
             *       生成 0 - x 之间的随机数
             *          Math.round(Math.random()*x)
             *      
             *      生成一个 1 - 6之间的随机数
             *      生产一个 x - y之间的随机数
             *          Math.round(Math.random()*(y-x) + x)
             * 
             *      生成一个 1-8之间的随机数
             *      生成一个 22-30之间的随机数
             *      
             */
            for(var i=0 ; i<100 ; i++){
                //console.log(Math.round(Math.random()*5));
                //console.log(Math.round(Math.random()*8 + 22));
            }

            /*
             * Math.max()
             *  - 可以从多个值中获取到最大值
             * Math.min()
             *  - 获取多个值中的最小值
             */

            var result = Math.max(100,20,55,77);
            result = Math.min(100,20,55,77);

            //console.log(result);

            /*
             * Math.pow(x,y)
             *  - 获取x的y次幂
             */
            result = Math.pow(3,3);

            /*
             * Math.sqrt(x)
             *  - 求一个数的平方根
             */
            result = Math.sqrt(2);

            //console.log(result);

        </script>
    </head>
    <body>
    </body>
</html>

Map数据结构

map 类型包含一组有序的键值对，其中键和值可以是任何类型。

创建Map对象和Map的基本的存取操作

Map创建使用Map构造函数
向Map存储键值对使用set(key, value)方法
可以使用get(key),来获取指定key对应的value

<script type="text/javascript">
    var map = new Map();
    map.set("a", "lisi");
    map.set("b", "zhangsan");
    map.set("b", "zhangsan222");  // 第二次添加，新的value会替换掉旧的
    console.log(map.get("a"));
    console.log(map.get("b"));   //zhangsan222
    console.log(map.get("c")); //undefined.如果key不存在，则返回undefined
    console.log(map.size); //2
</script>

Map的3个方法

has(key) - 判断给定的 key 是否在 map 中存在
delete(key) - 移除 map 中的 key 及对应的值
clear() - 移除 map 中所有的键值对

初始化Map

创建Map的时候，传入的数组中必须有两个元素，这个两个元素分别是一个数组。
也就是传入的实际是一个二维数组！

<script type="text/javascript">
  //map接受一个二维数组
    var map = new Map([
      //每一个数组中，第一个是是map的可以，第二个是map的value。如果只有第一个，则值是undefined
        ["name", "lisi"],  
        ["age", 20],
        ["sex", "nan"]
    ]);
    console.log(map.size);
    console.log(map.get("name"))
</script>

Map的forEach方法

<script type="text/javascript">
    var map = new Map([
        ["name", "李四"],
        ["age", 20],
        ["sex", "nan"]
    ]);
    /*
        回调函数有函数：
        参数1：键值对的value
        参数2：键值对的key
        参数3：map对象本身
     */
    map.forEach(function (value, key, ownMap) {
        console.log(`key=${key} ,vlue=${value}`);
        console.log(this);
    })
 </script>

for…of循环遍历map

 var map2 = new Map();
            map2.set('abc',{no:1,name:'zhangsan'});
            for(var item of map2)
            {
                alert(item[0]);
                alert(item[1].name);
            }

Map应用之统计文字出现次数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload=function () {
            var btn = document.getElementById('btn');
            btn.onclick = function () {
                var content = document.getElementById('content').value;
                var arr = content.split('');
                var map = new Map();
                for(var i = 0; i < arr.length; i++)
                {
                    if(map.has(arr[i]))
                    {
                        var currentNum = map.get(arr[i]);
                        currentNum++;
                        map.set(arr[i],currentNum);
                    }
                    else
                    {
                        map.set(arr[i],1);
                    }
                }

                var str='';
//                map.forEach(function(v,k,mapWord)
//                {
//                    str+=`${k}---${v}<br>`;
//                });
                for(var item of map)
                {
                    str+=`${item[0]}----${item[1]}<br>`;
                }
                var result = document.getElementById('result');
                result.innerHTML = str;
            }

        }
    </script>
</head>
<body>
<textarea id="content" rows="20" cols="30"></textarea>
<button id="btn">统计</button>
<div id="result">

</div>
</body>
</html>

js字符串练习

结题思路

1.用被替换的字符串，分隔正文成字符串数组（split）
2.用新字符串作为连接符，将字符串数组连接成一个字符串（join）

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p { border:10px solid #ccc; background:#FFC; width:400px; padding:20px; font-size:16px; font-family:微软雅黑; }
span { background:yellow; }
</style>

</head>

<body>

<input type="text" />
<input type="text" />
<input type="button" value="替换" />

<p>奇克课堂是一支独具特色的IT培训团队，奇克反对传统IT教育枯燥乏味的教学模式，奇克提供一种全新的快乐学习方法！<br />
2013年底，奇克课堂最新推出"远程培训"服务，受到很多朋友们的喜爱与追捧，我们必将更加努力的帮助远程学习的朋友实现技术提升……</p>

<script>
var aInp = document.getElementsByTagName('input');
var oP = document.getElementsByTagName('p')[0];

aInp[2].onclick = function () {
    var str = aInp[0].value;            // '奇克'
    var newStr = aInp[1].value;

    if (!str)return;

    oP.innerHTML = oP.innerHTML.split(str).join('<span>'+newStr+'</span>');
};

</script>

</body>
</html>

json简介

简介：
JSON（JavaScriptObject Notation）、采用完全独立于编程语言的文本格式来存储和表示数据。

JSON两种格式

1、对象
对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。

var person = { "name":"huochai", "age":29, "school":{ "name":"diankeyuan", "location":"beijing" }};

2.数组

var students =  
              [  
                     {"sno":"001","name":"jack","age":130},  
                     {"sno":"002","name":"tame","age":120},  
                     {"sno":"003","name":"cule","age":110}
              ];

访问json对象的属性值

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <script>
        //JSON格式的attr访问 - 点号或者中括号 -注意：中括号里面可以放变量

        var imgData={ "name":"图片描述和图片相对路径", "title":"logo图片","url":"logo.png" };
        alert( imgData.name );
        alert( imgData["name"] );
        var str="name" ;
        alert( imgData[str] );

        var json1={"name":"这里是一组图片的文字描述和图片相对路径",
            "title":["logo图片","图片1","图片2","图片3"],
            "url":["logo.png","1.png","2.png","3.png"]
        };
        alert( json1.name);
        alert( json1.url  );
        alert( json1.url[1] );

        alert( json1["name"]);
        alert( json1["url"]  );
        alert( json1["url"][1] );

        var json2 ={ "name":"图片描述和图片相对路径",
            "imgData":[
                { "name":"图片1", "title":"logo图片1","url":"logo1.png" } ,
                { "name":"图片2", "title":"logo图片2","url":"logo2.png" }  ,
                { "name":"图片3", "title":"logo图片3","url":"logo3.png" }
            ]
        };
        alert( json2.name );
        alert( json2.imgData[0].name );

        alert( json2["name"] );
        alert( json2["imgData"][0].name );

    </script>

</head>

<body>

</body>
</html>

JSON对象两个方法

JSON对象有两个方法：stringify()和parse()。这两个方法分别用于把JavaScript对象序列化为JSON字符串和把JSON字符串解析为原生JavaScript值

stringify()

var strPerson = JSON.stringify(person);
alert(strPerson);
var strStudents = JSON.stringify(students);
alert(strStudents);
parse()

JSON.parse方法用于将JSON字符串转化成对象

var strPerson = JSON.stringify(person);
var personObj = JSON.parse(strPerson);
var strStudents = JSON.stringify(students);
var studentsObj = JSON.parse(strStudents);

模板字符串

  var name = "Neo";    
    var occupation = "programmer";    //不使用模板字符串拼接
    var str = "He is "+ name +",he is a "+ occupation;    //使用模板字符串拼接
    var str = `He is ${name},he is a ${occupation}`;

模板字符串

var name = "Neo";    
var occupation = "programmer";    //不使用模板字符串拼接
var str = "He is "+ name +",he is a "+ occupation;    //使用模板字符串拼接
var str = `He is ${name},he is a ${occupation}`;

模板字符串不再需要反复使用双引号(或者单引号)了拼接字符串，而是改用反引号标识符( ` 键盘右上角~键)，插入变量的时候也不需要再使用加号(+)，而是把变量放入${ }即可。

使用模板字符串的注意点：

1、可以定义多行字符串

var str = `write once ,
           run anywhere`;

2、${ }中可以放任意的javascript表达式

${ }中可以是运算表达式

    var a = 1;    
    var b = 2;    
    var str = `the result is ${a+b}`;    //进行加法运算 结果：the result is 3

${ }中可以是对象的属性

    var obj = {"a":1,"b":2};    
    var str = `the result is ${obj.a+obj.b}`;    //对象obj的属性
    //结果：the result is 3.

json和模板字符串的综合应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--http://api.laifudao.com/open/xiaohua.json-->
    <script>
        window.onload = function () {
            var jsonData = [
                {
                    "title": "你谁啊？我新娘呢？",
                    "content": "　　新郎在礼堂焦急的等待着新娘，过了好一会儿穿着婚纱的姑娘终于匆忙的赶来。　　新郎一看愣了：“你谁啊？我新娘呢？”　　姑娘抱歉的说：“她喝多了，我是代嫁。”",
                    "poster": "",
                    "url": "http://www.laifudao.com/wangwen/81923.htm"
                },

                {
                    "title": "哪有人用口香糖做喜糖的？",
                    "content": "　　最近一位学姐结婚，回学校送给每个学妹几包口香糖做喜糖，室友觉得很奇怪：“哪有人用口香糖做喜糖的？”　　“有什么不可以，口香糖和结婚不是颇有类似之处吗？初时甜甜蜜蜜，久了就味同嚼蜡了！ ”",
                    "poster": "",
                    "url": "http://www.laifudao.com/wangwen/81756.htm"
                },
                {
                    "title": "磁悬浮列车",
                    "content": "　　黑蚂蚁与黄蚂蚁在公路上爬行，黑蚂蚁很快追到了前面的黄蚂蚁。　　黑蚂蚁说：“蚂蚁老弟，你是拉黄包车的吗？”　　黄蚂蚁说：“小样，那你说说你这是什么车？”　　黑蚂蚁说：“我这可是黑色奔驰车，加长的那种。”　　没多久，一条蛇呼啸而过。黄蚂蚁说：“你神气什么，你看到吗？那是磁悬浮列车。”",
                    "poster": "",
                    "url": "http://www.laifudao.com/wangwen/126841.htm"
                },
                {
                    "title": "那当初为什么要和我合影",
                    "content": "　　A：“既然不想在一起，那当初为什么要和我合影？”　　B：“我再TM警告你一遍！能不能不拿毕业照说事！”",
                    "poster": "",
                    "url": "http://www.laifudao.com/wangwen/99196.htm"
                },
                {
                    "title": "看看爸爸今天会编什么故事",
                    "content": "　　『麻麻，我睡不着，你给我讲个故事好不好？』　　『等你老爸回来听听他今天又会编什么故事就行了！』",
                    "poster": "",
                    "url": "http://www.laifudao.com/wangwen/70649.htm"
                }
            ];

            var html = '';

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

                var article = `
    <li>
        <h3>${jsonData[i].title}</h3>
        <p>${jsonData[i].content}</p>
    </li>
`;
                html += article;
            }
            var news = document.getElementById('news');
            news.innerHTML = html;
        }

    </script>
</head>
<body>
<ul id="news">

</ul>
</body>
</html>

谢谢

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 159,716评论 4赞 364
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,558评论 1赞 294
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 109,431评论 0赞 244
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 44,127评论 0赞 209
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,511评论 3赞 287
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,692评论 1赞 222
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,915评论 2赞 313
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,664评论 0赞 202
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,412评论 1赞 246
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,616评论 2赞 245
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,105评论 1赞 260
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,424评论 2赞 254
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 33,098评论 3赞 238
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,096评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,869评论 0赞 197
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,748评论 2赞 276
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,641评论 2赞 271

推荐阅读更多精彩内容