Home Explore Help
Sign In
lovecoding
/
web0715
10
0
Fork 0
Files Issues 0 Wiki
Browse Source

add

fengchuanyu 9 months ago
parent
f6187ed405
commit
f543767831
8 changed files with 217 additions and 1 deletions
Split View Show Diff Stats
  1. 1 1
      1_html/4_列表.html
  2. BIN
      2_css/.DS_Store
  3. 4 0
      2_css/14_文本控制.html
  4. 14 0
      3_js基础/1_helloworld.html
  5. 19 0
      3_js基础/2_定义变量.html
  6. 75 0
      3_js基础/3_变量类型.html
  7. 45 0
      3_js基础/4_js当中运算符.html
  8. 59 0
      3_js基础/5_分支判断.html

+ 1 - 1
1_html/4_列表.html
View File 

@@ -17,7 +17,7 @@
 
 </head>
 
 <body>
 
     <!-- 无序列表 -->
 
-    <ul>
 
+    <ul type="square">
 
         <li>1</li>
 
         <li>2</li>
 
         <li>3</li>

BIN
2_css/.DS_Store
View File


+ 4 - 0
2_css/14_文本控制.html
View File 

@@ -39,9 +39,13 @@
 
             /* 文本益处部分显示省略号 */
 
             text-overflow: ellipsis;
 
         }
 
+        .box7{
 
+            letter-spacing: 20px;
 
+        }
 
     </style>
 
 </head>
 
 <body>
 
+    <div class="box7">我聆听沉寂已久的心情清晰透明 就像美丽的风景总在回忆里才看得清被伤透的心能不能够继续爱我</div>
 
     <a href="https://www.baidu.com">百度</a>
 
     <div>hello</div>
 
     <div class="text1">你好1</div>

+ 14 - 0
3_js基础/1_helloworld.html
View File 

@@ -0,0 +1,14 @@
 
+<!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>
 
+    JavaScript
 
+    <script>
 
+      document.write("hello world!");  
+    </script>
 
+</body>
 
+</html>

+ 19 - 0
3_js基础/2_定义变量.html
View File 

@@ -0,0 +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>
 
+</head>
 
+<body>
 
+    <script>
 
+        // var 定义变量的关键则  
+        //‘str’ 变量名 （由数字、字母、下划线_、$  数字不能开头）
 
+        // 其中“hello world” 是一段字符串
 
+        var str = "hello world!";
 
+        // console.log() 这个方法是向控制台输出内容  最为常用的调试方式
 
+        console.log(str);
 
+
 
+    </script>
 
+</body>
 
+</html>

+ 75 - 0
3_js基础/3_变量类型.html
View File 

@@ -0,0 +1,75 @@
 
+<!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>
 
+        // js中 数据类型取决于等号右边的值 
+        // 字符型 String
 
+        var str = "hello world!";//字符串
 
+        var str2 = "a";//单个字符
 
+        var str3 = 'hello';
 
+        var str4 = 'b';
 
+        // 数值型 Number
 
+        var num = 1;//整型数值
 
+        var num1 = 3.14//浮点型数值
 
+        //布尔型 Boolean
 
+        var boo = true;//真
 
+        var boo2 = false;//假
 
+        //数组 Array
 
+        var arr = [];//空数组
 
+        var arr2 = [1,2,3,4,5];
 
+        var arr3 = ['a','b','c','d','e'];
 
+        var arr4 = [1,2,3,'a,','b','c'];
 
+        var arr5 = [1,2,['a','b',['c',3]]];//多维数组
 
+        // 数组中每个值都有自己的索引 且索引从0开始
 
+        console.log(arr2[0])//数组中获取其中某个值的时候使用索引  
+        console.log(arr5[2][0])//多维数组获取值
 
+        //对象 Object
 
+        var obj = {}//空对象
 
+        // 对象内部为键值对形势即  key:value 每组键值对用‘,’间隔 键值对用':'连接
 
+        var obj = {
 
+            goodsImg:"./img/img1.png",
 
+            goodsTitle:"Xiaomi",
 
+            goodsDesc:"描述....",
 
+            goodsPric:5999
 
+        }
 
+        // 对象的取值方式为 对象名称.key值 对象名和key之间用'.'连接
 
+        console.log(obj.goodsTitle)
 
+
 
+
 
+
 
+
 
+        // 变量命名规范
 
+        var testNumber = 10; 
+        //变量名由 两个单词构成 test 和 number构成
 
+        //两个及以上单词构成的变量名 使用驼峰命名
 
+        //驼峰命名(小驼峰) ：第一个单词小写从第二个单词开始首字母大写
 
+
 
+        // js当中严格区分大小写
 
+        var a = 10;
 
+        var A = 'hello';
 
+        var testStr = "a";
 
+        var teststr = "b";
 
+
 
+
 
+        // js 定义变量的特性
 
+        var strA = "hello";
 
+        strA = "world";
 
+        strA = 10;
 
+        //可以随时更改变量类型
 
+        console.log(strA);
 
+        // 允许重复定义
 
+        var strA = [1,2];
 
+        console.log(strA);
 
+        // 允许未定义直接赋值
 
+        loveCoding = "爱扣钉";
 
+        console.log(loveCoding);
 
+
 
+        console.log(testStr10);
 
+    </script>
 
+</body>
 
+</html>

+ 45 - 0
3_js基础/4_js当中运算符.html
View File 

@@ -0,0 +1,45 @@
 
+<!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>
 
+        var num = 1;
 
+        var num2 = 2;
 
+        console.log(num + num2);//加
 
+        console.log(num2 - num);//减
 
+        console.log(num * num2);//乘
 
+        console.log(num2 / num);//除
 
+
 
+        // 如果对字符型进行加法运算 那么他将加号左右两边进行字符拼接
 
+        var str1 = "hello";
 
+        var str2 = "world";
 
+        console.log(str1 + str2);
 
+        // 加法运算如果一侧是字符型 那么统一按照字符串拼接实现
 
+        var str3 = "你好";
 
+        var str4 = 10;
 
+        console.log(str3 + str4);
 
+        // 如果 字符型数字参与 - * / 运算会转行成数字型运算
 
+        var str5 = 1;
 
+        var str6 = "2";
 
+        console.log(str5 * str6);
 
+
 
+        // 逻辑运算
 
+        var num3 = 1;
 
+        var num4 = 2;
 
+        var num5 = 2;
 
+        var num6 = "2";
 
+        console.log(num4 > num3);//大于
 
+        console.log(num4 < num3);//小于
 
+        console.log(num4 == num5);//是否等于
 
+        console.log(num4 >= num5);//大于等于
 
+        console.log(num4 <= num5);//小于等于
 
+        // 如果字符型数字和数值型数字进行 == 运算 会转行成数值型进行对比
 
+        console.log(num6 == num5);
 
+        console.log(num6 === num5);
 
+    </script>
 
+</body>
 
+</html>

+ 59 - 0
3_js基础/5_分支判断.html
View File 

@@ -0,0 +1,59 @@
 
+<!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>
 
+        // var num = 10;
 
+        // var num2 = 15;
 
+        // 分支判断
 
+        // if(num > num2){
 
+        //     console.log(num)
 
+        // }else{
 
+        //     console.log(num2)
 
+        // }
 
+
 
+
 
+        // 多路分支
 
+        // var num3 = 10;
 
+        // var num4 = 10;
 
+
 
+        // if(num3>num4){
 
+        //     console.log("最大的数字是："+num3);
 
+        // }else if(num3 == num4){
 
+        //     console.log("两个值相等：",num3,num4);
 
+        // }else{
 
+        //     console.log("最大的数字是："+num4)
 
+        // }
 
+
 
+        var a = 10;
 
+        var b = 20;
 
+        var c = 15;
 
+        // && 与运算符 表示并且 左右两边都成立的时候则为真
 
+        if(b>a && b>c){
 
+            console.log(b+"是最大的值")
 
+        }
 
+        // ｜｜ 或运算  表示左右两边任意一个成立则为真
 
+        if(c>a || c>b){
 
+            console.log("c不是最小的")
 
+        }
 
+        // ！= 代表不等于
 
+        if(a != b){
 
+            console.log("a不等于b")
 
+        }
 
+        // !表示取反 
+        var boo = true;
 
+        console.log(!boo);
 
+
 
+        // 三元运算符
 
+
 
+        var num11 = 10;
 
+        var num12 = 20;
 
+        var num13 = num11>num12?num11:num12;
 
+        console.log(num13)
 
+    </script>
 
+</body>
 
+</html>