diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..115cc02 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,31 @@ +/* + * Eslint config file + * Documentation: https://eslint.org/docs/user-guide/configuring/ + * Install the Eslint extension before using this feature. + */ +module.exports = { + env: { + es6: true, + browser: true, + node: true, + }, + ecmaFeatures: { + modules: true, + }, + parserOptions: { + ecmaVersion: 2018, + sourceType: 'module', + }, + globals: { + wx: true, + App: true, + Page: true, + getCurrentPages: true, + getApp: true, + Component: true, + requirePlugin: true, + requireMiniProgram: true, + }, + // extends: 'eslint:recommended', + rules: {}, +} diff --git a/12345.png b/12345.png new file mode 100644 index 0000000..88ab837 Binary files /dev/null and b/12345.png differ diff --git a/app.js b/app.js new file mode 100644 index 0000000..1ed57c4 --- /dev/null +++ b/app.js @@ -0,0 +1,19 @@ +// app.js +App({ + onLaunch() { + // 展示本地存储能力 + const logs = wx.getStorageSync('logs') || [] + logs.unshift(Date.now()) + wx.setStorageSync('logs', logs) + + // 登录 + wx.login({ + success: res => { + // 发送 res.code 到后台换取 openId, sessionKey, unionId + } + }) + }, + globalData: { + userInfo: null + } +}) diff --git a/app.json b/app.json new file mode 100644 index 0000000..a00a031 --- /dev/null +++ b/app.json @@ -0,0 +1,13 @@ +{ + "pages":[ + "pages/index/index" + ], + "window":{ + "backgroundTextStyle":"light", + "navigationBarBackgroundColor": "#820", + "navigationBarTitleText": "模 拟 时 钟", + "navigationBarTextStyle":"white" + }, + "style": "v2", + "sitemapLocation": "sitemap.json" +} diff --git a/app.wxss b/app.wxss new file mode 100644 index 0000000..06c6fc9 --- /dev/null +++ b/app.wxss @@ -0,0 +1,10 @@ +/**app.wxss**/ +.container { + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + padding: 200rpx 0; + box-sizing: border-box; +} diff --git a/clock b/clock new file mode 160000 index 0000000..349fce4 --- /dev/null +++ b/clock @@ -0,0 +1 @@ +Subproject commit 349fce417c1e80e2b7605f1dd132b0ac7bfe18db diff --git a/pages/index/index.js b/pages/index/index.js new file mode 100644 index 0000000..dda41ab --- /dev/null +++ b/pages/index/index.js @@ -0,0 +1,84 @@ +// pages/clock/clock.js +const util = require("../../utils/util.js"); +Page({ + + /** + * 页面的初始数据 + */ + data: { + currentTime: "", + hdeg: 0, //时针旋转角度 + mdeg: 0, //分针旋转角度 + sdeg: 0, //秒针旋转角度 + flag: "none" //获取到时间后再显示页面 + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad: function (options) { + const that = this; + setInterval(function () { + const _currentTime = util.formatTime(new Date()).split(" ")[1]; + const _hdeg = _currentTime.split(":")[0] * 30; + const _mdeg = _currentTime.split(":")[1] * 6; + const _sdeg = _currentTime.split(":")[2] * 6; + that.setData({ + currentTime: _currentTime, + hdeg: _hdeg, + mdeg: _mdeg, + sdeg: _sdeg, + flag: "block" + }); + }, 1000) + }, + + /** + * 生命周期函数--监听页面初次渲染完成 + */ + onReady: function () { + + }, + + /** + * 生命周期函数--监听页面显示 + */ + onShow: function () { + + }, + + /** + * 生命周期函数--监听页面隐藏 + */ + onHide: function () { + + }, + + /** + * 生命周期函数--监听页面卸载 + */ + onUnload: function () { + + }, + + /** + * 页面相关事件处理函数--监听用户下拉动作 + */ + onPullDownRefresh: function () { + + }, + + /** + * 页面上拉触底事件的处理函数 + */ + onReachBottom: function () { + + }, + + /** + * 用户点击右上角分享 + */ + onShareAppMessage: function () { + + } +}) diff --git a/pages/index/index.json b/pages/index/index.json new file mode 100644 index 0000000..8835af0 --- /dev/null +++ b/pages/index/index.json @@ -0,0 +1,3 @@ +{ + "usingComponents": {} +} \ No newline at end of file diff --git a/pages/index/index.wxml b/pages/index/index.wxml new file mode 100644 index 0000000..f2398b9 --- /dev/null +++ b/pages/index/index.wxml @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 北京时间 + {{currentTime}} + diff --git a/pages/index/index.wxss b/pages/index/index.wxss new file mode 100644 index 0000000..cfa6f7a --- /dev/null +++ b/pages/index/index.wxss @@ -0,0 +1,147 @@ +/**index.wxss**/ +.warp { + width: 600rpx; + height: 600rpx; + /*给大的外面设置了一个从中心点的渐变*/ + background: radial-gradient(circle, white, rgb(109, 30, 30), rgb(235, 121, 118)); + margin: 50rpx auto; + border-radius: 400rpx; +} + +/*时钟里面*/ +.div1 { + width: 500rpx; + height: 500rpx; + background: lavender; + position: relative; + top: 50rpx; + left: 50rpx; + border-radius: 250rpx; +} + +.h { + /*作为时针*/ + width: 20rpx; + height: 100rpx; + background: black; + position: absolute; + top: 150rpx; + left: 240rpx; + border-top-left-radius: 10rpx; + border-top-right-radius: 10rpx; + /*指定旋转的中心*/ + transform-origin: bottom center; + /* animation: rotate360deg 43200s linear infinite; */ +} + +.m { + /*作为分针*/ + width: 12rpx; + height: 160rpx; + background: black; + position: absolute; + top: 90rpx; + left: 242rpx; + border-top-left-radius: 10rpx; + border-top-right-radius: 10rpx; + /*指定旋转的中心*/ + transform-origin: bottom center; + /* animation: rotate360deg 3600s linear infinite; */ +} + +.s { + /*作为秒针*/ + width: 7rpx; + height: 200rpx; + background: red; + position: absolute; + top: 50rpx; + left: 240rpx; + border-top-left-radius: 5rpx; + border-top-right-radius: 5rpx; + /*指定旋转的中心为左边*/ + transform-origin: bottom center; + /*时间为60s */ + /* animation: rotate360deg 60s steps(60) infinite; */ +} + +.div1_3 { + position: absolute; + width: 40rpx; + height: 40rpx; + border-radius: 20rpx; + top: 230rpx; + left: 230rpx; + background: rgb(255, 230, 0); +} + +.div1-4 { + width: 500rpx; + height: 5rpx; + /*background: red;*/ + position: absolute; + top: 250rpx; + /*把它设置成一个弹性盒子，并且让子元素两边对齐*/ + display: flex; + justify-content: space-between; +} + +/*用旋转把一个圆分成12等分*/ +.d1 { + transform: rotateZ(90deg); +} + +.d2 { + transform: rotateZ(30deg); +} + +.d3 { + transform: rotateZ(60deg); +} + +.d4 { + transform: rotateZ(120deg); +} + +.d5 { + transform: rotateZ(150deg); +} + +.left { + width: 20rpx; + height: 5rpx; + background: black; +} + +.right { + width: 20rpx; + height: 5rpx; + background: black; +} + +.d0>div, +.d1>div { + height: 10rpx; + width: 35rpx; +} + +/* 不采取动画，通过定时调用函数动态显示当前时间 */ +/*让时针分针和秒针绕右边旋转360deg*/ +/* @keyframes rotate360deg { + from {} + + to { + transform: rotateZ(360deg); + } +} */ + +.text1 { + text-align: center; + font-size: x-large; + margin: 100rpx 0 50rpx; +} + +.currentTime { + text-align: center; + font-size: xx-large; +} diff --git a/picture.txt b/picture.txt new file mode 100644 index 0000000..ad30603 --- /dev/null +++ b/picture.txt @@ -0,0 +1 @@ +！截图(12345.png) \ No newline at end of file diff --git a/project.config.json b/project.config.json new file mode 100644 index 0000000..bf54605 --- /dev/null +++ b/project.config.json @@ -0,0 +1,52 @@ +{ + "description": "项目配置文件", + "packOptions": { + "ignore": [], + "include": [] + }, + "setting": { + "bundle": false, + "userConfirmedBundleSwitch": false, + "urlCheck": true, + "scopeDataCheck": false, + "coverView": true, + "es6": true, + "postcss": true, + "compileHotReLoad": false, + "lazyloadPlaceholderEnable": false, + "preloadBackgroundData": false, + "minified": true, + "autoAudits": false, + "newFeature": false, + "uglifyFileName": false, + "uploadWithSourceMap": true, + "useIsolateContext": true, + "nodeModules": false, + "enhance": true, + "useMultiFrameRuntime": true, + "useApiHook": true, + "useApiHostProcess": true, + "showShadowRootInWxmlPanel": true, + "packNpmManually": false, + "enableEngineNative": false, + "packNpmRelationList": [], + "minifyWXSS": true, + "showES6CompileOption": false, + "minifyWXML": true, + "babelSetting": { + "ignore": [], + "disablePlugins": [], + "outputPath": "" + }, + "condition": false + }, + "compileType": "miniprogram", + "libVersion": "2.25.3", + "appid": "touristappid", + "projectname": "miniprogram-92", + "condition": {}, + "editorSetting": { + "tabIndent": "insertSpaces", + "tabSize": 2 + } +} \ No newline at end of file diff --git a/project.private.config.json b/project.private.config.json new file mode 100644 index 0000000..05603ec --- /dev/null +++ b/project.private.config.json @@ -0,0 +1,7 @@ +{ + "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html", + "projectname": "SimulationClock", + "setting": { + "compileHotReLoad": true + } +} \ No newline at end of file diff --git a/sitemap.json b/sitemap.json new file mode 100644 index 0000000..ca02add --- /dev/null +++ b/sitemap.json @@ -0,0 +1,7 @@ +{ + "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html", + "rules": [{ + "action": "allow", + "page": "*" + }] +} \ No newline at end of file diff --git a/utils/util.js b/utils/util.js new file mode 100644 index 0000000..764bc2c --- /dev/null +++ b/utils/util.js @@ -0,0 +1,19 @@ +const formatTime = date => { + const year = date.getFullYear() + const month = date.getMonth() + 1 + const day = date.getDate() + const hour = date.getHours() + const minute = date.getMinutes() + const second = date.getSeconds() + + return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}` +} + +const formatNumber = n => { + n = n.toString() + return n[1] ? n : `0${n}` +} + +module.exports = { + formatTime +}