diff --git a/README.md b/README.md
index 53e07ebf497b7be859b351115864a4627a7352e1..eaf18af94f09aabaef40d9d5d1eeaad23d1bfb8d 100644
--- a/README.md
+++ b/README.md
@@ -1,232 +1,40 @@
# 钢琴小demo
- ### 效果图如下：
- 
- 
- ### html代码
- ```angular2html
-
-
-
-
- 钢琴
-
-
-
-
-play
-
-
-
-
-
-```
- ### css代码
- ```angular2html
-*{
- margin: 0;
- padding: 0;
-}
-.piano_video{
- width: 100%;
- height: 100%;
- position: relative;
- z-index: 2;
-}
-#btn_play{
- position: absolute;
- bottom: 50px;
- right: 50px;
- z-index: 3;
- width: 80px;
- height: 80px;
- border-radius: 50%;
- color:white;
- border:2px solid white;
- text-align: center;
- line-height: 80px;
- font-size: 24px;
- cursor: pointer;
-}
-.whole{
- width: 100%;
- height: 100%;
- position: absolute;
- top: 0;
- left: 0;
- background: url("../assets/img/timg2.jpg");
- background-size: 100% 100%;
-}
-.whole>.piano_key{
- list-style: none;
- width: 512px;
- height: 244px;
- margin:100px auto 0;
-}
-.whole>.piano_key>li{
- float: left;
- width: 60px;
- height: 240px;
- border:2px solid #000000;
- background:#ffffff;
- text-align: center;
- position: relative;
-}
-.whole>.piano_key>li>img{
- position: absolute;
- top: 400px;
- left: 0;
- width: 60px;
- opacity: 0;
-}
-.whole>.piano_key>li>div{
- width:30px;
- height: 120px;
- background: black;
- position: absolute;
- top: -2px;
- right: -15px;
- z-index: 1;
-}
-.li_mousedown{
- box-shadow: yellowgreen 0px 0px 10px 3px inset;
-}
-.whole>.piano_key>li>img.current{
- top: -200px;
- transition: all 6s;
-}
-.whole>.piano_key>li>img.opcaity1{
- opacity: 1;
-}
-```
-### javascript代码
-```angular2html
-'use strict';
-$(function () {
- $("#btn_play").click(function () {
- /**
- * 点击按钮后隐藏视频和按钮本身
- * @type {jQuery.fn.init|jQuery|HTMLElement}
- * @private
- */
- var _t = $(this);
- $("video").fadeOut(1500,function () {
- }).get(0).pause();
- _t.fadeOut(1500);
- });
- $(".piano_key>li").click(function () {
- var _t = $(this);
- _t.children("audio").get(0).play();
- if(_t.children("img").hasClass("current")){
- _t.children("img").removeClass("opcaity1 current");
- setTimeout(function () {
- _t.children("img").addClass("opcaity1 current");
- },50)
- }else {
- _t.children("img").addClass("opcaity1 current");
- }
- });
- $(".piano_key>li").mousedown(function () {
- $(this).addClass("li_mousedown");
- }).mouseup(function () {
- $(this).removeClass("li_mousedown");
- });
- /**
- *
- * @param keyCode Number
- * @param isKeydown Boolean
- */
- function pianoVoice(keyCode,isKeydown){
- switch (keyCode) {
- //键盘1键
- case 49:
- //键盘2键
- case 50:
- //键盘3键
- case 51:
- //键盘4键
- case 52:
- //键盘5键
- case 53:
- //键盘6键
- case 54:
- //键盘7键
- case 55:
- //键盘8键
- case 56:
- var _li = $(".piano_key>li").eq(keyCode-49);
- if(isKeydown){
- _li.addClass("li_mousedown")
- .children("audio").get(0).play();
- if(_li.children("img").hasClass("current")){
- _li.children("img").removeClass("opcaity1 current");
- setTimeout(function () {
- _li.children("img").addClass("opcaity1 current");
- },50)
- }else {
- _li.children("img").addClass("opcaity1 current");
- }
- }else {
- _li.removeClass("li_mousedown")
- .children("audio").get(0).pause();
- _li.children("audio").get(0).load();
- }
- break;
- }
- }
- $(document).keydown(function (event) {
- pianoVoice(event.keyCode,true);
- });
- $(document).keyup(function (event) {
- pianoVoice(event.keyCode,false);
- })
-});
-```
+这是一个简单的钢琴网页应用，用户可以通过点击琴键或使用键盘来播放不同的音符。
+
+## 功能特点
+
+- 点击琴键播放对应的音符。
+- 使用键盘数字键（1-8）演奏对应的音符。
+- 点击“play”按钮可以隐藏视频背景和按钮本身。
+- 按下琴键时视觉效果变化，模拟真实按键体验。
+
+## 技术实现
+
+- **HTML**: 结构布局，包含视频背景、播放按钮和琴键。
+- **CSS**: 样式设计，包括琴键外观、动画效果等。
+- **JavaScript (jQuery)**: 实现交互逻辑，如点击事件、键盘事件处理。
+
+## 使用方法
+
+1. 打开 `index.html` 文件。
+2. 点击“play”按钮开始交互。
+3. 点击琴键或使用键盘上的数字键（1-8）来演奏音乐。
+
+## 文件结构
+
+- `index.html`: 主页面文件。
+- `css/index.css`: 样式文件。
+- `js/index.js`: 交互逻辑脚本。
+- `js/jquery-3.3.1.js`: jQuery库文件。
+- `assets/img/`: 存放图片资源。
+- `assets/mp3/`: 存放音频资源。
+
+## 注意事项
+
+- 确保所有资源文件路径正确。
+- 使用现代浏览器以获得最佳体验。
+
+## 许可证
+
+该项目遵循 MIT 许可证。详情请查看 LICENSE 文件。
\ No newline at end of file
-
-
- 
-
-
- 
-
-
- 
-
-
- 
-
-
- 
-
-
-