2021-08-19

旋风小八嘎

于 2021-08-19 20:31:04 发布

阅读量63

点赞数

分类专栏：认识js 文章标签： js

本文链接：https://blog.csdn.net/syzmg/article/details/119810158

版权

认识js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

day07

1.内置对象-JSON

1.localStorage把数据缓存到本地
2.JSON.stringify()： JSON格式的数据转换成字符串，最终变成了JSON格式的字符串
3.JSON.parse()：解析JSON格式的数据
练习代码：

<script>
        var obj = {
            code: 1,
            error: 0,
            msg: '数据获取成功',
            data: [{
                name:'大聪明',
                age:18,
                gender:1
            }, {
                name:'大聪明',
                age:18,
                gender:1
            }, {
                name:'大聪明',
                age:18,
                gender:1
            }]
        };
        //localStorage把数据缓存到本地    JSON.stringify -> JSON格式的数据转换成字符串，最终变成了JSON格式的字符串
        window.localStorage.setItem('data',JSON.stringify(obj));

        console.log(localStorage.getItem('data'));
        
        //JSON.parse解析JSON格式的数据
        var data = JSON.parse(localStorage.getItem('data'));
        console.log(data);

        var imgArr = {
            error:0,
            data:['http://a.jpg','http://b.jpg','http://c.jpg']
        };
        localStorage.setItem('imglst', JSON.stringify(imgArr));
        var imglist = JSON.parse(JSON.stringify(imgArr));
        console.log(imglist);
    </script>

2.构造函数-Object定义属性

defineProperty：
三个参数：分别是：需要添加属性的对象，需要添加的属性，属性的描述符
value：需要添加（或修改）的属性的属性值.
writable:是否可被修改；默认值为false
enumerable：是否可以被枚举,就是遍历；默认值为false
configurable：是否可以被删除；默认值为false
get：作为该属性的 getter 函数，如果没有 getter 则为undefined。函数返回值将被用作属性的值。
set：作为属性的 setter 函数，如果没有 setter 则为undefined。函数将仅接受参数赋值给该属性的新值。
要用get和set方法，首先 enumerable和configurable的值要为true
练习代码：

<script>
        var obj = {
            name: '大聪明',
            age: 20
        };
        var gender = 1;
        //defineProperty  三个参数，需要添加属性的对象，需要添加的属性，属性的描述符
        Object.defineProperty(obj, 'gender',{
            //value:'male',
            //writable:true,//是否可被修改
            enumerable:true, //是否可以被枚举,就是遍历
            configurable:true, //是否可以被删除

            get:function() {
                return gender;
            },
            set:function (newValue) {
                //这里可以做你想做的事情
                gender = newValue;
            }
        });
        obj.gender = '男';
        console.log(obj);

        console.log(obj.gender);
    </script>

Object定义属性进行数据绑定

我用了defineProperties的方法，可以定义多个属性
代码如下：

<body>
    <div>
        姓名：<span class="name"></span>, 性别：<span class="gender"></span>
    </div>

    <script>
        var obj = {
            name: '大聪明',
            age: 20
        };

        function showData(data) {
            document.querySelector('.name').innerHTML = data.name;
            document.querySelector('.gender').innerHTML = data.gender;
        }
        showData(obj); //调用showData方法，往页面上添加数据

        var gender = 'male'; //初始化gender
        Object.defineProperties(obj, {
            'name': {
                enumerable: true, //可枚举，遍历
                configurable: true, //可被删除

                //要用get和set方法，首先 enumerable和configurable的值要为true
                get: function () {
                    return name;
                },
                set: function (newValue) {
                    name = newValue;
                    showData(obj); //调用页面才会发生改变
                }
            },
            'gender':{
                enumerable: true, //可枚举，遍历
                configurable: true, //可被删除

                //要用get和set方法，首先 enumerable和configurable的值要为true
                get: function () {
                    return gender;
                },
                set: function (newValue) {
                    gender = newValue;
                    showData(obj); //调用页面才会发生改变
                }
            }
        });
        obj.gender = '男'; //当赋值的时候，set方法执行，get方法也会执行
        var arr = ['海绵宝宝','派大星','章鱼哥','蟹老板','小蜗','珊迪'];
        var arr2 = ['男','女','保密'];
        obj.name = '大聪明';
        setInterval(function () {
            obj.name = arr[Math.round(Math.random()* (arr.length -1)) ]; //每两秒给name随机赋值
        }, 2000);
        setInterval(function () {
            obj.gender = arr2[Math.round(Math.random()* (arr2.length-1)) ]; //每两秒给gender随机赋值
        }, 2000);
    </script>

时钟作业：

代码：

 <style>
        .clock {
            width: 600px;
            height: 600px;
            margin: 50px auto;
            background: url(./img/dial.jpg) no-repeat;
            position: relative;
        }

        .clock div {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;

        }

        .hour {
            background: url(./img/hour_hand.png) no-repeat center center;
        }

        .minute {
            background: url(./img/minute_hand.png) no-repeat center center;
        }

        .second {
            background: url(./img/second_hand.png) no-repeat center center;
        }
    </style>

</head>

<body>
    <div class="clock">
        <div class="hour"></div>
        <div class="minute"></div>
        <div class="second"></div>
    </div>
    <script>
        var hour = document.querySelector('.hour');
        var minute = document.querySelector('.minute');
        var second = document.querySelector('.second');
        // 开始定时器
        var ms = 0, s = 0,m = 0,h = 0;
        var fn = function () {
            var date = new Date(); // 得到最新的时间
            ms = date.getMilliseconds(); // getMilliseconds() 方法可返回当前时间的毫秒
            s = Math.floor(date.getSeconds() + ms / 1000);  //  得到秒数，向下取整为1秒
            //console.log(s);
            m = date.getMinutes() + s / 60; //  得到的是分钟数
           // console.log(m);
            h = date.getHours() % 12 + m / 60;  //  得到的是小时数
            //console.log(h);
            //旋转角度
            // 一圈 360度 一共有 60 秒 每秒6度 现在是秒数为s
            second.style.WebkitTransform = "rotate(" + s * 6 + "deg)";
            minute.style.WebkitTransform = "rotate(" + m * 6 + "deg)";
            hour.style.WebkitTransform = "rotate(" + h * 30 + "deg)";

            //兼容火狐浏览器内核
            second.style.MozTransform = "rotate(" + s * 6 + "deg)";
            minute.style.MozTransform = "rotate(" + m * 6 + "deg)";
            hour.style.MozTransform = "rotate(" + h * 30 + "deg)";

            setTimeout(fn, 1000);
        };
        setTimeout(fn);
    </script>
</body>

结果：
在这里插入图片描述
遇到的问题：
IE浏览器不支持这个方法，有待解决。

旋风小八嘎

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-08-19

day071.内置对象-JSON1.localStorage把数据缓存到本地2.JSON.stringify()： JSON格式的数据转换成字符串，最终变成了JSON格式的字符串3.JSON.parse()：解析JSON格式的数据练习代码：<script> var obj = { code: 1, error: 0, msg: '数据获取成功', data: [{
复制链接

扫一扫

专栏目录