A006_Demo练习—TimeWaster

&前言

TimeWaster v1.5.0

waste your time reading this md which tells u how to waste time

基于vue实现 时钟屏保 静态页面 的 demo 练习

技术栈: Vue

• 项目整体采用 Vue 搭建，风格样式 模仿 Momentum
• 小型项目暂未考虑 Vuex
• 数据管理 props ， created ， mounted ， computed ， watch
• 单页面开发SPA

&目录

1. 快速链接—demo演示地址
2. 安装教程
3. 使用说明
4. 项目结构
5. 开发笔记
6. 核心代码

&1.快速连接

demo演示地址

&2.安装教程

普通用户

• 在 PC端 打开 此链接
• 收藏为 书签
• 设置为 游览器启动页
• 登录
• 开始 waste time : )
• 如遇异常bug，建议清除浏览器缓存重置应用

开发人员

Build Setup

# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build# build for production and view the bundle analyzer reportnpm run build --report

&3.使用说明

现有功能

1. 时间居中显示
2. 百度搜索跳转
3. 左侧日期显示，点击switch支持切换百分比
4. 右侧生命计算，包含进度条与数据
5. 7点，10点，15点，17点，21点这个5个小时点内切换Gakki壁纸。
6. 设置支持主题色切换 add at 2019/10/01
7. 登录功能 add at 2019/10/01
8. 右侧日程预约功能 删除
9. 自适应分辨率1920*1080 zoom.js

待完善功能

• 移动端自适应
• 自适应bug
• 左侧占比饼图bug
• 图片素材加载慢
• ...

&4 .项目结构

项目依赖

   "vodal": "^2.4.0",    "vue": "^2.5.2",    "vue-color": "^2.7.0",    "vue-router": "^3.0.1",    "sweetalert2": "^8.18.0"

组件模块

-components    -factory        -timeAbout            -MainClock.vue            -TimeRatio.vue            -TimeRemain.vue    -layout        -TW_Footer.vue        -TW_Header.vue        -TW_Main.vue        -TW_Menu.vue        -TW_Page.vue        -TW_View.vue    -public        -CirclrProgress.vue

组合结构

┌─page├────header├────view│ └────main│   ├────TimeRatio│   ├────MainClock│   └────TimeRemain└────footer

页面布局

┌─────page─────┐│  ┌─Header─┐  │ │  └────────┘  │ │  ┌──View──┐  │ │  │ ┌Main┐ │  │ │  │ │Time│ │  ││  │ └────┘ │  ││  └────────┘  ││  ┌─Footer─┐  │ │  └────────┘  │└──────────────┘

&5 .开发笔记

阶段一

2018/10/19

• 当前时间[布局居中]

  • 多格式
  • 多时区

• 占比[布局居左]

  • 月，周，年
  • 详细与总比切换

• 时差[布局居右]

  • 距离某一约定时间
• 存活时间
• 剩余时间[100年]

阶段二

2018/10/21

• 登录页

  • 姓名
  • 生辰

• 设置页

  • 主题样式自定义

• 主页

  • 搜索[百度]
  • 左侧circle 添加动画
  • 背景gakki 图片/视频
  • 右侧线条动画
• 移动端自适应？

阶段三

2019/10/01 upGrade

• 模块化改造
• 自适应分辨率

&6 .核心代码

时间格式化

/** * 时间格式化 * */export const padLeftZero = (str)=> {  return ('00' + str).substr(str.length);};export const formatDate = (date, fmt)=> {  if (/(y+)/.test(fmt)) {    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));  }  let o = {    'M+': date.getMonth() + 1,    'd+': date.getDate(),    'h+': date.getHours(),    'm+': date.getMinutes(),    's+': date.getSeconds()  };  for (let k in o) {    if (new RegExp(`(${k})`).test(fmt)) {      let str = o[k] + '';      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));    }  }  return fmt;};/** * 自定义时间对象 * *///  闰年校验export const  isR = (date)=> {  let y= date.getFullYear();  let isLeap = (0===y%4) && (0===y%100) || (0===y%400);  return isLeap ? 366 : 365;};export function timeWaste(date) {  let yearTotal=isR(date)  let dayOfYear = Math.ceil(( date - new Date(date.getFullYear().toString()))/(24*60*60*1000))+1  let dayOfMonth = new Date(date.getFullYear(),(date.getMonth()+1),0).getDate()  let week = date.getDay()==0?7:date.getDay();  let good =date.getHours()<12&&date.getHours()>=4?'morning':    date.getHours()>=12&&date.getHours()<20?'afternoon':'evening';  let m = date.getHours()>=12?'PM':'AM'  return {    date: date,    year:date.getFullYear(),    week: week,    week_en:date.toDateString().split(" ")[0],    month: date.getMonth()+1,    month_en:date.toDateString().split(" ")[1],    day: date.getDate(),    dayOfYear: dayOfYear,    dayOfMonth: dayOfMonth,    D_W: Math.ceil(100*week/7),    D_M: Math.ceil(100*date.getDate()/dayOfMonth),    D_Y: Math.ceil(100*dayOfYear/yearTotal),    hour: date.getHours(),    min: date.getMinutes(),    sec: date.getSeconds(),    m:m,    good:good,    yearTotal: yearTotal  }};/** * 时间计算 * */export function timeMath(dateA,dateB) {  var timeSpan = {};  var TotalMilliseconds = dateA.getTime() - dateB.getTime();//相差的毫秒数  if (isNaN(TotalMilliseconds)  || TotalMilliseconds<0) {    return null;  }  timeSpan.Days = parseInt(TotalMilliseconds / 1000 / 60 / 60 /24);  timeSpan.TotalHours = parseInt(TotalMilliseconds / 1000 / 60 / 60)+'';  timeSpan.Hours = timeSpan.TotalHours % 24;  timeSpan.TotalMinutes = parseInt(TotalMilliseconds / 1000 / 60);  timeSpan.Minutes = timeSpan.TotalMinutes % 60+'';  timeSpan.TotalSeconds = parseInt(TotalMilliseconds / 1000);  timeSpan.Seconds = timeSpan.TotalSeconds % 60;  timeSpan.TotalMilliseconds = TotalMilliseconds;  timeSpan.Milliseconds = TotalMilliseconds % 1000;  return timeSpan;};

主题色配置

CSS3原生变量var

/*  page  */.tWaste-page{  height: 100%;  width: 100%;  position: relative;    --headBg:transparent;  --headTxt:#fff;  --headHL:red;  --headAnm:red;  --footBg:transparent;  --footTxt:#4e6e8e;  --footSub:#eaecef;  --viewBg:transparent;  --viewTxt:#FFFFFF;  --viewAnm:#f7b3b3;  --viewHL:red;}

<template>    <div class="tWaste-page" :style="[themeObj,bgObj]">    ...    </div></template>

自适应分辨率

/* * @Author: funlee * @Email: i@funlee.cn * @Date: 2017-12-18 16:20:29 * @Last Modified time: 2017-12-18 16:20:29 * @Description: 页面缩放 */export default () => {  const {    pageWidth,    pageHeight  } = {    pageWidth: 1920,    pageHeight: 1080  }  const body = document.querySelector('body')  body.style.width = `${pageWidth}px`  console.log(body.style.width);  body.style.height = `${pageHeight}px`  const x = window.innerWidth / pageWidth  const y = window.innerHeight / pageHeight  body.style.transform = `scale(${x}, ${y})`}