日期-日历-选择器实现（图文并茂）

24,491次阅读
没有评论

共计 12433 个字符，预计需要花费 32 分钟才能阅读完成。

文章目录

    • 日历模板效果图展示
    • 功能点介绍
    • 完整代码（cv 即可）
      • index.wxml
      • index.wxss
      • index.js
    • 日期时间选择器效果图展示
    • 1、使用小程序原生的 picker
      • ①普通选择器：mode = selector
      • ②多列选择器：mode = multiSelector
      • ③时间选择器：mode = time
      • ④日期选择器(上面有效果图)
      • ⑤省市区选择器：mode = region
    • 2、如何使用原生的 picker 年月日 时分秒 = 共同选择
      • 效果图
      • 完整代码
        • index.wxml
        • index.js
        • dateTimePicker.js

日历模板效果图展示

日期 - 日历 - 选择器实现（图文并茂）

功能点介绍

   相当于留言谱，用于记录留言的历史纪录功能。主要实现的功能点在于 - 前端页面日历的动态搭建，哪一年哪一月哪一日对应的历史纪录。进行显示 - 当点击回忆录时跳转页面或者模态框实现显示。扩展 - 页面还可以整的更好看些，作为打卡等，本猿能力有限。

完整代码（cv 即可）

微信小程序前端 - 跟 vuejs 基本没有多大差别 -view 改成 div 即可。也就是说都适用。

index.wxml

view class="calendar">
  view class="calendarTop">
    text class="calendarTopL" catchtap="prev">{{'}} /text>
        text class="calendarTopC">{{nowYear}}年 {{nowMonthStr}} 月/text>
        text class="calendarTopR" catchtap="next">{{'>'}}/text>
  /view>
  view class="calendarWeek">
    text class="calendarWeekItem" wx:for="{{weekList}}" wx:key="item">{{item}}/text>
  /view>
  view class="calendarDate">
    text class="calendarDateItem {{item.now ?'dateItemNow':''}} {{item.gray ? 'dateItemGray' : ''}}" wx:for="{{month}}" bindtap="memoirbtn" data-time="{{item.timeDate}}" wx:key="index">{{item.text}}
      text class="memoirNow">{{item.memoir}}/text>
    /text>
  /view>
/view>

index.wxss

.calendar {
  width: 100%;
  border-top: 1rpx solid #00000005;
  background-color: #FFF2C7;
  margin: 0 auto;
}

.calendarTop {
  padding-top: 22rpx;
  display: flex;
  justify-content: center;
  position: relative;
}

.calendarTopL {
  font-size: 32rpx;
  font-weight: 400;
  color: #333333;
  height: 36rpx;
  line-height: 36rpx;
  position: absolute;
  left: 34rpx;
  top: 22rpx;
}

.calendarTopC {
  font-size: 26rpx;
  font-weight: 600;
  color: #333333;
  height: 36rpx;
  line-height: 36rpx;
}

.calendarTopR {
  font-size: 32rpx;
  font-weight: 400;
  color: #333333;
  height: 36rpx;
  line-height: 36rpx;
  position: absolute;
  right: 34rpx;
  top: 22rpx;
}

.calendarWeek {
  display: flex;
  flex-direction: row;
  padding-top: 24rpx;
}

.calendarWeekItem {
  width: 60rpx;
  height: 60rpx;
  font-size: 20rpx;
  font-weight: 400;
  color: #999999;
  line-height: 60rpx;
  text-align: center;
  margin-left: 40rpx;
}

.calendarDate {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.calendarDateItem {
  width: 100rpx;
  height: 200rpx;
  font-size: 26rpx;
  font-weight: bold;
  color: #333333;
  line-height: 60rpx;
  text-align: center;
  border: 1rpx solid rgba(0, 0, 0, 0.4);
}

.memoirNow {
  display: flex;
  width: 100%;
  height: 140rpx;
  background: #FCC001;
}

.dateItemNow {
  background: #2E8CFF;
  color: #FFFFFF;
}

.dateItemGray {
  color: #CCCCCC;
}

index.js

Page({
  
  data: {
    weekList: ['一', '二', '三', '四', '五', '六', '日'], 
    month: [
      {
        
        
        
      }
    ],
    nowYear: 0,
    nowMonth: 0,
    nowMonthStr: '',
    today: 0,
    memorandum: [{ "creationTime": "2022-12-12" }, { "creationTime": "2022-12-16" }, { "creationTime": "2022-12-03" }],  
  },
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  gainDate() {
    let d = Reflect.construct(Date, []);
    this.setData({
      nowYear: d.getFullYear(),
      nowMonth: d.getMonth() + 1,
      today: d.getDate(),
      nowMonthStr: (d.getMonth() + 1).toString().padStart(2, '0')
    })
  },
  
  prev() {
    if (this.data.nowMonth > 1) {
      this.setData({
        nowMonth: this.data.nowMonth - 1,
        nowMonthStr: (this.data.nowMonth - 1).toString().padStart(2, '0')
      })
    } else {
      this.setData({
        nowYear: this.data.nowYear - 1,
        nowMonth: 12,
        nowMonthStr: "12"
      })
    };
    this.todayProminent()
    this.dateInit()
  },
  
  next() {
    if (this.data.nowMonth  12) {
      this.setData({
        nowMonth: this.data.nowMonth + 1,
        nowMonthStr: (this.data.nowMonth + 1).toString().padStart(2, '0')
      })
    } else {
      this.setData({
        nowYear: this.data.nowYear + 1,
        nowMonth: 1,
        nowMonthStr: "01"
      })
    }
    this.todayProminent()
    this.dateInit()
  },
  
  todayProminent() {
    
    this.setData({
      today: 0
    })
    let d = Reflect.construct(Date, []);
    if (d.getFullYear() == this.data.nowYear && d.getMonth() + 1 == this.data.nowMonth) {
      this.setData({
        today: d.getMonth() + 1 > this.data.nowMonth + 1 ? 0 : d.getDate()
      })
    }
  },
  
  dateInit() {
    let now = Reflect.construct(Date, [this.data.nowYear, this.data.nowMonth - 1]); 
    let startWeekNow = now.getDay(); 
    let end = Reflect.construct(Date, [Reflect.construct(Date, [this.data.nowYear, this.data.nowMonth]) - 10]);
    let endWeekNow = end.getDay(); 
    let dayNumNow = Reflect.construct(Date, [this.data.nowYear, this.data.nowMonth, 0]).getDate(); 
    let dayNumPrev = Reflect.construct(Date, [this.data.nowYear - 1 ? this.data.nowYear : this.data.nowYear - 1, this.data.nowMonth - 1 ? this.data.nowMonth - 1 : 12, 0]).getDate(); 

    let prevMonthShow = []; 
    let nowMonthShow = []; 
    let nextMonthShow = []; 
    
    console.log("当前年月" + this.data.nowYear + "-" + this.data.nowMonth)
    var memoir = "";
    var timeDate = "";
    var times = "";
    
    for (let i = 1; i  (startWeekNow ? startWeekNow : 7); i++) {
      if (this.data.nowMonth == 1) {
        timeDate = (this.data.nowYear - 1) + "-" + 12
      } else {
        timeDate = (this.data.nowYear) + "-" + (this.data.nowMonth - 1)
      }
      if ((dayNumPrev - i + 1)  10) {
        times = "0" + (dayNumPrev - i + 1);
      } else {
        times = dayNumPrev - i + 1
      }
      timeDate = timeDate + "-" + times;
      memoir = this.creationTime(timeDate);
      prevMonthShow.unshift( 
        {
          text: dayNumPrev - i + 1, 
          now: false,
          gray: true,
          timeDate: timeDate,
          memoir: memoir
        }
      )
    };
    for (let i = 1; i  dayNumNow; i++) {
      if (i  10) {
        times = "0" + i;
      } else {
        times = i;
      }
      timeDate = this.data.nowYear + "-" + this.data.nowMonth + "-" + times;
      memoir = this.creationTime(timeDate);
      if (this.data.today == i) {
        nowMonthShow.push(
          {
            text: i,
            now: true,
            gray: false,
            timeDate: timeDate,
            memoir: memoir
          }
        )
      } else {
        nowMonthShow.push(
          {
            text: i,
            now: false,
            gray: false,
            timeDate: timeDate,
            memoir: memoir
          }
        )
      }
    };
    for (let i = 1; i  (endWeekNow ? 7 - endWeekNow : 0); i++) {
      if (this.data.nowMonth == 12) {
        timeDate = (this.data.nowYear + 1) + "-" + "01"
      } else {
        timeDate = (this.data.nowYear) + "-" + (this.data.nowMonth + 1)
      }
      if (i  10) {
        times = "0" + i;
      } else {
        times = i;
      }
      timeDate = timeDate + "-" + times;
      memoir = this.creationTime(timeDate);
      nextMonthShow.push(
        {
          text: i,
          now: false,
          gray: true,
          timeDate: timeDate,
          memoir: memoir
        }
      )
    };
    this.setData({
      month: [...prevMonthShow, ...nowMonthShow, ...nextMonthShow]
    })

  },
  creationTime(timeDate) {
    var memoir = "";
    let memorandum = this.data.memorandum || [];
    console.log("后端传过来的值为：" + memorandum.length);
    memorandum.forEach(element => {
      
      var dateee = new Date(element.creationTime).toJSON();
      var time1 = new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, '').replace(/.[d]{3}Z/,'')
      
      var date2 = /d{4}-d{1,2}-d{1,2}/g.exec(time1)
      if ((new Date(date2).getTime()) == (new Date(timeDate).getTime())) {
        memoir = "回忆录";
      }
    });
    return memoir;
  },
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  
  
  
  
  
  
  
  
  
  
  
  
  
  onLoad(options) {
    
    this.gainDate();
    this.dateInit()
  },
})

日期时间选择器效果图展示

日期 - 日历 - 选择器实现（图文并茂）

1、使用小程序原生的 picker

从底部弹起的滚动选择器。

①普通选择器：mode = selector

选择器用 mode 来区别, 默认是普通选择器,e.detail.value 拿到的值是选择了项的索引 index, 再通过 array 拿到值. 在 data 里面做初始化的时候, 将备选项加入 array 即可.
选择时触发 bindPickerChange 事件, 获取 index.
index.wxml

 picker bindchange="pickChange" value="{{index}}" range="{{array}}">
    view>
        当前选择的国家：{{array[index]}}
    /view>
  /picker>

index.js

Page({
  data:{
    array:['中国','美国','日本','韩国'],
    index:0
  },
  pickChange:function(e){
    this.setData({
      index:e.detail.value
    });
  }
})

②多列选择器：mode = multiSelector

日期 - 日历 - 选择器实现（图文并茂）

index.wxml

view>
  view class="section__title">多列选择器/view>
  picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange"
    value="{{multiIndex}}" range="{{newArr}}">
    view class="picker">
      当前选择：van-button type="primary">
        {{newArr[0][multiIndex[0]]}}，{{newArr[1][multiIndex[1]]}}，{{newArr[2][multiIndex[2]]}}/van-button>
    /view>
  /picker>
/view>

index.js

Page({
  
  data: {
    multiArray: [{
      id: 1,
      label: "河南省",
      children: [{
        id: 2,
        label: "郑州市",
        children: [{
          id: 3,
          label: "中原区",
        },
        {
          id: 4,
          label: "二七区",
        },
        {
          id: 5,
          label: "金水区",
        },
        ],
      },
      {
        id: 7,
        label: "商丘市",
        children: [{
          id: 8,
          label: "民权县",
        },
        {
          id: 9,
          label: "柘城县",
        },
        {
          id: 10,
          label: "宁陵县",
        },
        ],
      },
      ],
    },
    {
      id: 17,
      label: "浙江省",
      children: [{
        id: 18,
        label: "杭州市",
        children: [{
          id: 19,
          label: "西湖区",
        },
        {
          id: 20,
          label: "萧山区",
        },
        ],
      },
      {
        id: 21,
        label: "金华市",
        children: [{
          id: 22,
          label: "金东区",
        },
        {
          id: 23,
          label: "婺城区",
        },
        ],
      },
      ],
    },
    ],
    multiIndex: [0, 0, 0],
    multiIds: [],
    newArr: [],
  },

  bindMultiPickerChange(e) {
    console.log(this.data.multiIds);
  },
  bindMultiPickerColumnChange(e) {
    let data = {
      newArr: this.data.newArr,
      multiIndex: this.data.multiIndex,
      multiIds: this.data.multiIds,
    };
    data.multiIndex[e.detail.column] = e.detail.value;

    let searchColumn = () => {
      let arr1 = [];
      let arr2 = [];
      this.data.multiArray.map((v, vk) => {
        if (data.multiIndex[0] === vk) {
          data.multiIds[0] = {
            ...v,
          };
          v.children.map((c, ck) => {
            arr1.push(c.label);
            if (data.multiIndex[1] === ck) {
              data.multiIds[1] = {
                ...c,
              };
              c.children.map((t, vt) => {
                arr2.push(t.label);
                if (data.multiIndex[2] === vt) {
                  data.multiIds[2] = {
                    ...t,
                  };
                }
              });
            }
          });
        }
      });
      data.newArr[1] = arr1;
      data.newArr[2] = arr2;
    };
    switch (e.detail.column) {
      case 0:
        
        data.multiIndex[1] = 0;
        data.multiIndex[2] = 0;
        
        searchColumn();
        break;
      case 1:
        data.multiIndex[2] = 0;
        searchColumn();
        break;
    }
    this.setData(data);
  },

  multiArrayshow() {
    let state = {
      arr: [],
      arr1: [],
      arr2: [],
      arr3: [],
      multiIds: []
    }
    this.data.multiArray.map((v, vk) => {
      state.arr1.push(v.label);
      if (this.data.multiIndex[0] === vk) {
        state.multiIds[0] = v;
      }
      if (state.arr2.length  0) {
        v.children.map((c, ck) => {
          state.arr2.push(c.label);
          if (this.data.multiIndex[1] === ck) {
            state.multiIds[1] = c;
          }
          if (state.arr3.length  0) {
            c.children.map((t, tk) => {
              state.arr3.push(t.label);
              if (this.data.multiIndex[2] === tk) {
                state.multiIds[2] = t;
              }
            });
          }
        });
      }
    });
    state.arr[0] = state.arr1;
    state.arr[1] = state.arr2;
    state.arr[2] = state.arr3;
    this.setData({
      newArr: state.arr,
      multiIds: state.multiIds,
    });
  },

  
  onLoad: function (options) {
    this.multiArrayshow();
  },
});

index.wcss

.section__title{
  display: flex;
  align-content: center;
  justify-content: center;
  font-size: 42rpx;
  font-weight: bold;
}
.picker{
  font-size: 36rpx;
  color: red;
  background: black;
}

③时间选择器：mode = time

mode = time 时, 是时间选择器.start,end 分别是有效时间范围的开始和结束. 格式 hh:mm
选择时触发 bindTimeChange 事件, 获取 time.
日期 - 日历 - 选择器实现（图文并茂）

index.wxml

view class="title_rq">
  picker mode="time" name="creationTime" value="{{creationTime}}" start="00:00" end="24:60" bindchange="bindDateChange">
    {{creationTime}}
  /picker>
/view>

index.js

Page({

  
  data: {
    creationTime: "请选择时间" 
  },

  
  bindDateChange: function (e) {
    this.setData({
      creationTime: e.detail.value
    })
  },

  
  onLoad: function (options) {

  },

})

index.wcss

.title_rq {
  position: absolute;
  top: 12%;
  left: 5%;
  width: 90%;
  height: 70rpx;
  background: #f3e306;
  border: 1rpx solid black;
  font-size: 36rpx;
  color: #3D3D3D;
}

④日期选择器(上面有效果图)

mode = date 时, 是时间选择器.start,end 分别是有效日期范围的开始和结束. 格式 yyyy-MM-dd
选择时触发 bindDateChange 事件, 获取 date
index.wxml

view class="title_rq">
  picker mode="date" name="creationTime" value="{{creationTime}}" start="1920-01-01" end="2099-01-01" bindchange="bindDateChange">
    {{creationTime}}
  /picker>
/view>

index.js

Page({

  
  data: {
    creationTime: "请选择日期" 
  },

  
  bindDateChange: function (e) {
    this.setData({
      creationTime: e.detail.value
    })
  },

  
  onLoad: function (options) {

  },

})

index.wcss

.title_rq {
  position: absolute;
  top: 12%;
  left: 5%;
  width: 90%;
  height: 70rpx;
  background: #f3e306;
  border: 1rpx solid black;
  font-size: 36rpx;
  color: #3D3D3D;
}

⑤省市区选择器：mode = region

之前单独做过一栏：可供参考：
简易实现
java 前后端实现
java-vue 前后端实现

2、如何使用原生的 picker 年月日 时分秒 = 共同选择

思路：加一起就行了

效果图

日期 - 日历 - 选择器实现（图文并茂）

完整代码

index.wxml
view class="container">
  view class="tui-picker-name">日期时间选择器（精确到秒）/view>
  picker mode="multiSelector" value="{{dateTime}}" bindchange="changeDateTime" bindcolumnchange="changeDateTimeColumn" range="{{dateTimeArray}}">
    view class="tui-picker-detail">
      选择日期时间: {{dateTimeArray[0][dateTime[0]]}}-{{dateTimeArray[1][dateTime[1]]}}-{{dateTimeArray[2][dateTime[2]]}} {{dateTimeArray[3][dateTime[3]]}}:{{dateTimeArray[4][dateTime[4]]}}:{{dateTimeArray[5][dateTime[5]]}}
    /view>
  /picker>
/view>
index.js
var dateTimePicker = require('../../utils/dateTimePicker.js');


Page({
  data: {
    dateTimeArray: null,
    dateTime: null,
    startYear: 2000,
    endYear: 2050
  },
  onLoad(){
    
    var obj = dateTimePicker.dateTimePicker(this.data.startYear, this.data.endYear);  
    this.setData({
      dateTime: obj.dateTime,
      dateTimeArray: obj.dateTimeArray,
    });
  },


  changeDateTime(e){
    this.setData({ dateTime: e.detail.value });
  },


  changeDateTimeColumn(e){
    var arr = this.data.dateTime, dateArr = this.data.dateTimeArray;


    arr[e.detail.column] = e.detail.value;
    dateArr[2] = dateTimePicker.getMonthDay(dateArr[0][arr[0]], dateArr[1][arr[1]]);


    this.setData({
      dateTimeArray: dateArr,
      dateTime: arr
    });
  },
})
dateTimePicker.js
function withData(param){
  return param  10 ? '0' + param : '' + param;
}
function getLoopArray(start,end){
  var start = start || 0;
  var end = end || 1;
  var array = [];
  for (var i = start; i  end; i++) {
    array.push(withData(i));
  }
  return array;
}
function getMonthDay(year,month){
  var flag = year % 400 == 0 || (year % 4 == 0 && year % 100 != 0), array = null;


  switch (month) {
    case '01':
    case '03':
    case '05':
    case '07':
    case '08':
    case '10':
    case '12':
      array = getLoopArray(1, 31)
      break;
    case '04':
    case '06':
    case '09':
    case '11':
      array = getLoopArray(1, 30)
      break;
    case '02':
      array = flag ? getLoopArray(1, 29) : getLoopArray(1, 28)
      break;
    default:
      array = '月份格式不正确，请重新输入！'
  }
  return array;
}
function getNewDateArry(){
  
  var newDate = new Date();
  var year = withData(newDate.getFullYear()),
      mont = withData(newDate.getMonth() + 1),
      date = withData(newDate.getDate()),
      hour = withData(newDate.getHours()),
      minu = withData(newDate.getMinutes()),
      seco = withData(newDate.getSeconds());


  return [year, mont, date, hour, minu, seco];
}
function dateTimePicker(startYear,endYear,date) {
  
  var dateTime = [], dateTimeArray = [[],[],[],[],[],[]];
  var start = startYear || 1978;
  var end = endYear || 2100;
  
  var defaultDate = date ? [...date.split('')[0].split('-'), ...date.split(' ')[1].split(':')] : getNewDateArry();
  
   
  dateTimeArray[0] = getLoopArray(start,end);
  dateTimeArray[1] = getLoopArray(1, 12);
  dateTimeArray[2] = getMonthDay(defaultDate[0], defaultDate[1]);
  dateTimeArray[3] = getLoopArray(0, 23);
  dateTimeArray[4] = getLoopArray(0, 59);
  dateTimeArray[5] = getLoopArray(0, 59);


  dateTimeArray.forEach((current,index) => {
    dateTime.push(current.indexOf(defaultDate[index]));
  });


  return {
    dateTimeArray: dateTimeArray,
    dateTime: dateTime
  }
}
module.exports = {
  dateTimePicker: dateTimePicker,
  getMonthDay: getMonthDay
}

日期 - 日历 - 选择器实现（图文并茂）

各位看官》创作不易，点个赞！！！
诸君共勉：万事开头难，只愿肯放弃。

免责声明：本文章仅用于学习参考

原文地址: 日期 - 日历 - 选择器实现（图文并茂）

    正文完
    发表至： 开发笔记
    2024-09-28
     0
    Yojack
    版权声明：本篇文章由 Yojack 于2024-09-28发表，共计12433字。
    转载说明：
    1 本网站名称：优杰开发笔记
    2 本站永久网址：https://yojack.cn
    3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
    4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
    5 本站所有内容均可转载及分享, 但请注明出处
    6 我们始终尊重原创作者的版权，所有文章在发布时，均尽可能注明出处与作者。
    7 站长邮箱：laylwenl@gmail.com
    【免费题库】华为OD机试 – 小朋友分组最少调整次数（Java & JS & Python & C & C ）
    HTML3D旋转相册
    Slipshow：重新定义HTML5演示文稿引擎
    JavaScript 打开本地文件夹的N种方法
    评论（没有评论）
    搜一搜,打开新世界
    热门文章
    WordPress3 和 jQuery（二）

    WordPress3 和 jQuery（二）

    原文：zh.annas-archive.org/md5/5EB3887BDFDDB364C2173BCD8CE...
    RabbitMQ 篇-深入了解 RabbitMQ 安装以及 SpringAMQP 的基础使用（声明队列和交换机、发送接收消息、配置 JSON 消息转化器）

    RabbitMQ 篇-深入了解 RabbitMQ 安装以及 SpringAMQP 的基础使用（声明队列和交换机、发送接收消息、配置 JSON 消息转化器）

    🔥博客主页：【 小扳_-CSDN 博客】❤感谢大家点赞👍收藏⭐评论✍ 文章目录         1.0 Rab...
    CSS3新增属性(15个案例 代码 效果图 素材)

    CSS3新增属性(15个案例 代码 效果图 素材)

    目录 1.rgba(透明度) 案例: 为图片添加蓝色的滤镜 1. 代码 2. 效果  2.opacity 属性...
    fastjson_1.2.24和Shiro(CVE-2016-4437)漏洞复现

    fastjson_1.2.24和Shiro(CVE-2016-4437)漏洞复现

    文章目录 一、fastjson 1.2.24 远程命令执行漏洞复现 二、shiro 反序列化漏洞(CVE-20...
    一文彻底搞定MySQL中的JSON类型，效率飞起。

    一文彻底搞定MySQL中的JSON类型，效率飞起。

    写在开头 JSON 类型通常用于存储非结构化的数据或者一些可变的数据，比如存储日志、配置信息等。我们有时候需要...
    一言
    -「」
    标签云
    ​ 图片懒加载.netcore1024程序员节1024程序员节 | 征文2021，目标20222023春节祝福3d3D呈现效果3D导航栏5G SoC7-ZipaardioadbAIaigcAirPods Maxai作画AI工具AI手机AI生成AI编程ajaxandroidandroid-studioangular.jsAngularJSanimationant-design-vueantdanti-design-vueapacheapiAPICloudapp登录页面arcgisarduinoasp.netattachmentawsaxiosa标签babelbackground背景精灵beautifulsoupbootstrapbreakbugc:Progran Filesnodejspnpm.pslc#c5全栈canvanscanvascanva可画cesium渐变材质chatgptchm手册Chromecjsoncnpmcocos2dcodemirrorcondacookie交互crosCrypto，web Crypto，Crypto加密CSScss 弹性布局CSS 选择器css，css点赞，css直播css，flex布局，reactnative布局css，Nestingcss，圆角三角形，三角形css，外描边，阴影，文字渐变CSS3CSS3DSpritecss3沿椭圆轨道旋转CSS优化css动画css基础css学习css居中对齐css属性css文字描边css新特性css盒模型CSS相对定位CSS继承性css视差滚动css视频CSS设置虚线css超出部分显示省略号css选择器curlc语言daemondata urldataVDcokerdecodeURIComponent