javascript记事本
时间: 2023-10-09 07:08:48 浏览: 47
这是一个用JavaScript操作本地存储制作的记事本。它的功能包括添加、编辑、删除待办事项,并可以将事项标记为已完成。具体步骤如下:
1. 页面布局:通过HTML布局页面,使用CSS对页面进行美化。
2. 编写JavaScript文件:实现页面的交互功能。
2.1 输入框的鼠标弹起事件:监听输入框的鼠标弹起事件,获取输入框的内容。
2.2 获取本地存储数据与保存本地存储的数据:使用本地存储API,获取保存在本地的数据,并将新的数据保存到本地存储中。
2.3 渲染页面:根据从本地存储中获取的数据,动态生成待办事项列表和已完成事项列表。
2.4 点击复选框判断事件的完成状况:点击复选框,判断该事件是已完成还是未完成,并更新本地存储的数据。
2.5 点击小圆圈删除事件:点击小圆圈,删除对应的待办事项,并更新本地存储的数据。
2.6 双击任务名并修改:双击待办事项的任务名,将其变为可编辑状态,修改任务名后按回车键保存,并更新本地存储的数据。
记事本是用JavaScript操作本地存储实现的,它具有以下优势:
1. 不需要连接数据库,即使刷新页面,数据也不会丢失。
2. 可以实现多页面共享数据。
相关问题
JavaScript 怎么写
你可以使用文本编辑器(如:记事本、Sublime Text、VS Code等)新建一个 .html 文件,然后在文件中使用 `<script>` 标签引入 JavaScript 代码,例如:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript 示例</title>
</head>
<body>
<h1>Hello, World!</h1>
<script>
// 在这里编写 JavaScript 代码
console.log('你好,JavaScript!');
</script>
</body>
</html>
```
这段代码会在页面中输出一个标题和一条信息,同时在控制台中输出一条信息。
你可以在 `<script>` 标签中编写 JavaScript 代码,然后保存文件并在浏览器中打开该文件,就可以运行 JavaScript 代码了。
使用vuex实现记事本
使用vuex实现记事本可以实现数据的集中管理和状态的共享。下面是一个使用vuex实现记事本的示例:
1. 首先,在项目中安装vuex:
```shell
npm install vuex --save
```
2. 创建一个store.js文件,用于定义vuex的状态和操作:
```javascript
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
events: [] // 记事本事件列表
},
mutations: {
addEvent(state, event) {
state.events.push(event)
},
toggleEventStatus(state, index) {
state.events[index].completed = !state.events[index].completed
}
},
actions: {
addEvent({ commit }, event) {
commit('addEvent', event)
},
toggleEventStatus({ commit }, index) {
commit('toggleEventStatus', index)
}
},
getters: {
completedEvents: state => {
return state.events.filter(event => event.completed)
},
uncompletedEvents: state => {
return state.events.filter(event => !event.completed)
}
}
})
export default store
```
3. 在main.js中引入store.js,并将store注入到Vue实例中:
```javascript
import Vue from 'vue'
import App from './App.vue'
import store from './store'
new Vue({
store,
render: h => h(App)
}).$mount('#app')
```
4. 在组件中使用vuex的状态和操作:
```vue
<template>
<div>
<input v-model="newEvent" @keyup.enter="addEvent">
<ul>
<li v-for="(event, index) in uncompletedEvents" :key="index">
<input type="checkbox" v-model="event.completed" @change="toggleEventStatus(index)">
<span :class="{ completed: event.completed }">{{ event.title }}</span>
</li>
</ul>
<h2>已完成事件:</h2>
<ul>
<li v-for="(event, index) in completedEvents" :key="index">
<input type="checkbox" v-model="event.completed" @change="toggleEventStatus(index)">
<span :class="{ completed: event.completed }">{{ event.title }}</span>
</li>
</ul>
</div>
</template>
<script>
import { mapState, mapActions, mapGetters } from 'vuex'
export default {
computed: {
...mapState(['events']),
...mapGetters(['completedEvents', 'uncompletedEvents']),
},
data() {
return {
newEvent: ''
}
},
methods: {
...mapActions(['addEvent', 'toggleEventStatus'])
}
}
</script>
<style>
.completed {
text-decoration: line-through;
}
</style>
```
通过以上步骤,你就可以使用vuex实现一个简单的记事本功能了。你可以在输入框中输入事件,按回车键添加事件,勾选复选框切换事件状态。已完成的事件会显示在已完成列表中,未完成的事件会显示在未完成列表中。