lesson 1 v0.1

Or0chimaru · Aug 27, 2022 · 896b850 · 896b850
commit 896b850
Show file tree

Hide file tree

Showing 6 changed files with 251 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,18 @@
+# Various IDEs and Editors
+.vscode/
+.idea/
+**/*~
+
+# Mac OSX temporary files
+.DS_Store
+**/.DS_Store
+
+# dfx temporary files
+.dfx/
+
+# generated files
+src/declarations/
+
+# frontend code
+node_modules/
+dist/
diff --git a/README.md b/README.md
@@ -0,0 +1,51 @@
+# lesson1
+
+Welcome to your new lesson1 project and to the internet computer development community. By default, creating a new project adds this README and some template files to your project directory. You can edit these template files to customize your project and to include your own code to speed up the development cycle.
+
+To get started, you might want to explore the project directory structure and the default configuration file. Working with this project in your development environment will not affect any production deployment or identity tokens.
+
+To learn more before you start working with lesson1, see the following documentation available online:
+
+- [Quick Start](https://sdk.dfinity.org/docs/quickstart/quickstart-intro.html)
+- [SDK Developer Tools](https://sdk.dfinity.org/docs/developers-guide/sdk-guide.html)
+- [Motoko Programming Language Guide](https://sdk.dfinity.org/docs/language-guide/motoko.html)
+- [Motoko Language Quick Reference](https://sdk.dfinity.org/docs/language-guide/language-manual.html)
+- [JavaScript API Reference](https://erxue-5aaaa-aaaab-qaagq-cai.raw.ic0.app)
+
+If you want to start working on your project right away, you might want to try the following commands:
+
+```bash
+cd lesson1/
+dfx help
+dfx canister --help
+```
+
+## Running the project locally
+
+If you want to test your project locally, you can use the following commands:
+
+```bash
+# Starts the replica, running in the background
+dfx start --background
+
+# Deploys your canisters to the replica and generates your candid interface
+dfx deploy
+```
+
+Once the job completes, your application will be available at `http://localhost:8000?canisterId={asset_canister_id}`.
+
+Additionally, if you are making frontend changes, you can start a development server with
+
+```bash
+npm start
+```
+
+Which will start a server at `http://localhost:8080`, proxying API requests to the replica at port 8000.
+
+### Note on frontend environment variables
+
+If you are hosting frontend code somewhere without using DFX, you may need to make one of the following adjustments to ensure your project does not fetch the root key in production:
+
+- set`NODE_ENV` to `production` if you are using Webpack
+- use your own preferred method to replace `process.env.NODE_ENV` in the autogenerated declarations
+- Write your own `createActor` constructor
diff --git a/canister_ids.json b/canister_ids.json
@@ -0,0 +1,8 @@
+{
+  "lesson1_backend": {
+    "ic": "kzfgh-aaaaa-aaaak-qatua-cai"
+  },
+  "lesson1_frontend": {
+    "ic": "k6eat-nyaaa-aaaak-qatuq-cai"
+  }
+}
diff --git a/dfx.json b/dfx.json
@@ -0,0 +1,31 @@
+{
+  "version": 1,
+  "dfx": "0.11.1",
+  "canisters": {
+    "lesson1_backend": {
+      "type": "motoko",
+      "main": "src/lesson1_backend/main.mo"
+    },
+    "lesson1_frontend": {
+      "type": "assets",
+      "source": [
+        "src/lesson1_frontend/assets"
+      ],
+      "dependencies": [
+        "lesson1_backend"
+      ]
+    }
+  },
+  "defaults": {
+    "build": {
+      "packtool": "",
+      "args": ""
+    }
+  },
+  "networks": {
+    "local": {
+      "bind": "127.0.0.1:8000",
+      "type": "ephemeral"
+    }
+  }
+}
diff --git a/src/lesson1_backend/main.mo b/src/lesson1_backend/main.mo
@@ -0,0 +1,5 @@
+actor {
+  public func greet(name : Text) : async Text {
+    return "Hello, " # name # "!";
+  };
+};
diff --git a/src/lesson1_frontend/assets/index.html b/src/lesson1_frontend/assets/index.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Stopwatch</title>
+</head>
+<body style="background-color: pink;">
+    <h3>Stopwatch</h3>
+    <div>00:00:00:00</div>
+    <button >开始</button>
+    <button disabled>暂停</button>
+    <button disabled>继续</button>
+    <button disabled>重置</button>
+    <script>
+        // 秒表功能分析
+        // 核心思路:
+        //   定义一个变量,根据定时器,每秒执行一次,每次执行++自增操作
+        //               变量存储的数值,就会每秒+1
+        //   现在需要的记录效果,是每0.01秒,也就是10毫秒执行一次
+        //   根据累计的数值,执行进位 ms 如果达到 100,就是1秒
+        //   如果 秒 达到 60 就是 1分钟
+        //   如果 分钟 达到 60 就是 1小时
+
+
+        // 获取按钮的标签对象
+        var oBtnStart = document.querySelectorAll('button')[0];
+        var oBtnPause = document.querySelectorAll('button')[1];
+        var oBtnContinue = document.querySelectorAll('button')[2];
+        var oBtnReset = document.querySelectorAll('button')[3];
+        var hour = minutes = seconds = millisecond = 0;
+
+        // 定义存储 时 分 秒 毫秒 字符串的变量
+        // 如果直接在 millisecond seconds minutes hour 变量上进行 拼接操作,会影响 ++操作的执行
+        // 单独的建立变量,来存储累加时间的执行结果
+        var ms = '';
+        var s = '';
+        var m = '';
+        var h = '';
+
+        // 因为定时器,是定义在函数内部,
+        // 必须定义一个全局变量,来存储定时器
+        // 在函数外部可以调用,终止定时器
+        var time = 0;
+
+        // 获取div标签对象
+        var oDiv = document.querySelector('div');
+
+
+        //  开始按钮
+        oBtnStart.onclick = function(){
+            // 点击开始按钮,执行函数,执行秒表计时
+            timer();
+            oBtnStart.disabled = true;
+            oBtnPause.disabled = false;
+            oBtnContinue.disabled = true;
+            oBtnReset.disabled = true;
+        }
+        //  暂停按钮
+        oBtnPause.onclick = function(){
+            // 点击暂停按钮,清除定时器,终止秒表执行
+            clearInterval(time);
+            oBtnStart.disabled = true;
+            oBtnPause.disabled = true;
+            oBtnContinue.disabled = false;
+            oBtnReset.disabled = false;
+        }
+        //  继续按钮
+        oBtnContinue.onclick = function(){
+            // 点击继续按钮,继续执行定时器
+            timer();
+            oBtnStart.disabled = true;
+            oBtnPause.disabled = false;
+            oBtnContinue.disabled = true;
+            oBtnReset.disabled = true;
+
+        }
+        //  重置按钮
+        oBtnReset.onclick = function(){
+            // 点击重置按钮,将所有的数据,都恢复到0的状态
+            // 所有变量存储的数据都是 0 , div中的内容,也恢复到0
+            hour = minutes = seconds = millisecond = 0;
+            oDiv.innerHTML = '00:00:00:00'
+            oBtnStart.disabled = false;
+            oBtnPause.disabled = true;
+            oBtnContinue.disabled = true;
+            oBtnReset.disabled = true;
+        }
+
+        //  计时函数
+        function timer(){
+            // 赋值操作,将定时器,存储在全局作用域变量中
+            time = setInterval(function(){
+                millisecond++;
+                if( millisecond == 100){
+                    seconds++;
+                    millisecond = 0;
+                }
+                if( seconds == 60 ){
+                    minutes++;
+                    seconds = 0;
+                }
+                if( minutes == 60 ){
+                    hour++;
+                    minutes = 0;
+                }
+
+            //  补零操作
+            // 如果记录的时间小于0,要做补零操作
+                if( millisecond < 10 ){
+                    ms = '0' + millisecond; 
+                }else{
+                    ms = millisecond; 
+                }
+                if( seconds < 10 ){
+                    s = '0' + seconds; 
+                }else{
+                    s = seconds; 
+                }
+                if( minutes < 10 ){
+                    m = '0' + minutes; 
+                }else{
+                    m = minutes; 
+                }
+                if( hour < 10 ){
+                    h = '0' + hour; 
+                }else{
+                    h = hour; 
+                }
+                // 每次执行,返回一个记录时间的字符串
+                // 将这个字符串,写入到div中
+                oDiv.innerHTML = ` ${h}:${m}:${s}:${ms} `
+            },10);
+        }
+
+    </script>
+</body>
+</html>