分类 前端 下的文章

下载.jpg
最近老沈可是很久没有写java代码了,在完成一部分前端的工作,熟悉我的人都知道,前端比较差,最基本的东西还是懂得,但是没有认真去
学过html5和css3,一个学校的项目由于人事的原因从最初的2人变成只有我自己,一个完善的教师满意度打分系统,前端和后台分离,目前后台大部分
功能已实现,就只是前端的,所以就今天写了一个css3的anmition动画写的一个简单的div块旋转到中央的一个效果还是挺别致的。

粘贴一下代码,原div块的position 要给顶一个最终位置,比如说要把这个块的最终位置设置在中间

ready{

border-radius: 6px;
width: 444px;
height: 430px;
background:#fff;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
/*让块旋转*/
-webkit-animation: divrotate 1.3s; /*Safari and Chrome*/

}
最后一句代码就是兼容mac浏览器和谷歌浏览器的代码
divrotate是动画名称 1.3s是整个动画运行的时间
下面我们就开始定义动画
@keyframes divrotate {

0%{
    transform:rotate(90deg);
    -ms-transform:rotate(90deg);     /* IE 9 */
    -moz-transform:rotate(90deg);    /* Firefox */
    -o-transform:rotate(90deg);
    width:30px;
    height: 30px;

}
25%{
    transform:rotate(180deg);
    -ms-transform:rotate(180deg);     /* IE 9 */
    -moz-transform:rotate(180deg);    /* Firefox */
    -o-transform:rotate(180deg);
    /*让块往右走*/
    left:12%;
    width:100px;
    height: 100px;
}
50%{
    transform:rotate(270deg);
    -ms-transform:rotate(270deg);     /* IE 9 */
    -moz-transform:rotate(270deg);    /* Firefox */
    -o-transform:rotate(270deg);
    /*让块往右走*/
    left:24%;
    width: 180px;
    height: 180px;
}
75%{
    transform:rotate(300deg);
    -ms-transform:rotate(300deg);     /* IE 9 */
    -moz-transform:rotate(300deg);    /* Firefox */
    -o-transform:rotate(300deg);
    /*让块往右走*/
    left:48%;
    width: 280px;
    height: 280px;
}
100% {
    transform:rotate(360deg);
    -ms-transform:rotate(360deg);   /* IE 9 */
    -moz-transform:rotate(360deg);  /* Firefox */
    -o-transform:rotate(360deg);
    /*让块往右走*/
    left:34%;
    width: 444px;
    height: 430px;
}

}

定义动画带起始式是@keyframes divrotate
后面跟的是动画名称
然后每个百分比之间的样式就是,动画在经行的进度之内做出的操作,还是比较简单的
css虽然好写,但是要写出非常nice的效果,就非常需要一个很好的思路和创意

好了,这几天会持续发表一些学习ReactJS的心得。

今天又很开心学习了第四章节,收获蛮大的,希望写完文章后能对状态有着更好的掌握!
1.首先是组件的嵌套

React组件的创建是用creatClass函数
在这里我们举一个例子:
var Part_one=React.createClass({

        render:function () {
             return(
                 <div>
                 <h1>我爱敲代码</h1>
                    *<Part_Two/>*
                </div>
             );
         }
     });

然后呢,我们再定义一个组件名为 <Part_Two/>
var Part_Two=React.createClass({

         render:function () {
            return (
                 <h2>我也爱敲代码</h2>
            )
         }
    });

然后在其中一个组件中嵌套另外一个组件,就是这么简单!
测试通过后就成功显示了2行字,‘我爱敲代码和我也爱敲代码’
2.下面展示下今天比较重要的状态。
在React定义状态的时候是用
getInitialState:function(){

            return {
                clickCount:0,
            }
        }

要改变状态要调用setstate函数,在这里我做了一个小项目,点击一次按钮就加一!QQ截图20180712213911.png

ps:展示下源码
var Click=React.createClass({

        getInitialState:function(){
            return {
                clickCount:0,
            }
        },
        clickOver:function(){
            this.setState({
                clickCount:this.state.clickCount+1,
            })
        },
        render:function () {
            return (
                <div>
                    <p>点击下面的按钮</p>
                    <button onClick={this.clickOver}>点我</button>
                    <p>你一共点击了:{this.state.clickCount}</p>
                </div>
            )
        }
    });
    /*渲染到页面*/
    React.render(<Click/>,
        document.getElementById("window")
    )

解释:首先我们定义了一个状态事件,返回值是一个变量为0,然后又定义了一个事件用于每次+1,然后构建了一个div实现了简单的交互
button指向了每次+1的事件,下面的展示一共点击多少下的p标签则调用了状态事件,每当用户点击一次就调用方法让变量+1,然后p标签就
记录了一共多少次,最终渲染到window中,拥有一点点js基础的人能很直观的看懂。

写在最后:React 把组件看成是一个状态机。通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致。

下载.jpg
由于个人原因,在这个暑假想接触第一门JS框架,选择React框架,这个框架起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。

关于书写最基本的语法有几个注意的点
1.安装react尽量使用bower安装,并且要有git环境,安装成功后引入JS文件即可
2.可以不用命令行安装,也可以直接连接在线引用地址
在这里,我提供jQuery和react的引用库,国内访问速度较快的。
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js";></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js";></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js";></script>

3.准备成功以后我们开始code了!
首先我们准备一个div容器
<div id="main"></div>
4.其次我们开始JS
react是采用组件化的方式的,这极大的方便了后续开发者的优化等等,也避免了同样的东西二次重写代码
var Box=React.createClass({

    render:function () {
        var style={
            height:'100px',
            color:'red'
        }
        return <p style={style}>hello world</p>
    }
});

ps:我们这边定义了一个Box变量,然后调用createClass方法定义一个组件,在组件的render函数中,我们定义了一个
样式,并且返回了一个p标签,这里需要注意的就是我们不要在JS代码前面写text/javascipt,而要写<script type="text/jsx">
如若不然只能报错,jsx格式是js and xml 格式一起的,是react框架中存在的,所以在写js代码前要定义正确
5.渲染到页面
React.render(<Box/>,

    document.getElementById("main"),
    function () {
        console.log("渲染完毕")
    }
)

ps:我们这边调用了render函数渲染,render函数中有三个参数,2个必选一个可选,2个必选分别是选择组件,我们定义的组件是变量Box,在
创建组件的时候变量一定要首字母大写,否则浏览器会把其当成标签处理从而报错或者不显示,所以一定要首字母大写,第二个参数是选择渲染的
容器位置,我们在html中定义了一个容器,可以简单快捷的使用jquery来获取对象,最后一个可选参数是页面渲染后执行的函数,代码中表达
的是渲染完成后再控制台打印一句话,事实证明打印成功了,所以react的第一节课今天还是有所收获的。