首页 > 编程语言 >Python基础day49

Python基础day49

时间：2023-07-20 19:45:10浏览次数：40  
标签：console log Python JavaScript 基础 day49 var overflow name

overflow溢出属性

值 描述
visible 默认值。内容不会被修剪，会呈现在元素框之外
hidden 内容会被修剪，并且其余内容是不可见的
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
inherit 规定应该从父元素继承overflow属性的值

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

<style>
        div {
            width: 400px;
            height: 400px;
            border: red solid 2px;
            overflow: visible;/*默认值，不会被修剪*/
            overflow: hidden;/*内容会被修剪，并且其余内容是不可见的。*/
            overflow: scroll;/*内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。*/
            overflow: auto;/*如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。*/
            overflow: inherit;/*规定应该从父元素继承 overflow 属性的值。*/
        }
    </style>

定位

1. static-------->静止的----->默认情况下，所有的标签都是不能够移动的

2. 相对定位：就是相对标签自己原来的位置定位----->relative相对的

3. 绝对定位：就是相对于它的父标签进行定位，如果没有父标签，就相对于body标签---->absolute绝对定位

# 如果相对于父标签移动，前提是父标签必须是可移动的，言外之意就是父标签先设置：

 

position: relative;

4. 固定定位：就是相对于浏览器窗口定位

  <style>
    .d{
      width: 100px;
      height: 100px;
        background: red;
        position: relative;
        left: 100px;
        top: 100px;
    }
    .d1{
        width: 100px;
        height: 100px;
        background: blue;
        position: absolute;/*跟着父标签一起移动*/
        left: 100px;
    }
  </style>
</head>
<body>
<div class="d">
    <div class="d1"></div>
</div>

固定定位

<style>
        .d1{
            width: 60px;
            height: 30px;
            border: gray 2px solid;
            position: fixed;
            right: 0;
            bottom: 100px;

        }
        div a{
            text-decoration: none;
            position: absolute;
            text-align: center;
            color: darkgrey;
            display: inline-block;
            margin-left: 5px;
            margin-top: 5px;
        }
        a:hover{
            color: orange;
        }
    </style>
</head>
<body>
<div style="height: 9999px;background:white"></div>
<div class="d1">
  <a href="">回顶部</a>
</div>
</body>

前端基础值JavaScript简称js

一个完整的 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()                    返回一个数组元素调用函数处理后的值的新数组

流程控制

if-else

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

if-else if-else

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("...")
}

switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句。

for

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

while

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

三元运算

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

x
10

函数

函数定义

// 普通函数定义
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)

 

运算符

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

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

流程控制

自定义对象

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

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

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午夜)

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);

 

标签：console,log,Python,JavaScript,基础,day49,var,overflow,name
From： https://www.cnblogs.com/zfq132/p/17569470.html

相关文章

  • PYTHON 没有实体类做修改
    PYTHON没有实体类做修改在Python中，我们经常需要对数据进行操作和修改。有时候，我们可能需要修改一个已经存在的数据对象，或者需要创建一个新的数据对象来存储修改后的数据。在其他编程语言中，通常会使用实体类来实现这些操作。实体类是一个包含属性和方法的数据结构，可以用来表示现实......
  • Linux python 查找模块和版本号
    LinuxPython查找模块和版本号作为一名经验丰富的开发者，你需要教会一位刚入行的小白如何在Linux环境下使用Python查找模块和版本号。以下是一份详细的步骤和相应的代码注释，帮助他完成这个任务。步骤步骤描述步骤一打开终端步骤二运行Python交互式解释器步骤三......
  • Python字典换行
    Python字典换行的实现作为一名经验丰富的开发者，我将教会你如何实现Python字典换行。在本文中，我将详细介绍整个过程，并提供每一步所需的代码和代码注释。流程概述实现Python字典换行的过程可以分为以下几个步骤：创建一个字典。将字典的键值对分为多行。编写代码实现字典换行。......
  • VM虚拟机配置python环境
    如何配置Python环境的虚拟机引言在软件开发中，配置适当的开发环境是非常重要的。Python作为一种常用的编程语言，为了更好地管理项目和依赖，我们经常使用虚拟机来创建独立的Python环境。本文将为刚入行的开发者介绍如何配置Python环境的虚拟机。整体流程下面的表格展示了配置Python......
  • Python字典编码
    Python字典编码的实现介绍在Python中，字典是一种非常重要和常用的数据结构。字典可以存储键值对的数据，通过键来快速访问和修改对应的值。字典编码是将一个字典转换为字符串的过程，这样可以方便地将字典存储到文件中或者传输给其他系统。本文将介绍Python字典编码的实现步骤以及具......
  • Python中字符串可以直接用大于号小于号吗
    Python中字符串可以直接用大于号小于号吗在Python中，字符串是一种不可变的数据类型。我们可以使用双引号或单引号来定义字符串，比如"HelloWorld"或'Pythonisawesome'。字符串在Python中非常常用，因为它们可以包含文本和字符数据。但是，对于字符串来说，我们不能直接使用大于号（>）和小......
  • Python中下顿号咋打
    如何在Python中输入下顿号作为一名经验丰富的开发者，我很高兴能够帮助你解决这个问题。下面是实现“Python中下顿号”的步骤：步骤操作步骤1安装Python开发环境步骤2创建Python脚本文件步骤3导入所需的模块步骤4使用下顿号现在让我们逐步进行操作。......
  • Python中如何将列表偶数值求和
    Python中如何将列表偶数值求和在实际的编程过程中，我们经常会遇到需要对一个列表中的偶数值进行求和的问题。Python作为一门强大的编程语言，提供了多种方法来解决这个问题。本文将介绍几种常用的方法，并提供示例来解决一个实际问题。问题描述假设我们有一个包含整数的列表，我们需要......
  • Python中如何查找到空格结束
    Python中如何查找到空格结束在Python中，我们经常需要处理字符串，并从中提取出特定的内容。如果我们想要从一个字符串中查找到空格结束，即从空格开始的位置，一直到下一个空格之前的内容，可以使用一些方法来解决。方法一：使用split()函数Python中的split()函数可以将字符串分割成一个列......
  • Python中多精度小数怎么定义
    Python中多精度小数的定义和使用在Python中，我们通常使用float类型来表示小数。然而，float类型的数字在进行精确计算时可能会遇到精度丢失的问题。为了解决这个问题，Python提供了decimal模块，可以用来定义和操作多精度小数。1.多精度小数的定义要使用多精度小数，首先需要导入decimal......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99