12.18笔记

最新推荐文章于 2024-12-18 23:09:36 发布

Coldzerace

最新推荐文章于 2024-12-18 23:09:36 发布

阅读量209

点赞数

CC 4.0 BY-SA版权

分类专栏：每日心得

本文链接：https://blog.youkuaiyun.com/Coldzerace/article/details/78853567

每日心得专栏收录该内容

21 篇文章

订阅专栏

圆角边框

border-radius :用于指定圆角边框的圆角半径。

如指定1个参数，则4个圆角都使用该长度作为半径。
如指定2个参数，则第一个参数作为左上角和右下角的半径，第二个参数作为右上角和左下角的半径。
如指定3个参数，第一个参数作为左上角的半径，第二个参数作为右上角和左下角的半径，第三个参数作为右下角的半径。

<style>
	div
{
	border:2px solid #a1a1a1;
	padding:10px 40px; 
	background:#dddddd;
	width:300px;
	border-radius:25px;
}
</style>

边框阴影

box-shadow属性用于增加盒模型元素的边框阴影。一共有5个参数。

第一个参数：控制阴影在水平方向的偏移。
第二个参数：控制阴影在垂直方向的偏移。
第三个参数：控制阴影的模糊程度。
第四个参数：控制阴影的缩放程度。
第五个参数：改属性值控制阴影的颜色。

<style> 
    div
    {
        width:300px;
        height:100px;
        background-color:yellow;
        box-shadow: 20px 10px 100px 100px #888888;
    }
    </style>
    </head>
    <body>

    <div></div>

</body>

内部阴影

{box-shadow:inset x-offset y-offset blur-radius spread-radius color}

对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量阴影模糊半径阴影扩展半径阴影颜色}

渐变动画

transition动画可以控制HTML组件的某个属性发生改变时经历的时间，使其以平滑渐变的方式发生改变，产生动画效果。有4个参数。

第一个参数：指定对哪个HTML元素进行处理。
第二个参数：定义持续时间。
第三个参数：指定渐变的速度。（有多个可用的属性值，请完成自学）
第四个参数：指定延迟时间。

<style> 
    div
    {
        width:100px;
        height:100px;
        background:red;
        transition:width 2s;
    }
    div:hover
    {
        width:300px;
    }
</style>

<body>
	<div></div>
</body>

Animation动画

annimation动画提供了更灵活的制作动画的方法。animation是一个符合属性，有5个参数：

第一个参数：指定动画的名称。
第二个参数：指定动画的持续时间。
第三个参数：指定动画的变化速度。
第四个参数：指定动画延迟多久开始执行。
第五个参数：指定动画循环执行的次数。

<style> 
    div
    {
        width:100px;
        height:100px;
        background:red;
        animation:myfirst 5s;

    }

    @keyframes myfirst
    {
        0%   {background:red;}
        25%  {background:yellow;}
        50%  {background:blue;}
        100% {background:green;}
    }

</style>

<body>

	<div></div>

</body>

1.语句

语句是完成某种特定任务的代码，在 Javascript 中每条语句要以”;”结束；
语句在定义的时候可以出现在一行中，也可以一行出现多条语句，都是允许的；
表达式可以单独出现在 JS 代码中，但是没有任何意思；

	var _div = ""; var _div = "";
    // 没有任何的意思
    1 + 2;

2.变量

变量是对“值”的引用。在其他的场合中，我们有的时候把引用也成为地址或指针。
在JS中，定义变量使用“var”关键字。

    var _msg = "hello";
    // 上述的语句，在JS解释器中其实是分了两个步骤完成
    // 第一步：
    var _msg;
    // 此时变量_msg的值为undefine;
    // 第二步：
    _msg = "hello";

3.输出语句

JavaScript 可以通过不同的方式来输出数据：

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

怎样构造对象

    var person={
    "name":"小明",
    "age":"18",
    "like":function(){
                return "喜欢打篮球,弹吉他"
          }
    }
    
    var person=new Object();
    person.name='小明'；
    person.sex='男'；
    person.method=function(){
      return this.name+this.sex;
    }

属性的操作

有两种方式读取对象的属性，一种使用点运算符，还有一种是使用方括号运算符。

var obj = {
   name : "Tom",
   age : 27,
   sex : true,
   3:"333"
};
console.log(obj.name); // Tom
console.log(obj["name"]); // Tom
console.log(obj[3]); // 333