五星好评案例（利用cookie存储）

五星好评案例（利用cookie存储）

1. 业务逻辑

   • 首先明确使用面向对象的方式进行书写
   • 创建元素添加样式 (外部的div容器，容器左边的title部分，中间的星星部分，以及右边的分数部分)
   • 增加鼠标事件
   • 改变星星样式（当鼠标经过时星星的背景发生改变）
   • 改变星星笑脸（当鼠标经过时星星上方定位的笑脸会发生变化）
   • 改变评价分数（当鼠标经过时星星后面的评价分数也会随之改变）
   • 将每次点击之后的分数利cookie存储 （注意设置存储到期日期）
   • 获取cookie并将其格式转化为对象格式存储 利于后期使用
   • 把获取的数据以带回函数

2. 代码

   1. 创建元素

      //创建标题
      creatSpan(_label) {
             
              var span = document.createElement('span');
              span.textContent = _label;
              Object.assign(span.style, {
             
                  float: "left",
                  height: "16px",
                  lineHeight: "16px",
                  marginRight: "10px",
                  overflow: "hidden",
                  whiteSpace: "nowrap",
                  textOverflow: "ellipsis",
                  font: '12px/150% tahoma,arial,Microsoft YaHei,Hiragino Sans GB,"\u5b8b\u4f53",sans-serif',
                  color: "#666"
              });
              this.elem.appendChild(span);
          }
      //创建星星
          creatStar() {
             
              this.starCon = document.createElement('div');
              Object.assign(this.starCon.style, {
             
                  float: 'left',
                  height: '16px',
                  position: 'relative'
              })
              for (let i = 0; i < Star.STAR_NUM; i++) {
             
                  var stars = document.createElement('div');
                  stars.className = 'star';
                  stars.setAttribute('num', i + 1);
                  this.starslist.push(stars);
                  Object.assign(stars.style, {
             
                      height: '16px',
                      width: '16px',
                      float: 'left',
                      background: 'url(../img/commstar.png) no-repeat 0 0'
                  })
                  this.starCon.appendChild(stars);
              }
              this.elem.appendChild(this.starCon)