Kezdőlap Felfedezés Súgó
Bejelentkezés
lovecoding
/
W260426
8
0
Másolás 0
Fájlok Problémák 0 Beolvasztási kérések 0 Wiki
Forráskód Böngészése

admin

fengchuanyu 6 napja
szülő
2f6f1c4d00
commit
82a587bb4c
5 módosított fájl, 128 hozzáadás és 5 törlés
Osztott Nézet Diff Statisztika Mutatása
  1. 7 4
      4_BOM&DOM/19_js动画.html
  2. 1 1
      6_HTML5/1_新增input.html
  3. 40 0
      6_HTML5/5_cookie.html
  4. 54 0
      6_HTML5/练习题1_画布.html
  5. 26 0
      6_HTML5/练习题2_cookie.html

+ 7 - 4
4_BOM&DOM/19_js动画.html
Fájl Megtekintése 

@@ -1,17 +1,19 @@
 
 <!DOCTYPE html>
 
 <html lang="en">
 
+
 
 <head>
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <title>Document</title>
 
     <style>
 
-        .box{
 
+        .box {
 
             width: 200px;
 
             height: 200px;
 
             background-color: red;
 
         }
 
     </style>
 
 </head>
 
+
 
 <body>
 
     <div class="box"></div>
 
     <button>点击动画</button>
 
@@ -20,15 +22,16 @@
 
         var box = document.querySelector(".box");
 
         var btn = document.querySelector("button");
 
         // 绑定事件
 
-        btn.onclick = function(){
 
-            setInterval(function(){
 
+        btn.onclick = function () {
 
+            setInterval(function () {
 
                 // 获取元素宽度
 
                 var docWidth = box.offsetWidth;
 
                 console.log(docWidth);
 
                 box.style.width = (docWidth + 10) + "px";
 
-            },16)
 
+            }, 16)
 
             // box.style.width = "400px";
 
         }
 
     </script>
 
 </body>
 
+
 
 </html>

+ 1 - 1
6_HTML5/1_新增input.html
Fájl Megtekintése 

@@ -23,7 +23,7 @@
 
      <!-- email输入框  验证邮箱格式 -->
 
      <!-- <input type="email"> -->
 
 
-     <!-- from 表单提交 -->
 
+     <!-- from 表单提交 action属性是提交数据的地址 -->
 
      <form action="xxx.com">
 
         <input type="text" name="username" placeholder="请输入用户名">
 
         <input type="email" name="email" placeholder="请输入邮箱">

+ 40 - 0
6_HTML5/5_cookie.html
Fájl Megtekintése 

@@ -0,0 +1,40 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <script>
 
+        // cookie
 
+        // cookie用于存储用户信息
 
+        // 存储空间：4KB
 
+        // cookie 不适用于存储大量信息 用于存储用户信息，例如用户名、密码等
 
+
 
+        // 设置cookie document.cookie
 
+        // 设置cookie时，需要指定cookie的名称和值 key=value(键值对)
 
+        // 语法：document.cookie = "name=value; ";
 
+        // 每次只能设置一个cookie
 
+        // document.cookie = "username=张三";
 
+        // document.cookie = "password=123";
 
+        // cookie可以设置过期时间 expires 他是一个时间戳字符串
 
+        // 语法：document.cookie = "name=value; expires=expire;";
 
+        
+        // 设置为明日过期
 
+        var date = new Date();
 
+        var nowDate = date.getDate();
 
+        // 修改日期为明日
 
+        date.setDate(nowDate+1);
 
+        // 将日期转换为字符串 
+        var dateStr = date.toUTCString()
 
+        document.cookie = "username=张三; expires="+dateStr;
 
+         document.cookie = "password=123; expires="+dateStr;
 
+
 
+
 
+        // 获取cookie document.cookie 会返回所有当前页面的cookie
 
+        console.log(document.cookie);
 
+        
+    </script>
 
+</body>
 
+</html>

+ 54 - 0
6_HTML5/练习题1_画布.html
Fájl Megtekintése 

@@ -0,0 +1,54 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        #canvas {
 
+            /* 背景颜色 */
 
+            background-color: black;
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <!-- 画布元素 -->
 
+    <canvas id="canvas" width="500" height="500"></canvas>
 
+    <script>
 
+        // 获取元素
 
+        var canvas = document.querySelector("#canvas");
 
+        // 获取上下文
 
+        var ctx = canvas.getContext("2d");
 
+        // 设置线的颜色
 
+        ctx.strokeStyle = "white";
 
+        // 设置线的宽度
 
+        ctx.lineWidth = 2;
 
+        // 为画布绑定鼠标按下事件
 
+        canvas.onmousedown = function (event) {
 
+            // 开始绘制 beginPath
 
+            ctx.beginPath();
 
+            // moveTo 移动到指定位置（落笔点）
 
+            ctx.moveTo(event.clientX, event.clientY);
 
+            // 绑定鼠标移动事件
 
+            canvas.onmousemove = function (e) {
 
+                // lineTo 绘制一条线到指定位置
 
+                ctx.lineTo(e.clientX, e.clientY);
 
+                // stroke 绘制线
 
+                ctx.stroke();
 
+            }
 
+        }
 
+
 
+
 
+
 
+        // 为画布绑定鼠标松开事件
 
+        canvas.onmouseup = function () {
 
+            // 绘制完成，清除鼠标移动事件
 
+            canvas.onmousemove = null;
 
+        }
 
+
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 26 - 0
6_HTML5/练习题2_cookie.html
Fájl Megtekintése 

@@ -0,0 +1,26 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <script>
 
+        // 设置cookie
 
+        // 语法：setCookie(name,value,expire); 第一个key值 第二个value 第三个过期时间(日期天数)
 
+        setCookie("username","张三",1)
 
+
 
+        // 获取cookie
 
+        // 语法：getCookie(name); 第一个key值
 
+        var username = getCookie("username");
 
+        console.log(username);
 
+
 
+        // 删除cookie
 
+        // 语法：deleteCookie(name); 第一个key值
 
+        // 删除cookie其实就是把过期时间改为已经过去的时间
 
+        deleteCookie("username");
 
+        
+    </script>
 
+</body>
 
+</html>