uniapp 之 小球根据当前时间 显示位置

目录

效果图

 前言

总代码

1. template 代码

 2. script 代码

3. js文件

4.样式

注解

1.小球运动代码

2. picker 时间选择器

 补充


效果图

 前言

最里面的是一张图片,并不是手写的样式,

总代码

1. template 代码

 <uni-popup ref="appointmentPopup" :is-mask-click="false" type="bottom" safe-area background-color="#1e2538"
      style="color: #fff;">
      <view class="" style="height: 100vh; text-align: center;">
        <view class="" style="">定时充电</view>
        <view style="margin: 40rpx 0 20rpx 0;">开始时间</view>
        <picker mode="time" :value="time" :start="timeChange" @change="bindTimeChange">
          <text>{{dateTime}}</text>
        </picker>
        <view class="circleClock">
          <view class="left_box" :style="{transform: 'rotate('+lxl+'deg)'}">
            <view class="left_item"></view>
          </view>
          <image src="/static/images/clock.png" class="clock-img"></image>
        </view>
        <view @click="close">开始定时充电</view>
      </view>
    </uni-popup>

 2. script 代码

<script>
 
  import getDateTime from '@/common/time.js'

  export default {
   
    data() {
      return {
        timeChange: null,
        lxl: null, // 角度
      
        date: '', //起始日期
        endDate: '', //终止日期
        dateTime: '',
        time: '',
       
      }
    },
    
    methods: {
      bindTimeChange(e) {
        this.changeTime = e.detail.value
        let arr = this.dateTime.split(' ')
        this.dateTime = arr[0] + ' ' + this.changeTime
        console.log('开始时间', this.dateTime);
      },
      close() {
        console.log(this.changeTime, this.timeChange, '比较');
        if (this.changeTime !== undefined && this.timeChange > this.changeTime) return uni.$showMsg('开始时间输入不对')
  
        console.log('执行关闭事件');
        // this.$refs.appointmentPopup.close()
      },
     
    },
    onLoad() {
      this.dateTime = getDateTime.hour(0)   // 现在时间
      this.date = getDateTime.getDateStr(null, -1); //昨天
      this.endDate = getDateTime.dateTimeStr('y-m-d'); //今天
      let str = this.dateTime.split('  ')
      this.timeChange = str[1]
      let arr = str[1].split(':')
      // console.log(arr, str, 'arr');
      let hDeg = arr[0] / 24 * 360
      let mDeg = arr[1] / 24 / 60 * 360
      let sDeg = arr[2] / 24 / 60 / 60 * 360
      this.lxl = hDeg + mDeg + sDeg
    },
  }
</script>

3. js文件

function dateTimeStr(str) {
  var date = new Date(),
    year = date.getFullYear(), //年
    month = date.getMonth() + 1, //月
    day = date.getDate(), //日
    hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(), //时
    minute = date.getMinutes() < 10 ? date.getMinutes() : date.getMinutes(), //分
    second = date.getSeconds() < 10 ? date.getSeconds() : date.getSeconds(); //秒
  month >= 1 && month <= 9 ? (month = "0" + month) : "";
  day >= 0 && day <= 9 ? (day = "0" + day) : "";
  hour >= 0 && hour <= 9 ? hour : "";
  minute >= 0 && minute <= 9 ? (minute = "0" + minute) : "";
  second >= 0 && second <= 9 ? (second = "0" + second) : "";
  if (str.indexOf('y') != -1) {
    str = str.replace('y', year)
  }
  if (str.indexOf('m') != -1) {
    str = str.replace('m', month)
  }
  if (str.indexOf('d') != -1) {
    str = str.replace('d', day)
  }
  if (str.indexOf('h') != -1) {
    str = str.replace('h', hour)
  }
  if (str.indexOf('i') != -1) {
    str = str.replace('i', minute)
  }
  if (str.indexOf('s') != -1) {
    str = str.replace('s', second)
  }
  return str;
}

//获取日期的今天,明天,后天 -1是昨天,0是今天,1是后一天
function getDateStr(today, addDayCount) {
  let date;
  if (today) {
    date = new Date(today);
  } else {
    date = new Date();
  }
  date.setDate(date.getDate() + addDayCount); //获取AddDayCount天后的日期 
  let y = date.getFullYear();
  let m = date.getMonth() + 1; //获取当前月份的日期 
  let d = date.getDate();
  if (m < 10) {
    m = '0' + m;
  };
  if (d < 10) {
    d = '0' + d;
  }
  console.log(y + "-" + m + "-" + d)
  return y + "-" + m + "-" + d;
}

function hour(e) {
  // 判断是少一个小时还是多一个小时

  if (e < 0) {
    e = e * (-1)
    hourDown(e)
    return
  }
  return hourUp(e)
}

function hourUp(e) {
  // 比现在多几个小时
  var end = Date.now()
  var start = 1000 * 60 * 60 * e
  var interval = end + start; //结束 - 开始 = 毫秒值
  var a = new Date(interval);
  var y = a.getFullYear();
  var m = a.getMonth() + 1;
  m = m < 10 ? "0" + m : m;
  var d = a.getDate();
  d = d < 10 ? "0" + d : d;

  var h = a.getHours();
  h = h < 10 ? "0" + h : h;
  var mm = a.getMinutes();
  mm = mm < 10 ? "0" + mm : mm;
  var s = a.getSeconds();
  s = s < 10 ? "0" + s : s;
  return y + '-' + m + '-' + d + ' ' + ' ' + h + ':' + mm + ':' + s

}

function hourDown(e) {
  // 少多少个小时
  var end = Date.now()
  var start = 1000 * 60 * 60 * e
  var interval = end - start; //结束 - 开始 = 毫秒值
  var a = new Date(interval);
  var y = a.getFullYear();
  var m = a.getMonth() + 1;
  m = m < 10 ? "0" + m : m;
  var d = a.getDate();
  d = d < 10 ? "0" + d : d;

  var h = a.getHours();
  h = h < 10 ? "0" + h : h;
  var mm = a.getMinutes();
  mm = mm < 10 ? "0" + mm : mm;
  var s = a.getSeconds();
  s = s < 10 ? "0" + s : s;
  return y + '/' + m + '/' + d + '  ' + h + ':' + mm + ':' + s;
}
module.exports = {
  dateTimeStr: dateTimeStr,
  getDateStr: getDateStr,
  hour: hour
}

4.样式

<style lang="scss">
  page {
    width: 100%;
    height: 100%;
    color: #fff;

    button::after {
      border: none
    }

    background: #1e2538 !important;
  }
</style>
<style lang="scss" scoped>
  $color : #4763b5;

  .circleClock {
    width: 287px;
    height: 287px;
    border-radius: 50%;
    border: 1px solid $color;
    margin: 44rpx auto;
    position: relative;
    box-shadow: 0 0 50rpx $color;

    .clock-img {
      width: 300rpx;
      height: 300rpx;
      position: absolute;
      left: 138rpx;
      top: 110rpx;
    }
  }


  .left_box {
    margin: 74rpx auto;
    width: 365rpx;
    height: 365rpx;
    border: 1px solid $color;
    overflow: hidden;
    z-index: 1;
    border-radius: 50%;
    animation: loading_left 86400s linear;
  }

  // 小球
  .left_item {
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    background-color: #5e7ef2;
    margin: 0 auto;
  }

  /* 动画 */
  @keyframes loading_left {
    to {
      transform: rotate(1turn);
    }
  }

</style>

注解

1.小球运动代码

 <view class="left_box" :style="{transform: 'rotate('+lxl+'deg)'}">
            <view class="left_item"></view>
          </view>

 最开始没认真看代码 直到后面 我才发现 其实小球没有动画效果,不运动,而运动的是父盒子,

所以 动画角度: transform : rotate(xxdeg)加在父盒子身上

2. picker 时间选择器

时间选择器有个 start 属性,这个属性就是 当滑动时间进行选择时 它能一下跳到当前时间,而它之前的时间不能进行选择

但 这个属性有个弊端 若我不进行滑动 直接点击确定 它的时间会变成00点,然后你在进行选择的话,任何时间都能进行选择,所以在点击开始定时充电的按钮的close事件里 进行时间的一个比较

 补充

如果比较简单的方法,或更好的方法,或觉得我这需要改进的, 请在下面留言,让我们一起共同进步

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/10119.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

反序列化漏洞及PHP魔法函数

目录 1、漏洞原理 2、序列化&#xff08;以PHP语言为例&#xff09; 3、反序列化 4、PHP魔法函数 &#xff08;1&#xff09;__wakeup() &#xff08;2&#xff09;__destruct() &#xff08;3&#xff09;__construct() &#xff08;4&#xff09;__toString() &…

Pytorch基础 - 3. torch.utils.tensorboard

目录 1. 简介 2. 基本步骤 3. 示例1 - 可视化单条曲线 4. 示例2 - 可视化多条曲线 5. 示例3 - 可视化网络结构 1. 简介 Tensorboard是Tensorflow的可视化工具&#xff0c;常用来可视化网络的损失函数&#xff0c;网络结构&#xff0c;图像等。后来将Tensorboard集成到了P…

【Linux】认识协议

&#x1f387;Linux&#xff1a; 博客主页&#xff1a;一起去看日落吗分享博主的在Linux中学习到的知识和遇到的问题博主的能力有限&#xff0c;出现错误希望大家不吝赐教分享给大家一句我很喜欢的话&#xff1a; 看似不起波澜的日复一日&#xff0c;一定会在某一天让你看见坚持…

QT程序退出还占进程

问题情况 程序运行时的样子&#xff1a; 程序退出时的样子&#xff1a; 其跑到了后台进程里面&#xff1a; 程序退出了&#xff0c;但在任务管理器里查看&#xff0c;其从进程里面转移到后台进程了。 这种问题&#xff0c;怎么办&#xff0c;代码里&#xff0c;应该释放的也都…

【我的创作纪念日】恒川的创作一周年

机缘 大家好&#xff0c;我是热爱跑步的恒川&#xff0c;今天是个特殊的日子&#xff08;我的创作纪念日&#xff09;&#xff0c;在去年的今天&#xff0c;我发了第一篇博文。去年的时候&#xff0c;刚接触到CSDN&#xff0c;只想把他当作一个学习的工具&#xff0c;后来&…

浅析时间复杂度与空间复杂度

时间复杂度 何为时间复杂度 算法的时间复杂度&#xff0c;是一个用于度量一个算法的运算时间的一个描述&#xff0c;本质是一个函数&#xff0c;根据这个函数能在不用具体的测试数据来测试的情况下&#xff0c;粗略地估计算法的执行效率&#xff0c;换句话讲时间复杂度表示的…

UNIX高级编程--管道

管道 管道是 UNIX 系统 IPC 的最高老形式&#xff0c;所有的 UNIX 系统都提供此种通信机制。管道有以下两种局限性。 历史上&#xff0c;它们是半双工&#xff08;既数据只能在一个方向上流动&#xff09;。现在&#xff0c;某些系统提供全双工管道&#xff0c;但是为了最佳的…

代码随想录算法训练营第五十七天 | 647. 回文子串、516. 最长回文子序列、动态规划总结

647. 回文子串 动规五部曲 1、确定dp数组&#xff08;dp table&#xff09;以及下标的含义 在判断字符串S是否为回文时&#xff0c;如果知道 s[1]&#xff0c;s[2]&#xff0c;s[3] 这个子串是回文的&#xff0c;那么只需要比较 s[0]和s[4]这两个元素是否相同&#xff0c;如果…

Motion Planning学习笔记一:配置空间、图、图搜索、图遍历

学习高飞博士的路径规划课程所总结的学习笔记。 目录 1、配置空间&#xff08;Configuration Space, C-space&#xff09; 2、图&#xff08;Graphs&#xff09; 3、图搜索&#xff08;Graph Search Basis&#xff09; 3.1、总体框架 3.2、两种基本的图遍历算法 3.3、启…

【Python】【进阶篇】十七、Python爬虫实现实时翻译

目录十七、Python爬虫实现实时翻译17.1 JS代码slat与sign17.2 Python代码表示参数17.3 完整程序实现十七、Python爬虫实现实时翻译 YD翻译是以异步方式实现数据加载的&#xff0c;要实现数据抓取&#xff0c;其过程极其繁琐。 上一节《Python爬虫的浏览器实现抓包》&#xff…

【hello Linux】Linux开发工具

目录 1. vim&#xff1a;文本编辑器 1.1 各种模式的切换 补充&#xff1a;ctrl r命令 1.2 命令模式的操作 1.3 插入模式的操作 1.4 底行模式的操作 1.5 配置vim环境 1.6 配置亲属关系 2. gcc/g&#xff1a;编译器 2.1 预处理&#xff1a; 2.2 编译&#xff1a; 2.3 汇编&#x…

如何利用ChatGPT辅助优化刷题性能

根据土著刷题共建群里的一个小伙伴反馈&#xff0c;刷题会出现切题卡顿的情况&#xff0c;有时会出现滑不动的情况。 定位问题 为了定位切题卡顿问题的具体原因&#xff0c;测试了高低端手机&#x1f4f1;、切换2G、3G、4G低网络状态等各种影响切题的现实情况&#xff0c;经过借…

STM32F4_定时器精讲(TIM)

目录 1. 什么是定时器&#xff1f; 2. STM32定时器简介 2.1 高级控制定时器 TIM1和TIM8 2.1.1 TIM1和TIM8简介 2.1.2 时基单元 2.1.3 计数器模式 2.1.4 重复计数器 2.1.5 时钟选择 2.1.6 捕获/比较通道 2.1.7 输入捕获模式 2.1.8 其他功能 2.2 通用定时器 TIM2到TI…

Mysql 你还在一个字段一个索引吗

今天看到某系统的mysql在某时段存在thread_running线程数飙高触发告警&#xff0c;挤时间分析了该异常时间段的慢日志记录&#xff0c;并进行了sql优化 慢日志记录主要归为3个慢sql (编号1&#xff0c;2&#xff0c;3) 一、 1号sql原文 select * from feeds where topics_id &…

【MySQL数据库原理】MySQL Community安装与配置

目录 安装成功之后查看版本验证1、介绍、安装与配置数据库2、操作MySQL数据库3、MySQL数据库原理安装成功之后查看版本验证 SELECT VERSION();查看mysql版本号 1、介绍、安装与配置数据库 下载安装包:https://download.csdn.net/download/weixin_41194129/87672588 MySQL…

Visual studio C#中通过nuget安装sqlite库及C#中sliqte的用法

以前在Visual studio 的2017版中讲过如何使用sqlite&#xff0c;这里我们再次说说如何使用sqlite&#xff0c;以前Nuget使用还不是很流行很普及&#xff0c;大多数人不知道&#xff0c;但随着VS的升级&#xff0c;Nuget成为安装插件或者引用库文件标准的获取手段&#xff0c;所…

Qt Quick - TabBar

Qt Quick - TabBar使用总结一、概述二、调整选项卡三、Flickable标签三、定制化一、概述 TabBar其实就是选项卡&#xff0c;TabBar是由TabButton控件填充&#xff0c;TabBar可以与任何提供currentIndex属性的布局或容器控件一起使用&#xff0c;如StackLayout或SwipeView。Tab…

Vector - CAPL - CAN x 总线信息获取

在CAN&CANFD测试中&#xff0c;我们经常需要获取到CAN总线的负载、错误帧、过载帧、发送错误等等CAN总线上面的信息&#xff0c;这些信息如此重要&#xff0c;但是如果真的要写代码去实现也是相当不易的&#xff0c;那我们该如何去获取到的呢&#xff1f;下面我们就来一起看…

Object方法

私人博客 许小墨のBlog —— 菜鸡博客直通车 系列文章完整版&#xff0c;配图更多&#xff0c;CSDN博文图片需要手动上传&#xff0c;因此文章配图较少&#xff0c;看不懂的可以去菜鸡博客参考一下配图&#xff01; 系列文章目录 前端系列文章——传送门 JavaScript系列文章—…

柔性数组【结构体和动态内存的结合】

全文目录前言柔性数组的定义语法柔性数组的特点柔性数组的使用柔性数组的优势前言 很多人可能没有听过柔性数组这个概念&#xff0c;但是在C99中柔性数组是确实存在的。我个人感觉有点像动态内存和结构体的结合。 柔性数组的定义语法 结构中的最后一个元素允许是未知大小的数…
最新文章