2017年11月

angular1控制器主要作用(大致思路)

初始化module数据(为应用中的模型设置初始状态)
用过$scope对象把数据模型或函数行为暴露给视图
监视模型的变化,做出相应动作

 <!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<table ng-controller="muController">
    <tr>
        <td>用户名:</td>
        <td><input type="text" ng-model="user.username"/></td>
    </tr>
    <tr>
        <td>密码:</td>
        <td><input type="password" ng-model="user.password"/></td>
    </tr>
    <tr>
        <td><input type="button" value="登陆" ng-click="login()"/></td>
    </tr>
</table>
<script src="node_modules/angular/angular.js"></script>
<script>
    var app = angular.module("myApp", []);
    app.controller("muController", ["$scope", function ($scope) {
        $scope.user = {
            username: '',
            password: ''
        }
        $scope.login = function () {
            console.log($scope.user);
        }
    }])
</script>
</body>
</html>

仿腾讯首页星座运势(完)

上 http://www.qq.com/ 扒素材。
主要涉及: position “子绝父相” , onchange(select option)

function $(id){return document.getElementById(id);}

code: https://github.com/net-web/javasript-base

CSS:

仿腾讯首页星座运势
最终效果:
仿腾讯首页星座运势

Tap栏切换、选项卡切换特效(js)

使用“排他思想”。。。。。。
代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #main {
            width: 600px;
            margin: 0 auto;
        }
        #btn {
            height: 50px;
        }
        #btn button {
            float: left;
        }
        #divBox div {
            width: 500px;
            height: 500px;
            margin-top: 50px;
            display: none;
        }
        .boxBgc {
            background-color: purple;
        }
    </style>
</head>
<body>
<div id="main">
    <div id="btn">
     <button class="boxBgc">第一个盒子</button>
     <button>第二个盒子</button>
     <button>第三个盒子</button>
     <button>第四个盒子</button>
     <button>第五个盒子</button>
    </div>
    <div id="divBox">
        <div style="display: block">第一个盒子</div>
        <div>第二个盒子</div>
        <div>第三个盒子</div>
        <div>第四个盒子</div>
        <div>第五个盒子</div>
    </div>
</div>
<script>
    window.onload = function () {
        //获取所有的button
        var btnBox = document.getElementById("btn").getElementsByTagName("button");
        //获取所有div
        var divBox = document.getElementById("divBox").getElementsByTagName("div");
        var btnLength = btnBox.length;
        var divLength = divBox.length;
        for (var i = 0; i < btnLength; i++) {
            btnBox[i].index = i;
            btnBox[i].onmouseover = function () {
                //清除所有button上的背景颜色
                for (var j = 0; j < btnLength; j++) {
                    //btnBox[i].style.backgroundColor = "";
                    btnBox[j].className = "";
                    divBox[j].style.display = "none";
                }
                this.className = "boxBgc";
                //影藏所有的div
                //for(var i =0;i<divLength;i++){
                //}
                divBox[this.index].style.display = "block";
            }

        }

    }
</script>
</body>
</html>

js选项卡特效