diff --git a/docs/css/common.css b/docs/css/common.css
index 4ac79ebc8..69a840b94 100644
--- a/docs/css/common.css
+++ b/docs/css/common.css
@@ -1,13 +1,24 @@
 .container {
-  width: 900px;
+  width: 800px;
   margin: 0 auto;
   padding: 20px;
 }
 
 .artplayer-app {
-  width: 400px;
-  height: 300px;
-  margin: 0 auto;
+  width: 100%;
+  height: 450px;
+  margin: 0 auto 20px;
+  background: #000;
+}
+
+.error-tip {
+  font-size: 13px;
+  padding: 5px 10px;
+  margin-bottom: 20px;
+  color: red;
+  background: rgba(255, 0, 0, 0.1);
+  border: 1px solid red;
+  border-radius: 3px;
 }
 
 .CodeMirror {
@@ -18,14 +29,4 @@
 .CodeMirror pre {
   padding-left: 7px;
   line-height: 1.25;
-}
-
-.control {
-    margin-bottom: 20px;
-}
-
-.control .header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
 }
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index 97dbc16ce..3e672de3e 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -19,13 +19,10 @@
     <div class="container">
         <div class="artplayer-app"></div>
         <div class="error-tip"></div>
-        <div class="control-list">
-            <div class="control">
-                <div class="header">
-                    <div class="title">简单用法</div>
-                    <div class="run">运行</div>
-                </div>
-                <div class="code"></div>
+        <div class="control">
+            <div class="code"></div>
+            <div class="bottom">
+                <input class="run" type="button" value="执行代码">
             </div>
         </div>
     </div>
diff --git a/docs/js/index.js b/docs/js/index.js
index 15b933891..b5a8e4e8e 100644
--- a/docs/js/index.js
+++ b/docs/js/index.js
@@ -17,29 +17,26 @@ function initApp(app) {
     });
 }
 
-function timeTaken(callback) {
-    console.time('timeTaken');
-    const r = callback();
-    console.timeEnd('timeTaken');
-    return r;
-}
-
-var $error = document.querySelector('.error-tip');
-document.querySelector('.run').addEventListener('click', function (e) {
+function runApp() {
     try {
         Artplayer.instances.forEach(ins => {
             ins.destroy(true)
         });;
-        timeTaken(function () {
-            eval(mirror.getValue());
-        });
+        eval(mirror.getValue());
         initApp(Artplayer.instances[0]);
+        $error.style.display = 'none';
         $error.innerHTML = '';
     } catch (error) {
         var msg = error.message.trim();
+        $error.style.display = 'block';
         $error.innerHTML = '请打开控制台：' + msg;
         console.error(msg);
     }
+}
+
+var $error = document.querySelector('.error-tip');
+document.querySelector('.run').addEventListener('click', function (e) {
+    runApp();
 });
 
 creatCodeMirror(`
@@ -47,4 +44,6 @@ new Artplayer({
     container: '.artplayer-app',
     url: 'https://blog.zhw-island.com/assets-cdn/video/one-more-time-one-more-chance-480p.mp4'
 });
-`);
\ No newline at end of file
+`);
+
+runApp();
\ No newline at end of file