update更新

fc0f0c84 · Lovesick Sophia · 8d833e19 · 8d833e19 · fc0f0c84 · fc0f0c84
27 changed file
--- a/.gitignore
+++ b/.gitignore
-" " 
--- a/BOM Object-8.31.html
+++ b/BOM Object-8.31.html
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>BOM的属性方法</title>
+</head>
+<body>
+<strong>	BOM= Brower Object Model；浏览器对象模型；
+	主要的浏览器对象有：
+<ol>
+<li>Window对象</li>
+<li>History对象</li>
+<li>Screen对象</li>
+<li>Location对象</li>
+<li>Navigator对象</li>
+</ol></strong>
+</body>
+</html>
\ No newline at end of file
--- a/Datetime8.30.md.md
+++ b/Datetime8.30.md.md
+### 2021-8-31 Tuesday 7：10pm
+**每日任务**：<br>
+目标Goals：   
+
+
+ ### 方法 means:
+
+
+[ERROR对象类型&错误处理机制；](https://www.w3cschool.cn/javascript_guide/javascript_guide-xb63268n.html)
+
+备注事项：  
+1.
+
+
+
--- a/README.md
+++ b/README.md
-# myweb
+# myweb   

-#### 介绍
-自己建立的私人练习空间
+### 介绍：
+<!-- 自己建立的私人练习空间 -->
+第一次建站初体验，打算做一个多媒体网站，展示个人喜好和感兴趣的东西，作为自己的第一个网络大作业；
+### 软件架构：
+<!-- 软件架构说明 -->
+**多媒体元素：**video，autio，canvas图像；  
+**使用语言：** html5+CSS3+javascript;  
+**参考书籍：**《Web前端开发与应用教程》（高等教育规划教材）

-#### 软件架构
-软件架构说明
+### 作业展示 <!-- 安装教程 -->  

+[仓库地址](http://gitee.com/babysbreath.io/star) http://gitee.com/babysbreath.io/star
+<!-- 1.  xxxx  2.  xxxx 3.  xxxx --  -->
+[网站访问(mysinglewebsite)](https://starbabysbreath.gitee.io/star/)

-#### 安装教程
+### 使用说明

-1.  xxxx
-2.  xxxx
-3.  xxxx
-
-#### 使用说明
-
-1.  xxxx
-2.  xxxx
-3.  xxxx
+1.  index.html首页布局，简洁的html5+CSS布局，设置vip登录界面功能；
+2.  bannar 个人爱好，擅长，轮播图（4-5图）；
+3.  nav 横板，
+4.  left-side:
+5.  section：
+6.  
+     

 #### 参与贡献
-
 1.  Fork 本仓库
 2.  新建 Feat_xxx 分支
 3.  提交代码
 4.  新建 Pull Request

-
 #### 特技
-
-1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
-2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
-3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
-4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
-5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
-6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
+1.你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目  
+2. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md   
+3. Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)  
+4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目  
+5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)  
+6.  Gitee 封面人物 --会员风采展示栏目  [封面人物show](https://gitee.com/gitee-stars/)  
--- a/TIME代码easy.html
+++ b/TIME代码easy.html
+
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <title>显示时间</title>
+</head>
+<body>
+    <div id="time"></div>
+    <script>
+        function showTime() {
+            var date = new Date();
+
+            // 年月日
+            var year = date.getFullYear();
+            var month = date.getMonth() + 1;
+            var day = date.getDate();
+
+            // 时分秒
+            var hour = date.getHours();
+            var minute = date.getMinutes();
+            var second = date.getSeconds();
+
+            // 实时显示
+            var element = document.getElementById('time');
+            element.innerHTML = '<h4>' + year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
+        }
+
+        setInterval('showTime()', 1000);
+    </script>
+</body>
+</html>
--- a/css/mui-player.min.css
+++ b/css/mui-player.min.css
--- a/css/style.css
+++ b/css/style.css
+body{
+	background-color: greenyellow;
+	color:red;
+}
\ No newline at end of file
--- a/display显示动态时间.html
+++ b/display显示动态时间.html
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>在网页上显示时间</title>
+	</head>
+<body>
+	<strong>现在时间：
+	<div id="display" style="display:inline;color: #7F6FD4;">
+	</div>
+	</strong>&nbsp;&nbsp;<br>
+		<script type="text/javascript">
+		function showtime(){
+		  var time=new Date();
+		  var year=time.getFullYear();
+		  var month=time.getMonth();
+		  var day=time.getDay();
+		  var hour=time.getHours();
+		if(hour<10){
+		Hour="0"+hour;
+		}
+		var minutes=time.getMinutes();
+		if(minutes<10){
+		  minutes="0"+minutes;
+		}
+		var seconds=time.getSeconds();
+		if(seconds<10){
+		   seconds="0"+seconds; 
+		}
+	var timing=year+"年"+month+"月"+day+"日"+hour+":"+minutes+":"+seconds+"</br >";
+	var s=document.getElementById("display");
+	s.innerHTML=timing;
+	var t=window.setInterval("showtime()",1000);}
+		showtime();
+   </script>
+	<strong>代码问题总结NOTICES:</strong><br>
+1.函数getHours,getMinutes,getSeconds不能拼写错误，不能少最后的S，必须大小写无大小写上的错误；<br>
+2.代码中（所有的变量的拼写）不能有任何拼写错误的问题，必须一个字母都不能错；内置函数new Date（）————不能有任何地方拼写错误；<br>
+3.var 变量声明，首字母必须小写，document.getElementById()
+"()" 括号必须全是英文半角，且所有内置函数为“驼峰式”写法。")
+<br> 
+
+
--- a/files/LICENSE
+++ b/files/LICENSE
+Mozilla Public License Version 2.0
+==================================
+
+1. Definitions
+--------------
+
+1.1. "Contributor"
+    means each individual or legal entity that creates, contributes to
+    the creation of, or owns Covered Software.
+
+1.2. "Contributor Version"
+    means the combination of the Contributions of others (if any) used
+    by a Contributor and that particular Contributor's Contribution.
+
+1.3. "Contribution"
+    means Covered Software of a particular Contributor.
+
+1.4. "Covered Software"
+    means Source Code Form to which the initial Contributor has attached
+    the notice in Exhibit A, the Executable Form of such Source Code
+    Form, and Modifications of such Source Code Form, in each case
+    including portions thereof.
+
+1.5. "Incompatible With Secondary Licenses"
+    means
+
+    (a) that the initial Contributor has attached the notice described
+        in Exhibit B to the Covered Software; or
+
+    (b) that the Covered Software was made available under the terms of
+        version 1.1 or earlier of the License, but not also under the
+        terms of a Secondary License.
+
+1.6. "Executable Form"
+    means any form of the work other than Source Code Form.
+
+1.7. "Larger Work"
+    means a work that combines Covered Software with other material, in
+    a separate file or files, that is not Covered Software.
+
+1.8. "License"
+    means this document.
+
+1.9. "Licensable"
+    means having the right to grant, to the maximum extent possible,
+    whether at the time of the initial grant or subsequently, any and
+    all of the rights conveyed by this License.
+
+1.10. "Modifications"
+    means any of the following:
+
+    (a) any file in Source Code Form that results from an addition to,
+        deletion from, or modification of the contents of Covered
+        Software; or
+
+    (b) any new file in Source Code Form that contains any Covered
+        Software.
+
+1.11. "Patent Claims" of a Contributor
+    means any patent claim(s), including without limitation, method,
+    process, and apparatus claims, in any patent Licensable by such
+    Contributor that would be infringed, but for the grant of the
+    License, by the making, using, selling, offering for sale, having
+    made, import, or transfer of either its Contributions or its
+    Contributor Version.
+
+1.12. "Secondary License"
+    means either the GNU General Public License, Version 2.0, the GNU
+    Lesser General Public License, Version 2.1, the GNU Affero General
+    Public License, Version 3.0, or any later versions of those
+    licenses.
+
+1.13. "Source Code Form"
+    means the form of the work preferred for making modifications.
+
+1.14. "You" (or "Your")
+    means an individual or a legal entity exercising rights under this
+    License. For legal entities, "You" includes any entity that
+    controls, is controlled by, or is under common control with You. For
+    purposes of this definition, "control" means (a) the power, direct
+    or indirect, to cause the direction or management of such entity,
+    whether by contract or otherwise, or (b) ownership of more than
+    fifty percent (50%) of the outstanding shares or beneficial
+    ownership of such entity.
+
+2. License Grants and Conditions
+--------------------------------
+
+2.1. Grants
+
+Each Contributor hereby grants You a world-wide, royalty-free,
+non-exclusive license:
+
+(a) under intellectual property rights (other than patent or trademark)
+    Licensable by such Contributor to use, reproduce, make available,
+    modify, display, perform, distribute, and otherwise exploit its
+    Contributions, either on an unmodified basis, with Modifications, or
+    as part of a Larger Work; and
+
+(b) under Patent Claims of such Contributor to make, use, sell, offer
+    for sale, have made, import, and otherwise transfer either its
+    Contributions or its Contributor Version.
+
+2.2. Effective Date
+
+The licenses granted in Section 2.1 with respect to any Contribution
+become effective for each Contribution on the date the Contributor first
+distributes such Contribution.
+
+2.3. Limitations on Grant Scope
+
+The licenses granted in this Section 2 are the only rights granted under
+this License. No additional rights or licenses will be implied from the
+distribution or licensing of Covered Software under this License.
+Notwithstanding Section 2.1(b) above, no patent license is granted by a
+Contributor:
+
+(a) for any code that a Contributor has removed from Covered Software;
+    or
+
+(b) for infringements caused by: (i) Your and any other third party's
+    modifications of Covered Software, or (ii) the combination of its
+    Contributions with other software (except as part of its Contributor
+    Version); or
+
+(c) under Patent Claims infringed by Covered Software in the absence of
+    its Contributions.
+
+This License does not grant any rights in the trademarks, service marks,
+or logos of any Contributor (except as may be necessary to comply with
+the notice requirements in Section 3.4).
+
+2.4. Subsequent Licenses
+
+No Contributor makes additional grants as a result of Your choice to
+distribute the Covered Software under a subsequent version of this
+License (see Section 10.2) or under the terms of a Secondary License (if
+permitted under the terms of Section 3.3).
+
+2.5. Representation
+
+Each Contributor represents that the Contributor believes its
+Contributions are its original creation(s) or it has sufficient rights
+to grant the rights to its Contributions conveyed by this License.
+
+2.6. Fair Use
+
+This License is not intended to limit any rights You have under
+applicable copyright doctrines of fair use, fair dealing, or other
+equivalents.
+
+2.7. Conditions
+
+Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted
+in Section 2.1.
+
+3. Responsibilities
+-------------------
+
+3.1. Distribution of Source Form
+
+All distribution of Covered Software in Source Code Form, including any
+Modifications that You create or to which You contribute, must be under
+the terms of this License. You must inform recipients that the Source
+Code Form of the Covered Software is governed by the terms of this
+License, and how they can obtain a copy of this License. You may not
+attempt to alter or restrict the recipients' rights in the Source Code
+Form.
+
+3.2. Distribution of Executable Form
+
+If You distribute Covered Software in Executable Form then:
+
+(a) such Covered Software must also be made available in Source Code
+    Form, as described in Section 3.1, and You must inform recipients of
+    the Executable Form how they can obtain a copy of such Source Code
+    Form by reasonable means in a timely manner, at a charge no more
+    than the cost of distribution to the recipient; and
+
+(b) You may distribute such Executable Form under the terms of this
+    License, or sublicense it under different terms, provided that the
+    license for the Executable Form does not attempt to limit or alter
+    the recipients' rights in the Source Code Form under this License.
+
+3.3. Distribution of a Larger Work
+
+You may create and distribute a Larger Work under terms of Your choice,
+provided that You also comply with the requirements of this License for
+the Covered Software. If the Larger Work is a combination of Covered
+Software with a work governed by one or more Secondary Licenses, and the
+Covered Software is not Incompatible With Secondary Licenses, this
+License permits You to additionally distribute such Covered Software
+under the terms of such Secondary License(s), so that the recipient of
+the Larger Work may, at their option, further distribute the Covered
+Software under the terms of either this License or such Secondary
+License(s).
+
+3.4. Notices
+
+You may not remove or alter the substance of any license notices
+(including copyright notices, patent notices, disclaimers of warranty,
+or limitations of liability) contained within the Source Code Form of
+the Covered Software, except that You may alter any license notices to
+the extent required to remedy known factual inaccuracies.
+
+3.5. Application of Additional Terms
+
+You may choose to offer, and to charge a fee for, warranty, support,
+indemnity or liability obligations to one or more recipients of Covered
+Software. However, You may do so only on Your own behalf, and not on
+behalf of any Contributor. You must make it absolutely clear that any
+such warranty, support, indemnity, or liability obligation is offered by
+You alone, and You hereby agree to indemnify every Contributor for any
+liability incurred by such Contributor as a result of warranty, support,
+indemnity or liability terms You offer. You may include additional
+disclaimers of warranty and limitations of liability specific to any
+jurisdiction.
+
+4. Inability to Comply Due to Statute or Regulation
+---------------------------------------------------
+
+If it is impossible for You to comply with any of the terms of this
+License with respect to some or all of the Covered Software due to
+statute, judicial order, or regulation then You must: (a) comply with
+the terms of this License to the maximum extent possible; and (b)
+describe the limitations and the code they affect. Such description must
+be placed in a text file included with all distributions of the Covered
+Software under this License. Except to the extent prohibited by statute
+or regulation, such description must be sufficiently detailed for a
+recipient of ordinary skill to be able to understand it.
+
+5. Termination
+--------------
+
+5.1. The rights granted under this License will terminate automatically
+if You fail to comply with any of its terms. However, if You become
+compliant, then the rights granted under this License from a particular
+Contributor are reinstated (a) provisionally, unless and until such
+Contributor explicitly and finally terminates Your grants, and (b) on an
+ongoing basis, if such Contributor fails to notify You of the
+non-compliance by some reasonable means prior to 60 days after You have
+come back into compliance. Moreover, Your grants from a particular
+Contributor are reinstated on an ongoing basis if such Contributor
+notifies You of the non-compliance by some reasonable means, this is the
+first time You have received notice of non-compliance with this License
+from such Contributor, and You become compliant prior to 30 days after
+Your receipt of the notice.
+
+5.2. If You initiate litigation against any entity by asserting a patent
+infringement claim (excluding declaratory judgment actions,
+counter-claims, and cross-claims) alleging that a Contributor Version
+directly or indirectly infringes any patent, then the rights granted to
+You by any and all Contributors for the Covered Software under Section
+2.1 of this License shall terminate.
+
+5.3. In the event of termination under Sections 5.1 or 5.2 above, all
+end user license agreements (excluding distributors and resellers) which
+have been validly granted by You or Your distributors under this License
+prior to termination shall survive termination.
+
+************************************************************************
+*                                                                      *
+*  6. Disclaimer of Warranty                                           *
+*  -------------------------                                           *
+*                                                                      *
+*  Covered Software is provided under this License on an "as is"       *
+*  basis, without warranty of any kind, either expressed, implied, or  *
+*  statutory, including, without limitation, warranties that the       *
+*  Covered Software is free of defects, merchantable, fit for a        *
+*  particular purpose or non-infringing. The entire risk as to the     *
+*  quality and performance of the Covered Software is with You.        *
+*  Should any Covered Software prove defective in any respect, You     *
+*  (not any Contributor) assume the cost of any necessary servicing,   *
+*  repair, or correction. This disclaimer of warranty constitutes an   *
+*  essential part of this License. No use of any Covered Software is   *
+*  authorized under this License except under this disclaimer.         *
+*                                                                      *
+************************************************************************
+
+************************************************************************
+*                                                                      *
+*  7. Limitation of Liability                                          *
+*  --------------------------                                          *
+*                                                                      *
+*  Under no circumstances and under no legal theory, whether tort      *
+*  (including negligence), contract, or otherwise, shall any           *
+*  Contributor, or anyone who distributes Covered Software as          *
+*  permitted above, be liable to You for any direct, indirect,         *
+*  special, incidental, or consequential damages of any character      *
+*  including, without limitation, damages for lost profits, loss of    *
+*  goodwill, work stoppage, computer failure or malfunction, or any    *
+*  and all other commercial damages or losses, even if such party      *
+*  shall have been informed of the possibility of such damages. This   *
+*  limitation of liability shall not apply to liability for death or   *
+*  personal injury resulting from such party's negligence to the       *
+*  extent applicable law prohibits such limitation. Some               *
+*  jurisdictions do not allow the exclusion or limitation of           *
+*  incidental or consequential damages, so this exclusion and          *
+*  limitation may not apply to You.                                    *
+*                                                                      *
+************************************************************************
+
+8. Litigation
+-------------
+
+Any litigation relating to this License may be brought only in the
+courts of a jurisdiction where the defendant maintains its principal
+place of business and such litigation shall be governed by laws of that
+jurisdiction, without reference to its conflict-of-law provisions.
+Nothing in this Section shall prevent a party's ability to bring
+cross-claims or counter-claims.
+
+9. Miscellaneous
+----------------
+
+This License represents the complete agreement concerning the subject
+matter hereof. If any provision of this License is held to be
+unenforceable, such provision shall be reformed only to the extent
+necessary to make it enforceable. Any law or regulation which provides
+that the language of a contract shall be construed against the drafter
+shall not be used to construe this License against a Contributor.
+
+10. Versions of the License
+---------------------------
+
+10.1. New Versions
+
+Mozilla Foundation is the license steward. Except as provided in Section
+10.3, no one other than the license steward has the right to modify or
+publish new versions of this License. Each version will be given a
+distinguishing version number.
+
+10.2. Effect of New Versions
+
+You may distribute the Covered Software under the terms of the version
+of the License under which You originally received the Covered Software,
+or under the terms of any subsequent version published by the license
+steward.
+
+10.3. Modified Versions
+
+If you create software not governed by this License, and you want to
+create a new license for such software, you may create and use a
+modified version of this License if you rename the license and remove
+any references to the name of the license steward (except to note that
+such modified license differs from this License).
+
+10.4. Distributing Source Code Form that is Incompatible With Secondary
+Licenses
+
+If You choose to distribute Source Code Form that is Incompatible With
+Secondary Licenses under the terms of this version of the License, the
+notice described in Exhibit B of this License must be attached.
+
+Exhibit A - Source Code Form License Notice
+-------------------------------------------
+
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+If it is not possible or desirable to put the notice in a particular
+file, then You may include the notice in a location (such as a LICENSE
+file in a relevant directory) where a recipient would be likely to look
+for such a notice.
+
+You may add additional accurate notices of copyright ownership.
+
+Exhibit B - "Incompatible With Secondary Licenses" Notice
+---------------------------------------------------------
+
+  This Source Code Form is "Incompatible With Secondary Licenses", as
+  defined by the Mozilla Public License, v. 2.0.
--- a/files/demo_form.php
+++ b/files/demo_form.php
--- a/practise.html
+++ b/practise.html
+
 <!DOCTYPE html>
 <html lang="zh-cn">
 <head>
    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"> 
-     <link rel="icon" href="/favicon.png" />
-<title>
- easy-git
-</title>
-</head>
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
+      <link rel="icon" href="/favicon.png" />
+    <title> easy-git 简介 </title>
+	<style type="text/css">
+		#menu h1{
+			font-size: 16px;
+			
+		a:link{text-decoration: none;
+			cursor: all-scroll;
+		}
+	
+		}
+	</style>
    <!-- Spectre.css framework -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spectre.css/0.5.9/spectre.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spectre.css/0.5.9/spectre-exp.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spectre.css/0.5.9/spectre-icons.min.css">
- <!-- theme css & js -->
+    <!-- theme css & js -->
 <link rel="stylesheet" href="/css/book.css">
-<script src="/js/book.js">
+<script src="/js/book.js"></script>
    <!-- tocbot -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.css">
    <!-- katex -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.10.0/katex.min.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.10.0/katex.min.css">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/zooming/2.1.1/zooming.min.js"></script>
-<!-- <script>
+<script>
 document.addEventListener('DOMContentLoaded', function () {
    const zooming = new Zooming()
    zooming.listen('.book-content img')
-}
-</script> -->
+})
+</script>

-<meta name="generator" content="Hexo 5.3.0">
-</head>
+<meta name="generator" content="Hexo 5.3.0"></head>
 <body>

-<button src=onclick("javascript: window.location('default.html'))">下一页</button>
 <div class="book-container">
  <div class="book-sidebar">
    <div class="book-brand">
@@ -134,16 +140,11 @@ var _hmt = _hmt || [];
 })();
 </script>
 </div>
-
-
 <script src="/js/book-menu.js"></script>
-
  </div>
-
  <div class="sidebar-toggle" onclick="sidebar_toggle()" onmouseover="add_inner()" onmouseleave="remove_inner()">
  <div class="sidebar-toggle-inner"></div>
 </div>
-
 <script>
 function add_inner() {
  let inner = document.querySelector('.sidebar-toggle-inner')
@@ -185,10 +186,8 @@ function sidebar_toggle() {
    </a>
  </section>
 </header>
-
        </div>
-        <div class="book-content">
-          
+        <div class="book-content">        
 <article id="page">
  <h1></h1>
  <h1>OAuth授权认证</h1>
@@ -259,22 +258,13 @@ function sidebar_toggle() {
  <a onclick="go_top()">Back to top</a>
  <a onclick="go_bottom()">Go to bottom</a>
 </div>
-
-
 <script src="/js/book-toc.js"></script>
-
 </div>
      </div>
    </div>
  </div>
-  
  <a class="off-canvas-overlay" onclick="hide_canvas()"></a>
 </div>
-
 </body>
 </html>
-
-
 <script src="/js/book.js"></script>
-
-	
--- a/js/count.js
+++ b/js/count.js
+
+	 var sum=2;
+	 if(sum==1){
+		 console.log("hello,you are welcome!")
+	 }
+	 if(sum==2){
+		 console.log("you are right!")
+	 }
+	 else{
+		 console.log("NOT A NUMBER")
+	 }
--- a/js/dog.js
+++ b/js/dog.js
+var dog = {
+  name: "XiaoTian",
+  numLegs: 4,
+
+// dog.sayLegs();
+sayLegs：function(){
+    return "This dog has+&nbsp;"+dog.numLegs+"&nbsp;legs";}
+};
+console.log(dog.sayLegs());
--- a/js/func.js
+++ b/js/func.js
+window.startTime = Date.now();当前时间
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e=e||self).__spyHead=n()}(this,function(){"use strict";var T={conf:{},winerrors:[],errorDestroy:function(){},observerDestroy:function(){},entryMap:{},init:function(e){this.conf=e},send:function(e,n){e.type=e.type||"except";var r=this.conf;n=n||r.logServer;var o="".concat(n,"?pid=").concat(r.pid,"&lid=").concat(r.lid,"&ts=").concat(Date.now())+"&type=".concat(e.type,"&group=").concat(e.group,"&info=").concat(encodeURIComponent(JSON.stringify(e.info)));e.dim&&(o+="&dim="+encodeURIComponent(JSON.stringify(e.dim)));var t=new Image;t.src=o,t.onload=t.onerror=function(){t=null}}};function n(e){var g=e.resourceError||{},y=e.jsError||{},w=Math.random()<(y.sample?y.sample:0),h=Math.random()<(g.sample?g.sample:0),E=T.winerrors;function n(e){try{var n=e.target,r={info:{},dim:{},group:""},o=r.info,t=e.srcElement,i=navigator.connection||{};if(o.downlink=i.downlink,o.effectiveType=i.effectiveType,o.rtt=i.rtt,o.deviceMemory=navigator.deviceMemory||0,o.hardwareConcurrency=navigator.hardwareConcurrency||0,t===window){r.group=y.group;var a=e.error||{};if(o.msg=e.message,o.file=e.filename,o.ln=e.lineno,o.col=e.colno,o.stack=(a.stack||"").split("\n").slice(0,3).join("\n"),-1!==o.msg.indexOf("MODULE_TIMEOUT")){var c=o.msg.match(/^.*Hang:(.*); Miss:(.*)/);c&&c[2]&&(o.msg="MODULE_TIMEOUT for miss:"+c[2])}for(var s=[],f=0;f<T.winerrors.length;f++){var u=T.winerrors[f],d=1<u.count?"(".concat(u.count,")"):"";s.push(d+u.msg)}o.hisErrors=s.join("----");var p=!0;y.handler&&(p=y.handler(r)),!1!==p&&w&&T.send(r)}else{r.group=g.group,r.dim.type=t.tagName.toLowerCase();var m=t.src||t.href;o.msg=m||"unknown load eror",n&&"IMG"===n.tagName&&(o.xpath=function(e){for(var n=[];e&&1===e.nodeType&&e!==e.parentNode&&(n.push(e.tagName.toLowerCase()),e!==document.body);)e=e.parentNode;return{xpath:n.join("<")}}(n).xpath);var l=!0;g.handler&&(l=g.handler(r)),!1!==l&&h&&T.send(r)}if(0<E.length){var v=E[E.length-1];if(o.msg===v.msg)return void(v.count+=v.count||0)}E.push(o)}catch(e){console.error(e)}}window.addEventListener("error",n,!0),T.errorDestroy=function(){window.removeEventListener("error",n,!0),T.winerrors=null}}function r(e){var r=e.whiteScreenError||{},o=r.handler,t=r.selector,i=r.subSelector,n=r.timeout||6e3;Math.random()<(r.sample?r.sample:0)&&setTimeout(function(){var e={group:r.group,info:{msg:"",netTime:function(){if(!window.performance)return!1;var e=window.performance.timing;return"&dns=".concat(e.domainLookupEnd-e.domainLookupStart)+"&tcp=".concat(e.connectEnd-e.connectStart)+"&requestTime=".concat(e.responseStart-e.requestStart)+"&resoneTime=".concat(e.responseEnd-e.responseStart)}(),hisErrors:function(){if(!T.winerrors)return!1;for(var e=T.winerrors,n=[],r=0;r<e.length;r++){var o=(e[r].stack||"").split("\n")[0];n.push("(".concat(r,")").concat(o||e[r].msg))}return n.join(";;")}(),deviceInfo:function(){var e={},n=navigator.connection||{};return e.downlink=n.downlink,e.effectiveType=n.effectiveType,e.rtt=n.rtt,e.deviceMemory=navigator.deviceMemory||0,e.hardwareConcurrency=navigator.hardwareConcurrency||0,e}()}};if(function(){var e=document.querySelector(t);return!e||(!e.querySelector(i)||e.clientHeight<2*window.innerHeight/3)}()){e.info.msg="WhiteScren Error";var n=!0;o&&(n=o(e)),!1!==n&&e.info.msg&&T&&T.send(e)}},n)}return T.init=function(e){e.logServer||(e.logServer="https://sp1.baidu.com/5b1ZeDe5KgQFm2e88IuM_a/mwb2.gif"),n(this.conf=e),function(){if(window.PerformanceObserver){var e=new window.PerformanceObserver(function(e){for(var n=T.entryMap,r=e.getEntries(),o=0;o<r.length;o++){var t=r[o];n[t.entryType]||(n[t.entryType]=[]),n[t.entryType].push(t)}});T.observerDestroy=function(){e.disconnect()};try{e.observe({entryTypes:["longtask","layout-shift","first-input","largest-contentful-paint"]})}catch(e){}}}(),r(e)},window.__spyclientConf&&T.init(window.__spyclientConf),T});
\ No newline at end of file
--- a/js/loadxmldoc.js.js
+++ b/js/loadxmldoc.js.js
+function loadXMLDoc(dname)
+{
+    if (window.XMLHttpRequest)
+    {
+        xhttp=new XMLHttpRequest();
+    }
+    else
+    {
+        xhttp=new ActiveXObject("Microsoft.XMLHTTP");
+    }
+    xhttp.open("GET",dname,false);
+    xhttp.send();
+    return xhttp.responseXML;
+}
+// loadXMLDoc()函数代码，this函数可以存储在 HTML 页面的 <head> 部分，并从页面中的脚本调用。
+
+loadXMLDoc() 的外部 JavaScript
+为了使上述代码更容易维护，以确保在所有页面中使用相同的代码，我们把函数存储在一个外部文件中。
+
+文件名为 "loadxmldoc.js"，且在 HTML 页面中的 head 部分被加载。然后，页面中的脚本调用 loadXMLDoc() 函数。
+
+下面的实例使用 loadXMLDoc() 函数加载 books.xml：
\ No newline at end of file
--- a/js/mui-player.min.js
+++ b/js/mui-player.min.js
--- a/js/test.js
+++ b/js/test.js
+<script type="text/javascript">
+	var num=6;
+	console.log(num);//此处为控制台显示内容；
+	F12进入-->控制台
+javascript注释为：
+/*-- --*/多行注释；
+//单行注释；
+ 几种循环语句，及它们的用法：
+ do...while 
+ while...
+
+for... in ....(遍历循环，从数组或一定范围内取值遍历，默认从0开始，或者从数组的第[0]项开始)
+if... else...循环语句
+   if(条件1){true --->执行语句块，false-->继续向下执行} 
+   else if(条件2){true --->执行语句块}
+   else {若上面都为false,则执行语句块；}
+  break（条件）;
+  若break条件为TRUE则循环结束;
+  continue（条件）;
+  若continue条件为TRUE则循环停止，否则循环继续；
+  函数的调用，函数构造，内置函数调用，
+  function函数、闭包、作用域等；
+</script>
+
+<script type="text/javascript">
+	 var a=222;
+	 var b=333;
+	      console.log(a+b);
+    	do while (a==1) 
+     {
+      	console.log(" I am the king")
+      }
+</script>
\ No newline at end of file
--- a/login用户注册界面（简洁版bootstrap,jQuery）.html
+++ b/login用户注册界面（简洁版bootstrap,jQuery）.html
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+
+<head>
+    <meta charset="UTF-8" />
+    <title>login登录</title>
+    <!-- 新 Bootstrap 核心 CSS 文件 -->
+    <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
+    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js">
+    </script>
+    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
+    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js">
+    </script>
+</head>
+
+<body>
+    <form id="form1" class="well" style="width: 30em; margin: auto; margin-top: 150px;">
+        <h3>用户登录</h3>
+        <div class=" input-group input-group-md">
+            <span class="input-group-addon" id="sizing-addon1"><i
+                   class="glyphicon glyphicon-user" aria-hidden="true"></i></span> <input id="userName" type="text" class="form-control" placeholder="用户名" aria-describedby="sizing-addon1" />
+        </div>
+        <br />
+        <div class="input-group input-group-md">
+            <span class="input-group-addon" id="sizing-addon1"><i
+                   class="glyphicon glyphicon-lock"></i></span> <input type="password" id="password" class="form-control" placeholder="密码" aria-describedby="sizing-addon1" />
+        </div>
+        <br>
+        <!--     <div class="well well-sm" style="text-align: center;">
+              <input  type="radio" name="kind" value="tea" /> 管理员 <input
+                    type="radio" name="kind" value="stu" /> 学生
+          </div>
+	  -->
+        <button type="button" class="btn btn-success btn-block">登录</button>
+        <a class="btn btn-sm btn-white btn-block" style="text-align: right;" th:href="@{register}" href="register.html">
+            <h6>还没有账户？前往注册</h6>
+        </a>
+    </form>
+    <script>
+        $("#form1").on("click", ".btn", function(e) {
+            var radioValue = $('input:radio[name="kind"]:checked').val();
+            var formData = $("#form1").serialize();
+
+            $.ajax({
+                url: "/login",
+                type: "post",
+                data: {
+                    "userName": $("#userName").val(),
+                    "password": $("#password").val()
+                },
+                dataType: "json",
+                success: function(result) {
+                    if ("true" == result.flag) {
+                        window.location.href = "http://www.baidu.com";
+                    } else {
+                        alert("用户名或者密码不对");
+                    }
+                }
+            })
+        })
+    </script><br><br>
+
+    <center>login.html用户注册界面（注册完点登录）</center><br><br>
+    <center>原文链接：https://blog.csdn.net/qq_37139060/article/details/81430924
+    </center>
+</body>
+
+</html>
\ No newline at end of file
--- a/practise8-30.html
+++ b/practise8-30.html
+<!DOCTYPE html>
+<html lang="zh-cn">
+<head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.png" />
+<title> JAVASCRIPT：8.30 带电子时钟</title>
+</head><style type="text/css">
+#show{
+	color: #7F6FD4;
+	font-family: "times new roman";
+	font-weight: bold;
+	line-height: 1.25rem;
+	width: auto;
+	padding: 10px;
+	background-color: #CCCCCC;
+}
+</style>
+<body>
+	<div id="show"></div>
+	<strong style="float: right;">—————Datetime.md<!-- <object></object> --></strong>
+	<p><strong>便利贴h5-8.30</strong><br>
+		1.MD定制每日任务；<br>
+		2.课程视频挖掘未知的“领域”：腾讯课堂：《常用的特殊语句》；<br>
+		3.如何创建对象及JS常见的特殊语句，<br>
+		4.正则表达式RegExp对象；<br>
+		常见的几类ERROR对象：
+		  <a href="https://www.w3cschool.cn/javascript_guide/javascript_guide-xb63268n.html "> a. Error对象的类型<br> b. 错误处理机制；</a></p>
+	Uncaught SyntaxError: Unexpected token 
+</body>
+</html>
+<script>
+function time(){
+	var today=new Date();
+	var monthArray=new Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");
+	var dayArray=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六","星期日");
+	var Y= today.getFullYear();
+	var M= today.getMonth();
+	var D= today.getDate();
+	var W=today.getDay();
+	var h=today.getHours();
+	var m=today.getMinutes();
+	var s=today.getSeconds();// 在小于10的数字钱前加一个‘0’
+	var time="今天是:"+ "&nbsp;"+Y+"年"+monthArray[today.getMonth()]+D+"日"+"&nbsp;&nbsp;"+dayArray[today.getDay()]+"&nbsp;"+"现在时间："+h+":"+m+":"+s; 
+	show.innerHTML=time;
+	setTimeout("time()",1000);
+	}
+	time();
+</script>
\ No newline at end of file
--- a/代码小程序/clock.html
+++ b/代码小程序/clock.html
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>数字时钟</title>
+<body>
+<div id="show"></div>
+</body>
+</html>
+<script>
+function time(){
+	var today=new Date();
+	var monthArray=new Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");
+	var dayArray=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六","星期日");
+	var Y= today.getFullYear();
+	var M= today.getMonth();
+	var D= today.getDate();
+	var W=today.getDay();
+	var h=today.getHours();
+	var m=today.getMinutes();
+	var s=today.getSeconds();// 在小于10的数字钱前加一个‘0’
+	var time="今天是:"+ "&nbsp;"+Y+"年"+monthArray[today.getMonth()]+D+"日"+"&nbsp;&nbsp;"+dayArray[today.getDay()]+"&nbsp;"+h+":"+m+":"+s; 
+	show.innerHTML=time;
+	setTimeout("time()",1000);
+	}
+	time();
+</script>
+ </head>
+<!--此处为提示代码-->
+<!--
+// function checkTime(i){
+// 	if (i<10){
+// 		i="0" + i;
+// 	}
+// 	return i;}
+// 	}
+ theTime="<font size=2>当前时间:</font>"+"<font size=4 face=Arial>"+h+":"+m+":"+s+"&nbsp;&nbsp;&nbsp;"+"</font>"+"<br>";
+ //DT.innerHTML=theTime;
+ // t=setTimeout(function(){startTime()},500);
+ // //  theTime="<font size=2>今天是:</font><br><font size=4>"+year+"年"+monthArray[today.getMonth()]+date+"日"+"&nbsp;&nbsp;"+dayArray[today.getDay()]+"</font>"// setTimeout("startTime()",1000);
+// Display a clock，在网页中显示当前时间:
+// （年、月、日、星期，时、分、秒：动态电子表 ）
+//  Y/MO/D/W & H+MN+S 
+ // <body onload="startTime()"> 
+//<div id="txt" ></div> 
+ // <script language="JavaScript"> 
+ // function showTime()
+// 	{
+// 	today=new Date();
+// 	var monthArray=new Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");
+// 	var dayArray =new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六","星期日");
+// 	year=today.getYear();
+// 	date=today.getDate();
+// 	hours=today.getHours();
+// 	minutes=today.getMinutes();
+// 	seconds=today.getSeconds();
+// 	suf="AM";
+// 	if(hours>12)
+// 	{
+// 	suf="PM";
+// 	hours=hours-12;
+// 	}
+// 	if(hours==0)
+// 	hours=12;
+// 	if(minutes<=9)
+// 	minutes="0"+minutes;
+// 	if(seconds<=9)
+// 	seconds="0"+seconds; 
+theTime="<font size=2>今天是:</font><br><font size=4>"+year+"年"+monthArray[today.getMonth()]+date+"日"+"&nbsp;&nbsp;"+dayArray[today.getDay()]+</font>"+"<br><font size=4 face=Arial>"+hours+":"+minutes+":"+seconds+"&nbsp;&nbsp;&nbsp;"++"</font>";" 
+// DT.innerHTML=theTime;
+// setTimeout("showTime()",1000);
+<span id=DT style="position:absolute;left=35px;top=15px"> 
+</script> 
+-->
--- a/代码小程序/在网页中显示时钟.html
+++ b/代码小程序/在网页中显示时钟.html
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <title>在网页中动态显示当前日期和时间</title>
+</head>
+
+<body>
+    <div id="now"></div>
+</body>
+<script>
+    function showTime() {
+        var today = new Date();
+        var year = today.getFullYear();
+        var month = today.getMonth() + 1;
+        month = month < 10 ? "0" + month : month;
+        var day = today.getDate();
+        day = day < 10 ? "0" + day : day;
+        var week = "日一二三四五六".charAt(today.getDay());
+        var hour = today.getHours();
+        hour = hour < 10 ? "0" + hour : hour;
+        var minute = today.getMinutes();
+        minute = minute < 10 ? "0" + minute : minute;
+        var second = today.getSeconds();
+        second = second < 10 ? "0" + second : second;
+        var newtime = year + "-" + month + "-" + day + " 星期" + week + " 时间:" + hour + ":" + minute + ":" + second;
+        document.getElementById('now').innerHTML = newtime;
+        setInterval('showTime()', 1000);
+    }
+    showTime();
+</script>
+
+</html>
\ No newline at end of file
--- a/代码小程序/打印日期时间.html
+++ b/代码小程序/打印日期时间.html
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <title>打印时间</title>
+</head>
+
+<body>
+    <div id="show"></div>
+</body>
+
+</html>
+<script language="javascript">
+    function Getday() {
+        var today = new Date();
+        var myxingqi = today.getDay();
+        var b = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
+        var monthArray = new Array("1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12");
+        var year = today.getFullYear();
+        var month = today.getMonth();
+        if (month < 10) {
+            month = "0" + month;
+        }
+        var day = today.getDate();
+        if (day < 10) {
+            day = "0" + day;
+        }
+        var week = "日一二三四五六".charAt(today.getDay());
+        var hour = today.getHours();
+        hour = hour < 10 ? "0" + hour : hour;
+        var minute = today.getMinutes();
+        minute = minute < 10 ? "0" + minute : minute;
+        var second = today.getSeconds();
+        second = second < 10 ? "0" + second : second;
+        var time = year + "-" + monthArray[today.getMonth()] + "-" + day + " 星期" + week + " 北京时间: " + hour + ":" + minute + ":" + second;
+        document.getElementById("show").innerHTML = time;
+        setInterval('Getday()', 1000);
+    }
+    Getday(); //第一个时钟
+</script>
\ No newline at end of file
--- a/代码小程序/时钟.html
+++ b/代码小程序/时钟.html
+<HTML>
+<HEAD>
+<TITLE>时间日期篇--当前时间</TITLE>
+</HEAD>
+
+<BODY bgcolor="#fef4d2" onLoad=showTheCurrentTime() background="../images/background5.jpg">
+<br>
+<br>
+<center>
+<font color="ffaafa"><h2>时间日期篇--当前时间</h2></font>
+<hr width=300>
+<br><br>
+
+<!-- 案例代码1开始 -->
+
+<script LANGUAGE="JavaScript">
+
+function showMilitaryTime() {
+if (document.form.showMilitary[0].checked) {
+return true;
+}
+return false;
+}
+function showTheHours(theHour) {
+if (showMilitaryTime() || (theHour > 0 && theHour < 13)) {
+return (theHour);
+}
+if (theHour == 0) {
+return (12);
+}
+return (theHour-12);
+}
+function showZeroFilled(inValue) {
+if (inValue > 9) {
+return "" + inValue;
+}
+return "0" + inValue;
+}
+function showAmPm() {
+if (showMilitaryTime()) {
+return ("");
+}
+if (now.getHours() < 12) {
+return (" am");
+}
+return (" pm");
+}
+function showTheCurrentTime() {
+now = new Date
+document.form.showTime.value = showTheHours(now.getHours()) + ":" + showZeroFilled(now.getMinutes()) + ":" + showZeroFilled(now.getSeconds()) + showAmPm()
+setTimeout("showTheCurrentTime()",1000)
+}
+</script>
+<!-- 案例代码1结束 -->
+<!-- 案例代码2开始 -->
+
+<form name="form">
+      <div align="center">
+	  <center>
+        <p> <font color="#FFFFFF">
+          <!-- [Step1]: 这里可以改变显示列的长度 -->
+          <input type="text" name="showTime" size="11">
+          </font></p>
+      </center></div><div align="center"><center><p><input type="radio" name="showMilitary"
+      checked>
+          <font color="#FFFFFF">24 Hour Time<br>
+          <input type="radio" name="showMilitary">
+          12 Hour Time<br>
+          </font> </p>
+      </center></div>
+</form>
+
+<!--案例代码2结束 -->
+
+</center></BODY>
+
+</HTML>
+
--- a/代码小程序/获取日期&时间.html
+++ b/代码小程序/获取日期&时间.html
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>获取系统时间并显示</title>
+		<script>
+		    // 当页面加载时调用
+			window.onload = function() {
+			           //计时器 1000秒
+						setInterval(function() {
+			var date = new Date();
+			var year = date.getFullYear(); //获取当前年份   
+			var mon = date.getMonth() + 1; //获取当前月份   
+			var da = date.getDate(); //获取当前日   
+			var day = date.getDay(); //获取当前星期几   
+			var h = date.getHours(); //获取小时   
+			var m = date.getMinutes(); //获取分钟   
+			var s = date.getSeconds(); //获取秒   
+			var d = document.getElementById('show');
+		
+		                   //判断当数字小于等于9时 显示 01 02 ----- 08 09
+							if (mon >= 1 && mon <= 9) {
+								mon = "0" + mon;
+							}
+							if (da >= 0 && da <= 9) {
+								da = "0" + da;
+							}
+							if (h >= 0 && h <= 9) {
+								h = "0" + h;
+							}
+		
+							if (m >= 0 && m <= 9) {
+								m = "0" + m;
+							}
+		
+							if (s >= 0 && s <= 9) {
+								s = "0" + s;
+							}
+		
+							d.innerHTML = year + '-' + mon + '-' + da + ' ' + h + ':' + m + ':' + s;
+		
+						}, 1000)
+					}
+		</script>
+	</head>
+	<body>
+		<div id="show"></div>
+	</body>
+</html>
--- a/电子书.html
+++ b/电子书.html
--- a/练习JS代码&页面布局.html
+++ b/练习JS代码&页面布局.html
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>练习整体布局</title>
+		<style rel="stylesheet" type="text/css">
+		*{
+			padding: 0px;
+			margin: 0px;
+		}
+		nav{
+			width:auto;
+			background:indianred;
+			height:150px;
+		}
+		nav ul{
+			line-height:25px;
+			background-color:whitesmoke;
+			
+		}
+		nav li{
+			list-style-type: none;
+			display: inline-block;
+           /*  border:2px #7F6FD4 solid; */
+			 padding:5px;
+			 width:60px;
+			 text-align: center;
+			/* background-color: #66FF66; */
+		}
+	    .banner #login{
+			display: inline;
+			float: right;
+			padding: 10px;
+			margin-right:15px;
+
+		}
+		.maincontent{
+			display:block;
+			height:1000px;
+			width: auto;
+			background-color: #FCB1D7;
+			padding:10px;
+			
+		}
+		.aside{
+	   position:fixed;
+	   top:35px;
+	   right:0px;
+		/* position:absolute;
+		right:10px;
+		top:160px; */
+		width:200px;
+		height:1000px;
+		background-color: #7F6FD4;
+		}
+		#demo4{
+			font-size: 18PX;
+			font-weight:bolder;
+			color:orangered;
+			
+		}
+		</style>
+	</head><!-- logo点击跳往首页 -->
+	<body>
+		<header>
+			<!-- 这是页眉 -->
+		</header>
+		<nav>
+			<!-- 这是导航栏 -->
+<div class="banner">
+      <ul>
+	<li><a href="">主页</a></li>
+	<li><a href="">新闻</a></li>
+	<li><a href="">布局</a></li>
+	<li><a href="">音乐</a></li>
+	<li><a href="">动画</a></li>
+        <div id="login">
+			<span style="text-align:right;font-size: 16px;"><a href="">注册/登录</span>
+			</a>
+			</div>
+		</ul>
+		</div>
+    </nav>
+		<article>
+			<div class="maincontent">
+				<strong><p>创建 JavaScript 对象。</p></strong>
+				<p id="dem"></p>
+				<p id="dem1"></p>
+				<p>
+				有两种方式可以访问对象属性：
+				你可以使用 .property 或 ["property"].
+				</p>
+				<script>
+				var person = {
+				    firstName : "John",
+				    lastName : "Doe", 
+					age:50, 
+					eyeColor:"blue",
+				    id : 5566,
+				};
+				 document.getElementById("dem").innerHTML =
+					person.firstName + " " + person.lastName;//返回给不同的p中的内容,本句返回给dem;
+		         document.getElementById("dem1").innerHTML = 
+						" 现在 " + person.age + " 岁.";//这句返回给dem1;
+				</script>
+				
+				<p>对象方法作为一个函数定义存储在对象属性中。</p>
+				<p id="dem2"></p>
+				<script>
+				var person = {
+				    firstName: "John",
+				    lastName : "Doe",
+				    id : 5566,
+				    fullName : function() 
+					{
+				       return this.firstName + " " + this.lastName;
+				    }
+				};
+				document.getElementById("dem2").innerHTML = person.fullName();
+				</script>
+				<p><strong>创建和使用对象方法。</strong>对象方法是一个函数定义,并作为一个属性值存储。</p>
+				<strong>定义对象函数</strong>
+				<blockquote>
+				var person = {
+				    firstName: "John",
+				    lastName : "Doe",
+				    id : 5566,<br>
+				    fullName : function() 
+					{
+				       return this.firstName + " " + this.lastName;
+				    }
+				};</blockquote>
+				<p id="dem3"></p>
+				<p id="dem4"></p>
+				<script>
+				var person = {
+				    firstName: "John",
+				    lastName : "Doe",
+				    id : 5566,
+				    fullName : function() 
+					{
+				       return this.firstName + " " + this.lastName;
+				    }
+				};
+				document.getElementById("dem3").innerHTML = "不加括号输出函数表达式(调用的是函数本身)："  + person.fullName;
+				document.getElementById("dem4").innerHTML = "加括号输出函数执行结果（调用的是函数内的值）："  +  person.fullName();
+				</script>
+	         <strong>JavaScript 函数</strong>
+	         函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
+				
+			<h3>变量声明的一些小知识：</h3>
+			<p>JavaScript 全局变量<br>
+			使用 var 关键字声明的全局作用域变量属于 window 对象。</p>
+			<p id="demo"></p>
+			<script>
+			var carName = "Volvo";
+			// 可以使用 window.carName 访问变量
+			document.getElementById("demo").innerHTML = "I can display " + window.carName;
+			</script>
+			<p>实例:let calName = "Volvo";<br>
+			// 不能使用 window.calName 访问变量 <br></p>
+			<p>使用 let 关键字声明的全局作用域变量不属于 window 对象:</p>		
+			<p id="demo1"></p>
+			<script>
+			let calName = "Volvo";
+			// 不能使用 window.carName 访问变量
+			document.getElementById("demo1").innerHTML = "I can not display " + window.calName;
+			</script>	
+			
+        <script>
+		function myFunction1() {
+		  var x = document.getElementById("myDFN");
+		  x.style.color = "red";
+		}
+		</script>
+		<h3>如何访问 DFN 元素的演示</h3>
+		<dfn id="myDFN">Definition term</dfn>	
+		<p>单击按钮将定义项的颜色设置为红色。</p>
+		<button onclick="myFunction1()">试一试</button>
+		
+		<p>假设 y=5，计算 x=y+2，并显示结果。</p>
+		<button onclick="myFunction()">点击这里</button>
+		<p id="demo"></p>
+		<script>
+		function myFunction(){
+			var y=5;
+			var x=y+2;
+			var demoP=document.getElementById("demo");
+			demoP.innerHTML="x=" + x;
+		}
+		</script>
+		
+		<script> 
+		    function myfunction(){
+		         document.getElementById("demo5").innerHTML="onclick事件触发";
+		        }</script>
+		    <h1 id="demo5">一个段落</h1>
+		    <button onclick="myfunction()" type="button">点击这里</button>
+		
+		<h4>JavaScript const的使用 </h4>	
+		<p>我们不能对常量数组重新赋值：</p>	
+		<p id="demo2"></p>
+		<script>
+		try {
+		    const cars = ["Saab", "Volvo", "BMW"];
+		    cars = ["Toyota", "Volvo", "Audi"];
+		}
+		catch (err) {
+		    document.getElementById("demo2").innerHTML = err;}
+		</script>
+		<h4>JavaScript const使用2 </h4>
+		<p>以下实例修改常量数组: 可以修改或添加常量数组中的元素</p>
+		<p id="demo3"></p>
+		<script>
+		// 创建常量数组
+		const cars = ["Saab", "Volvo", "BMW"];
+		// 修改元素
+		cars[0] = "Toyota";		 
+		// 添加元素
+		cars.push("Audi");
+		// 显示数组
+		document.getElementById("demo3").innerHTML = cars; 
+		</script>
+		<h3>JavaScript <b>this</b> 关键字</h3>
+		<p>实例中，<b>this</b> 指向了 <b>person</b> 对象。</p>
+		<p>因为 person 对象是 fullName 方法的所有者。</p>	
+		<p id="demo4"></p>
+		<script>
+		// 创建一个对象
+		var person = {
+		  firstName: "John",
+		  lastName : "Doe",
+		  id     : 5566,
+		  fullName : function() {
+		    return this.firstName + " " + this.lastName;
+		  }
+		};
+		// 显示对象的数据
+		document.getElementById("demo4").innerHTML = person.fullName();
+		</script>
+		 <p>实例中 <strong>this</strong> 指向了 person2，即便它是 person1 的方法:</p> 
+		 <p style="" id="demo4"></p>
+		 <script>
+		 var person1 = {
+		   fullName: function() {
+		     return this.firstName + " " + this.lastName;
+		   }
+		 }
+		 var person2 = {
+		   firstName:"FAN",
+		   lastName: "STAR",
+		 }
+		 var x = person1.fullName.call(person2); 
+		 document.getElementById("demo4").innerHTML = x; 
+		 </script>
+           <strong>
+		 </strong>
+			<section > 	
+			<script>
+			function myfunction(){
+			document.write("使用函数来执行doucment.write，即在文档加载后再执行这个操作，会实现文档覆盖");
+			}
+			document.write("<h1>这是一个标题</h1>");
+			document.write("<p>这是一个段落。</p>");
+			</script>
+			<p >
+			您只能在 HTML 输出流中使用 <strong>document.write</strong>。
+			如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
+			</p>
+			<button type="button" onclick="myfunction()">点击这里</button>
+
+			</section>
+		<!-- <script>
+		window.alert("hello,world")
+		</script>
+		单独使用 this
+单独使用 this，则它指向全局(Global)对象。
+
+在浏览器中，window 就是该全局对象为 [object Window]:
+
+实例
+var x = this;
+
+尝试一下 »
+严格模式下，如果单独使用，this 也是指向全局(Global)对象。
+
+实例
+"use strict";
+var x = this;
+
+尝试一下 »
+函数中使用 this（默认）
+在函数中，函数的所属者默认绑定到 this 上。
+
+在浏览器中，window 就是该全局对象为 [object Window]:
+
+实例
+function myFunction() {
+  return this;
+}
+
+尝试一下 »
+函数中使用 this（严格模式）
+严格模式下函数是没有绑定到 this 上，这时候 this 是 undefined。
+
+实例
+"use strict";
+function myFunction() {
+  return this;
+}
+
+尝试一下 »
+事件中的 this
+在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素：
+
+实例
+<button onclick="this.style.display='none'">
+点我后我就消失了
+</button>
+
+尝试一下 »
+对象方法中绑定
+下面实例中，this 是 person 对象，person 对象是函数的所有者：
+
+实例
+var person = {
+  firstName  : "John",
+  lastName   : "Doe",
+  id         : 5566,
+  myFunction : function() {
+    return this;
+  }
+};
+
+尝试一下 »
+实例
+var person = {
+  firstName: "John",
+  lastName : "Doe",
+  id       : 5566,
+  fullName : function() {
+    return this.firstName + " " + this.lastName;
+  }
+};
+
+尝试一下 »
+说明: this.firstName 表示 this (person) 对象的 firstName 属性。
+
+显式函数绑定
+在 JavaScript 中函数也是对象，对象则有方法，apply 和 call 就是函数对象的方法。这两个方法异常强大，他们允许切换函数执行的上下文环境（context），即 this 绑定的对象。
+
+在下面实例中，当我们使用 person2 作为参数来调用 person1.fullName 方法时, this 将指向 person2, 即便它是 person1 的方法：
+
+实例
+var person1 = {
+  fullName: function() {
+    return this.firstName + " " + this.lastName;
+  }
+}
+var person2 = {
+  firstName:"John",
+  lastName: "Doe",
+}
+person1.fullName.call(person2);  // 返回 "John Doe"
+
+尝试一下 »
+		 -->
+<strong></strong>
+			</div>
+			<!-- 这里是表单使用的练习-->
+			<div class="aside">
+	  <h3>表单代码操作练习：</h3>	
+        <aside>   
+		姓名：<input type="text" name="name" id="" value="" />
+		</aside>
+		<script>
+		function validateForm() {
+		    var x = document.forms["myForm"]["fname"].value;
+		    if (x == null || x == "") {
+		        alert("需要输入名字。");
+		        return false;
+		    }
+		}
+		</script>
+		<form name="myForm" action="demo_form.php"
+		onsubmit="return validateForm()" method="post">
+		名字: <input type="text" name="fname">
+		<input type="submit" value="提交">
+		</form>
+		<p>点击提交按钮，如果输入框是空的，浏览器会提示错误信息。</p>	
+		<strong>简单的javascript表单验证：</strong><!-- JavaScript 验证输入： -->
+		<script>
+		    function putFunction() {
+		    var x, text;		
+		    // 获取 id="numb" 的值
+		    x = document.getElementById("numb").value;
+		    // 如果输入的值 x 不是数字或者小于 1 或者大于 10，
+			// 则提示错误 Not a Number or less than one or greater than 10
+		    if (isNaN(x) || x < 1 || x > 10) {
+		        text = "输入错误";
+		    } else {
+		        text = "输入正确";
+		    }
+		    document.getElementById("PUT").innerHTML = text;
+		}
+	    	</script>
+				<p>请输入 1 到 10 之间的数字：</p>
+				<input col="10" id="numb"> <button type="button" onclick="putFunction()">提交</button>	
+				<p id="PUT"></p>	
+			<!-- 	如果表单字段 (fname) 的值为空, required 属性会阻止表单提交！
+				<form action="demo_form.php" method="post">
+				  <input type="text" name="fname" required="required">
+				  <input type="submit" value="提交">
+				</form> -->
+		<strong>输入数字并点击验证按钮:</strong>
+		<input id="id1" type="number" min="100" max="300" required>
+		<button onclick="myFunction()">验证</button>
+		<p>如果输入的数字小于 100 或大于300，会提示错误信息。</p>
+		<p id="demo9"></p>
+		<!-- 这是写法1： -->
+		<script>
+		function myFunction() {
+		    var inpObj = document.getElementById("id1");
+		    if (
+			inpObj.checkValidity() == false) {
+		        document.getElementById("demo9").innerHTML = inpObj.validationMessage;
+		    } 
+			else {
+		        document.getElementById("demo9").innerHTML = "输入正确";
+		    }
+		}
+		</script>
+		<!-- 写法1：
+		要求：请输入小于100的值：先设置rangeOverflow 属性的最大值 max=100;
+  <input id="id1" type="number" max="100">
+  <button onclick="myFunction()">验证</button>
+   <p id="demo"></p>
+   <script>
+function myFunction() {
+    var txt = "";
+    if (document.getElementById("id1").validity.rangeOverflow) {
+       txt = "输入的值太大了";
+    }
+    document.getElementById("demo").innerHTML = txt;
+}
+
+</script>	
+这是写法2：
+   HTMLSelectElement.checkValidity() 会检查元素是否有任何输入约束条件，并且检查值是否符合约束条件。 如果值是不符合约束条件的，浏览器就会在该元素上触发一个可以撤销的 invalid 事件。初步理解为。该函数里面有两个值，默认判断值为 ture，可以修改为 flash。如有不对，希望指正。
+
+以下是我测试的代码：
+function myFunction() {
+  var x = document.getElementById("nu");
+  x.setCustomValidity("");//使用前先取消自定义，否则下次点击checkValidity总返false
+  if (x.checkValidity() == false) {
+    x.setCustomValidity("错误");
+    document.getElementById("demo").innerHTML = x.validationMessage;
+  }
+  else {
+    x.setCustomValidity("正确");
+    document.getElementById("demo").innerHTML = x.validationMessage;
+  }
+}
+
+		  这是写法3：
+		setCustomValidity 的用法：
+		var inpObj = document.getElementById("id1");
+		inpObj.setCustomValidity(''); // 取消自定义提示的方式
+		if (inpObj.checkValidity() == false) {
+		    if(inpObj.value==""){
+		        inpObj.setCustomValidity("不能为空！");
+		    }else if(inpObj.value<100 || inpObj.value>300){
+		        inpObj.setCustomValidity("请重新输入数值（100~300之间）!");
+		    }
+		    document.getElementById("demo").innerHTML = inpObj.validationMessage;
+		} else {
+		    document.getElementById("demo").innerHTML = "输入正确";
+		}
+ -->
+		</div>
+
+		</article>
+		<footer></footer>
+	</body>
+</html>
--- a/练习三色布局default.html
+++ b/练习三色布局default.html
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>练习： 布局</title>
+	</head>
+<style type="text/css">
+    .flexcontainer{
+        width:100%;
+        height:100%;
+        position: absolute;
+        left:0px;
+        top:0px;
+        display: flex;
+        flex-direction: column;
+    }
+    .flexbanner{
+		/* 布局中，用于做banner(header)部分 */
+        width: 100%;
+        height: 8rem;
+        float: left;
+        background: #f00;
+		background-image: url();
+     
+    }
+    .flexContent {
+        width: 100%;
+        height:12rem;
+        flex:1;
+        float: left;
+        background: #000;
+		color:white;
+    }
+   .flexfooter {
+        width: 100%;
+        height: 6rem;
+        float: left;
+        background: #ccc;
+    }    
+</style>
+<body>本文主要介绍了详解css3 flex弹性盒自动铺满写法，分享给大家，具体如下：
+<div class="flexcontainer">
+    <div class="flexbanner">这是主题</div> 
+    <div class="flexContent">这是正文</div>
+    <div class="flexfooter">这是备注</div>
+</div>
+	</body>
+</html>