12.18笔记

来源：互联网发布：java企业门户网站源码编辑：程序博客网时间：2024/06/08 19:51

圆角边框

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); // Tomconsole.log(obj["name"]); // Tomconsole.log(obj[3]); // 333

阅读全文

0 0