CSSS属性overflow（溢出） 、CSS定位、JavaScript

overflow溢出属性

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

复制代码
    <title>溢出</title>
  <style>
    div{
      text-indent: 32px;
      border: 5px solid red;
      height: 400px;
      width: 400px;
      /*overflow: hidden;*/
      /*overflow: scroll;*/
      overflow: auto;
      /*  overflow: inherit;*/
    }
  </style>
复制代码

定位(positin)

static

　　默认值、无定位，能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。

relative（相对定位）

　　相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物

absolute（绝对定位）

　　就是相对于它的父标签进行定位，如果没有父标签，就相对于body标签

fixed（固定）

　　就是相对于浏览器窗口定位

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>
        .c1 {
            height: 100px;
            width: 100px;
            background-color: red;
            float: left;
        }
        .c2 {
            height: 50px;
            width: 50px;
            background-color: #ff6700;
            float: right;
            margin-right: 400px;
            position: relative;

        }
        .c3 {
            height: 200px;
            width: 200px;
            background-color: green;
            position: absolute;
            top: 50px;
        }
    </style>
</head>
<body>
<div class="c1"></div>
<div class="c2">
    <div class="c3"></div>
</div>

</body>
</html>
复制代码

fixed案列

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>返回顶部示例</title>
  <style>
    * {
      margin: 0;
    }

    .d1 {
      height: 1000px;
      background-color: #eeee;
    }

    .scrollTop {
      background-color: darkgrey;
      padding: 10px;
      text-align: center;
      position: fixed;
      right: 10px;
      bottom: 20px;
    }
  </style>
</head>
<body>
<div class="d1">111</div>
<div class="scrollTop">返回顶部</div>
</body>
</html>
复制代码

JavaScript

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

● 核心（ECMAScript） ------------>基础语法---------->必须要会的
● 文档对象模型（DOM） Document object model (整合js，css，html)----------->重要
● 浏览器对象模型（BOM） Broswer object model（整合js和浏览器）------------>不重要

简单地说，ECMAScript 描述了JavaScript语言本身的相关内容。
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习。

JavaScript引入方式

1. 书写位置
　　js文件
　　浏览器控制台
　　 script标签
2. 注释（注释是代码之母:快捷键：ctrl + ?(单行), 多行的(ctrl+shift+?)）
　　 单行注释 //
　　多行注释
　　// 这是单行注释

　　/*
　　这是
　　多行注释
　　*/
3. 结束符
　　JavaScript中的语句要以分号（;）为结束符。
4. 变量声明
　　es5:
　　　　var name = 'kevin';
　　es6:
　　　　let name='kevin'
5. 变量的命名
 　　基本上遵循python的变量命名规则即可
　　下划线、驼峰体、大驼峰、小驼峰
6. 常量
　　python没有真正意义上的常量，全大写就是常量
　　js中有真正意义上的常量
　　如何定义常量
　　　　const pi = 3.14
7. 保留字

JavaScript数据类型:（js也是一门面向对象语言，一切皆对象）

复制代码
a = 1
a = 'kevin'

// 如何查看数据类型：typeof 
var a = 1;
var b = 1.11;
console.log(typeof a);
console.log(typeof b);
        
        
1. 数值(Number)
var a = 1;
var b = 1.11;
2. 数据类型的转换
    var a = '123';
    还有一种NaN，表示不是一个数字（Not a Number）
3. 字符串(String)
    var s = 'hello';
      var ss = "hello";
      // var  sss = '''aaaa'''
      console.log(s + ss);
4. 常用方法：
    .length    返回长度
    .trim()    移除空白
    .trimLeft()    移除左边的空白
    .trimRight()    移除右边的空白
    .charAt(n)    返回第n个字符
    .indexOf(substring, start)    子序列位置
    .substring(from, to)    根据索引获取子序列
    .slice(start, end)    切片
    .toLowerCase()    小写
    .toUpperCase()    大写
    .split(delimiter, limit)    分割
5. ES6中引入了模板字符串（重要）
    var name = 'kevin';
    var age = 18;
    var s = `my name is ${name}, my age is ${age}`;
    console.log(s);

6. 布尔值(Boolean)
    true、false # True False
    # js中有哪些是假？
    ""(空字符串)、0、null、undefined、NaN都是false。
7. null和undefined
● null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;
● undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。

8. 数组------>列表
常用方法：
    方法                    说明
.length                    数组的大小
.push(ele)                尾部追加元素
.pop()                    获取尾部的元素
.unshift(ele)            头部插入元素
.shift()                头部移除元素
.slice(start, end)        切片
.reverse()                反转
.join(seq)                将数组元素连接成字符串
.concat(val, ...)        连接数组
.sort()    排序
.forEach()                将数组的每个元素传递给回调函数
.splice()                删除元素，并向数组添加新元素。
.map()                    返回一个数组元素调用函数处理后的值的新数组
复制代码

运算符

比较运算符
> >= < <= != == === !==
==
# ===(强等于，即比较数值，又比较类型) !==
逻辑运算符
&&(and) ||(or) !(not)

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

流程控制

if-else

var a = 10;
if (a > 5){
  console.log("yes");
}else {
  console.log("no");
}
var a = 10;
if (a > 5){
  console.log("a > 5");
}else if (a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");
}

switch

复制代码
var day = new Date().getDay();
switch (day) {
  case 0:
  console.log("Sunday");
  break;
  case 1:
  console.log("Monday");
  break;
default:
  console.log("...")
}
复制代码

for

for (var i=0;i<10;i++) {
  console.log(i);
}

while

var i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

自定义函数

跟Python中类相似，定义方式不同

复制代码
// 普通函数定义
function f1() {
  console.log("Hello world!");
}

// 带参数的函数
function f2(a, b) {
  console.log(arguments);  // 内置的arguments对象
  console.log(arguments.length);
  console.log(a, b);
}

// 带返回值的函数
function sum(a, b){
  return a + b;
}
sum(1, 2);  // 调用函数

// 匿名函数方式
var sum = function(a, b){
  return a + b;
}
sum(1, 2);

// 立即执行函数 书写立即执行的函数，首先先写两个括号()()这样防止书写混乱
(function(a, b){
  return a + b;
})(1, 2);
复制代码

补充：

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

var f = v => v;
// 等同于
var f = function(v){
  return v;
}

如果箭头函数不需要参数或需要多个参数，就是用圆括号代表参数部分：

复制代码
var f = () => 5;
// 等同于
var f = function(){return 5};

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2){
  return num1 + num2;  //这里的return只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中
}
复制代码

函数中的arguments参数

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

add(1,2)

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

 

局部变量：

在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除。

 

全局变量：

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

 

变量生存周期：

JavaScript变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。

作用域

首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。与python作用域关系查找一模一样！

自定义对象

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

var a = {"name": "Alex", "age": 18};
console.log(a.name);
console.log(a["age"]);

遍历对象中的内容：

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

创建对象

var person=new Object();  // 创建一个person对象
person.name="Alex";  // person对象的name属性
person.age=18;  // person对象的age属性

注意：

ES6中提供了Map数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当做键。

 

也就是说，Object结构提供了“字符串--值”的对应，Map结构提供了“值--值”的对应，是一种更完善的Hash结构实现。

map

复制代码
var m = new Map();
var o = {p: "Hello World"}

m.set(o, "content"}
m.get(o)  // "content"

m.has(o)  // true
m.delete(o)  // true
m.has(o) // false
复制代码

date对象

创建date对象

复制代码
//方法1：不指定参数
var d1 = new Date();
console.log(d1.toLocaleString());
//方法2：参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());
//方法3：参数为毫秒数
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());

//方法4：参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString());  //毫秒并不直接显示
复制代码

date对象的方法

复制代码
var d = new Date(); 
//getDate()                 获取日
//getDay ()                 获取星期
//getMonth ()               获取月（0-11）
//getFullYear ()            获取完整年份
//getYear ()                获取年
//getHours ()               获取小时
//getMinutes ()             获取分钟
//getSeconds ()             获取秒
//getMilliseconds ()        获取毫秒
//getTime ()                返回累计毫秒数(从1970/1/1午夜)
复制代码

练习

复制代码
const WEEKMAP = {  
  0:"星期天",
  1:"星期一",
  2:"星期二",
  3:"星期三",
  4:"星期四",
  5:"星期五",
  6:"星期六"
};  //定义一个数字与星期的对应关系对象


function showTime() {
    var d1 = new Date();
    var year = d1.getFullYear();
    var month = d1.getMonth() + 1;  //注意月份是从0~11
    var day = d1.getDate();
    var hour = d1.getHours();
    var minute = d1.getMinutes() < 10?"0"+d1.getMinutes():d1.getMinutes();  //三元运算

    var week = WEEKMAP[d1.getDay()];  //星期是从0~6

    var strTime = `
    ${year}-${month}-${day} ${hour}:${minute} ${week}
    `;
    console.log(strTime)
};

showTime();
复制代码

JSON对象

var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字符串转换成对象
var obj = JSON.parse(str1); 
// 对象转换成JSON字符串
var str = JSON.stringify(obj1);

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

posted @   Py玩家  阅读(27)  评论(0)  编辑  收藏  举报
相关博文：
· regexp对象、math对象、dom、bom、事件
· jQuery快速入门
· Python基础day49
· JavaScript
· overflow溢出属性、定位、前端基础之JavaScript简称js
阅读排行：
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
点击右上角即可分享
微信分享提示