• 计算机基础知识44

    overflow溢出属性

    visible：默认值，内容不会被修剪，会呈现在元素框之外。
    hidden：内容会被修剪，并且其余内容是不可见的。
    scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
    auto: 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

    ● overflow（水平和垂直均设置）
    ● overflow-x（设置水平方向）
    ● overflow-y（设置垂直方向）

    1. html>
    2. <html lang="en">
    4.     8">
    5.     Title
    6.     
    8. <body>
    9. <p>别太敏感，你很好，一点都不糟糕，希望你被这个世界爱着，希望你笑了是真的快乐，希望你遇见过山的浑浊，眼泪依然有海的清澈p>
    10. body>
    11. html>

    圆形头像示例

    1. HTML>
    2. <html>
    4.   8">
    5.   content="IE=edge">
    6.   content="width=device-width, initial-scale=1">
    7.   圆形的头像示例
    8.   
    10. <body>
    11. <div class="hhh">
    12.   <div class="header-img">
    13.     <img src="https://img1.baidu.com/it/u=3533698366,4262741630&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
    14.

    • CSS的定位

    static: 静态定位，默认情况下，所有的标签都是静止的，不能够移动

    relative：相对定位，相对自己原来的位置进行移动

    absolute：绝对定位，相对于是父标签移动的，如果没有父元素，那就按照body移动

    fixed：固定定位: 相对于浏览器窗口定位

    1. html>
    2. <html lang="en">
    4.     8">
    5.     Title
    6.     
    8. <body>
    11. <div style="height: 500px;background: red">
  • 500px;background: green">
  • 500px;background: blue">
  • 80px;height: 80px;border: 3px solid orange;position:fixed;right: 20px;bottom: 20px ">回到顶部
  • 80px;height: 500px;border: 3px solid orange;position:fixed;right: 0px;bottom: 150px ">
  • 100%;height: 100px;background: blueviolet">手机app;
  • 100%;height: 100px;background: hotpink">手机app
  • 100%;height: 100px;background: lemonchiffon">手机app
  • 100%;height: 100px;background: darkviolet">手机app
  • 100%;height: 100px;background: plum">手机app

    • 顶部导航示例

    1. HTML>
    2. <html>
    4.   8">
    5.   content="IE=edge">
    6.   content="width=device-width, initial-scale=1">
    7.   <span class="hljs-selector-tag">li</span>标签的<span class="hljs-attribute">float</span>示例
    8.   
    10. <body>
    12. <div class="nav">
    13.   <ul class="clearfix">
    14.     <li><a href="">玉米商城a>li>
    15.     <li><a href="">MIUIa>li>
    16.     <li><a href="">ioTa>li>
    17.     <li><a href="">云服务a>li>
    18.     <li><a href="">水滴a>li>
    19.     <li><a href="">金融a>li>
    20.     <li><a href="">优品a>li>
    21.   ul>
    22. div>
    24. body>
    25. html>

    前端基础之JavaScript

    # 实际上，一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：

    ● 核心（ECMAScript） 
    ● 文档对象模型（DOM） Document object model (整合js，css，html)
    ● 浏览器对象模型（BOM） Broswer object model（整合js和浏览器）

    # Script标签内写代码： src="myscript.js">

    # 注释：// 这是单行注释
                 /*
                   这是
                  多行注释
                 */

    # 变量：1. JavaScript的变量名可以使用_，数字，字母，$组成，不能以数字开头。
                  2. 声明变量使用 var 变量名; 的格式来进行声明

    1. a=1
    2. var a=1; # es5的语法
    3. let a=1; # es6的语法

    # 常量：const PI=3.14

    JavaScript数据类型

    # JavaScript拥有动态类型：JavaScript不区分整型和浮点型，就只有一种数字类型

    1. var x;  // 此时x是undefined
    2. var x = 1;  // 此时x是数字
    3. var x = "Alex"  // 此时x是字符串

    # 常用方法：

    1. parseInt("123")  // 返回123
    2. parseInt("ABC")  // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
    3. parseFloat("123.456")  // 返回123.456

    # 字符串(String)常用方法：

    1. .length	返回长度
    2. .trim()	移除空白
    3. .trimLeft()	移除左边的空白
    4. .trimRight()	移除右边的空白
    5. .charAt(n)	返回第n个字符
    6. .concat(value, ...)	拼接
    7. .indexOf(substring, start)	子序列位置
    8. .substring(from, to)	根据索引获取子序列
    9. .slice(start, end)	切片
    10. .toLowerCase()	小写
    11. .toUpperCase()	大写
    12. .split(delimiter, limit)	分割
    1. DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    7.     <script>
    8.         //这是注释
    9.         // alert(123);
    10.         var x='12.34';
    11.         var y='12'
    12.         // parseFloat(x)；
    13.         parseInt(y)
    14.         // console.log(parseFloat(x));
    15.         // console.log(parseFloat(y));
    16.         // console.log(typeof parseInt(y));
    17.         // console.log(parseInt('sd1234ddasd'))；
    18.  
    19.         var a='hello';
    20.         var b="world";
    21.         var c='java|script|script'
    22.         console.log(a+b);
    23.         // 长度
    24.         console.log(a.length);
    25.         // 去空格去别的
    26.         console.log(a.trim());
    27.         console.log(a.trimLeft());
    28.         console.log(a.trimRight());
    29.         // 取出某个字符
    30.         console.log(b.charAt(1));
    31.         // 拼接
    32.         console.log(a.concat(b));
    33.         console.log(b.concat(a));
    34.         console.log(b.concat(a,c));
    35.         // 如果里面子字符串在打字符串中时，会显示他的索引位置
    36.         // 判断某个字符串在不在另外一个字符串中
    37.         // 当不存在找不到时，为假时为-1
    38.         console.log(c.indexOf('java'))
    39.         console.log(c.indexOf('script'))
    40.         // 切片
    41.         console.log(c.substring(0,3))  //jav，不能使用负数
    42.         console.log(c.slice(3))  //ascriptscript,全部
    43.         console.log(c.slice(3,5))  //as
    44.         console.log(c.slice(-3))  //ipt
    45.         // 全大写或小写
    46.         console.log(c.toUpperCase(c))
    47.         console.log(c.toLowerCase(c))
    48.         // 分割
    49.         console.log(c.split('|'))  //['java', 'script', 'script']
    50.     script>
    51. head>
    52. <body>
    53.  
    54. body>
    55. html>

    # // ES6中引入了模板字符串：

    1. var name = 'kevin';
    2. var age = 20;
    3. // var res = 'my name is %s, my age is %s';
    4. var res = `my name is ${name}, my age is ${age}`;
    5. console.log(res);

    # 布尔值(Boolean): 在js中，什么是真、什么是假

       null:原来有，没了      undefined:什么都没有

       假：""(空字符串)、0、null、undefined、NaN都是false

    1. var a = true;
    2. var b = false;
    3. var a=1;
    4. var a; undefined

    # // 数组的常用方法

    1. .length	数组的大小
    2. .push(ele)	尾部追加元素
    3. .pop()	获取尾部的元素
    4. .unshift(ele)	头部插入元素
    5. .shift()	头部移除元素
    6. .slice(start, end)	切片
    7. .reverse()	反转
    8. .join(seq)	将数组元素连接成字符串
    9. .concat(val, ...)	连接数组
    10. .sort()	排序
    11. .forEach()	将数组的每个元素传递给回调函数
    12. .splice()	删除元素，并向数组添加新元素。
    13. .map()	返回一个数组元素调用函数处理后的值的新数组
    1. DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8. <div>div>
    9. <script>
    10.   var  arr = ['kevin','tony','jason','jerry']
    11.   console.log(arr[0])
    12.   console.log(arr[1])
    13.   console.log(arr[2])
    14.   console.log(arr.length)
    15.   // // 插入元素
    16.   arr.push('oscar');
    17.   arr.unshift('hello');
    18.   // // 删除
    19.   arr.shift()
    20.   // // 拼接
    21.   console.log(arr.join(','))  //['kevin', 'tony', 'jason', 'jerry', 'oscar']
    22.   var arr1 = [1,2,3,4]
    23.   console.log(arr.concat(arr1))   // ['kevin', 'tony', 'jason', 'jerry', 'oscar', 1, 2, 3, 4]
    24.   console.log(arr)
    25.  
    26.   // 循环
    27.   arr.forEach(function (value,index,array) {
    28.       console.log(value,index,array)
    29.   });
    30.   arr.map(function (value,index,array){
    31.       console.log(value,index,array)
    32.   })
    33.  
    34. script>
    35. body>
    36. html>

    # 运算符：+ - * / % ++ --

    1. DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8. <script>
    9.   var x=10;
    10.   var res1= x++;
    11.   var res2= ++x;
    12.   console.log(res1)  //10
    13.   console.log(res2)  //12
    14.  
    15.   console.log(2>1 && 4>3);  //&&=and
    16.   console.log(2>1 || 4>3);  //||=or
    17.   console.log(2>1 != 4>3);  //! = 不等于
    18. script>
    19. body>
    20. html>

    # // 比较运算符：> >= < <= != == === !==

      逻辑运算符: && || ! 

      赋值运算符：= += -= *= /=

    # 流程控制：if-else、f-else if-else、switch

    1. var a = 10;
    2. if (a > 5){
    3.   console.log("yes");
    4. }else {
    5.   console.log("no");
    6. }
    7.  
    8. var a = 10;
    9. if (a > 5){
    10.   console.log("a > 5");
    11. }else if (a < 5) {
    12.   console.log("a < 5");
    13. }else {
    14.   console.log("a = 5");
    15. }
    16.  
    17. var day = new Date().getDay();
    18. console.log(day);  //3
    19. switch (day) {
    20.     case 0:
    21.       console.log("Sunday");
    22.       break;
    23.     case 3:
    24.       console.log("Monday");
    25.       break;
    26.     default:
    27.       console.log("...")

    # for、while：

    1. for (var i=0;i<10;i++) {
    2.   console.log(i);
    3. }
    4.  
    5. var i = 0;
    6. while (i < 10) {
    7.   console.log(i);
    8.   i++;
    9. }

    # 三元运算：

    1. var a = 1;
    2. var b = 2;
    3. var c = a > b ? a : b
    4. //这里的三元运算顺序是先写判断条件a>b再写条件成立返回的值为a,条件不成立返回的值为b;三元运算可以嵌套使用；
    5. var a=10,b=20;
    6. var x=a>b ?a:(b=="20")?a:b;
    7.  
    8. x
    9. 10

    JavaScript函数

    # JavaScript中的函数和Python中的非常类似，只是定义方式有点区别

    1. // 普通函数定义
    2. function f1() {
    3.   console.log("Hello world!");
    4. }
    5.  
    6. // 带参数的函数
    7. function f2(a, b) {
    8.   console.log(arguments);  // 内置的arguments对象
    9.   console.log(arguments.length);
    10.   console.log(a, b);
    11. }
    12.  
    13. // 带返回值的函数
    14. function sum(a, b){
    15.   return a + b;
    16. }
    17. sum(1, 2);  // 调用函数
    18.  
    19. // 匿名函数方式
    20. var sum = function(a, b){
    21.   return a + b;
    22. }
    23. sum(1, 2);
    24.  
    25. // 立即执行函数 书写立即执行的函数，首先先写两个括号()()这样防止书写混乱
    26. (function(a, b){
    27.   return a + b;
    28. })(1, 2);

    # ES6中允许使用“箭头”（=>）定义函数

    1. var f = v => v;
    2. // 等同于
    3. var f = function(v){
    4.   return v;
    5. }

    # 函数中的arguments参数

    # 注意：函数只能返回一个值，如果要返回多个值，只能将其放在数组或对象中返回。

    1. function add(a,b){
    2.   console.log(a+b);
    3.   console.log(arguments.length);
    4. 　console.log(arguments[0]);//arguments相当于将出传入的参数全部包含，这里取得就是第一个元素1
    5. }
    6.  
    7. add(1,2)

    # 函数的全局变量和局部变量

    1. var city = "BeiJing";
    2. function f() {
    3.   var city = "ShangHai";
    4.   function inner(){
    5.     var city = "ShenZhen";
    6.     console.log(city);
    7.   }
    8.   inner();
    9. }
    10.  
    11. f();

    # 闭包

    1. var city = "BeiJing";
    2. function f(){
    3.     var city = "ShangHai";
    4.     function inner(){
    5.         console.log(city);
    6.     }
    7.     return inner;
    8. }
    9. var ret = f();
    10. ret();

    JS的自定义对象

    # JavaScript的对象本质上是键值对的集合（Hash结构），但是只能用字符串作为键

    1. var a = {"name": "Alex", "age": 18};
    2. console.log(a.name);
    3. console.log(a["age"]); //取值
    4. delete a.name ;  // 删

    # 遍历对象中的内容:

    1. var a = {"name": "Alex", "age": 18};
    2. for (var i in a){
    3.   console.log(i, a[i]);
    4. }

    JS的Date对象

    # 创建Date对象

    1. //方法1：不指定参数
    2. var d1 = new Date();
    3. console.log(d1.toLocaleString());
    4.  
    5. //方法2：参数为日期字符串
    6. var d2 = new Date("2004/3/20 11:12");
    7. console.log(d2.toLocaleString());
    8. var d3 = new Date("04/03/20 11:12");
    9. console.log(d3.toLocaleString());
    10.  
    11. //方法3：参数为毫秒数
    12. var d3 = new Date(5000);
    13. console.log(d3.toLocaleString());
    14. console.log(d3.toUTCString());
    15.  
    16. //方法4：参数为年月日小时分钟秒毫秒
    17. var d4 = new Date(2004,2,20,11,12,0,300);
    18. console.log(d4.toLocaleString());  //毫秒并不直接显示

    # Date对象的方法

    1. var d = new Date();
    2. console.log(d.getDate());
    3. console.log(d.getDay());
    4. console.log(d.getMonth());
    5. console.log(d.getFullYear());  //2023
    6. //getDate()                 获取日
    7. //getDay ()                 获取星期
    8. //getMonth ()               获取月（0-11）
    9. //getFullYear ()            获取完整年份
    10. //getYear ()                获取年  23
    11. //getHours ()               获取小时
    12. //getMinutes ()             获取分钟
    13. //getSeconds ()             获取秒
    14. //getMilliseconds ()        获取毫秒
    15. //getTime ()                返回累计毫秒数(从1970/1/1午夜)

    # 案例：将当前日期按“2017-12-27 11:11 星期三”格式输出

    1. const WEEKMAP = {  
    2.   0:"星期天",
    3.   1:"星期一",
    4.   2:"星期二",
    5.   3:"星期三",
    6.   4:"星期四",
    7.   5:"星期五",
    8.   6:"星期六"
    9. };  //定义一个数字与星期的对应关系对象
    10.  
    11.  
    12. function showTime() {
    13.     var d1 = new Date();
    14.     var year = d1.getFullYear();
    15.     var month = d1.getMonth() + 1;  //注意月份是从0~11
    16.     var day = d1.getDate();
    17.     var hour = d1.getHours();
    18.     var minute = d1.getMinutes() < 10?"0"+d1.getMinutes():d1.getMinutes();  //三元运算
    19.  
    20.     var week = WEEKMAP[d1.getDay()];  //星期是从0~6
    21.  
    22.     var strTime = `
    23.     ${year}-${month}-${day} ${hour}:${minute} ${week}
    24.     `;
    25.     console.log(strTime)
    26. };
    27.  
    28. showTime();

    JS的JSON对象

    # 在JavaScript中，对象是拥有属性和方法的数据

    json.dumps  ------------------->JSON.stringify()
    json.loads--------------------->JSON.parse()
     1. 先序列化

    1. var res=JSON.stringify(obj1) # '{"name": "Alex", "age": 18};'
    2. python:
    3.     json.loads(res)    # {"name": "Alex", "age": 18};

    2. 反序列化

    今日思维导图：

  • 相关阅读:
    分享一个 MySQL 简单快速进行自动备份和还原的脚本和方法
    【动手学深度学习】卷积神经网络CNN的研究详情
    Qt编程-QTableView冻结行或冻结列或冻结局部单元格
    Java学习 --- 类方法(静态方法)
    Qt应用程序打包工具安装
    软设上午题-错题知识点一
    Spring的前置知识
    spring 5.2+ http返回结果json格式字符集丢失问题
    图扑数字孪生卡车装配生产线，工业元宇宙还远么？
    Golang日志新选择：slog
  • 原文地址：https://blog.csdn.net/qq_48064830/article/details/134248769