JS-路由實(shí)現(xiàn)功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        li{
            list-style: none;
            margin-top: 25px;
        }
        .ul2 li{
            float: left;
            margin-left: 15px;
        }
    </style>
    <script type="text/javascript">
        function f1(param){

            for(var i =1;i<=5;i++){
                var id =document.getElementById("d"+i);
                id.style.display="none";
                if(i===param)
                {
                    id.style.display="block";
                }
            }
        }
    </script>
    <script src="../angular1.4.6.min.js"></script>
    <script src="../angular-route.js"></script>
    <script>
        var myapp=angular.module("product",[]);


        myapp.factory('productList',function(){
            return [
                {id:1234,name:"ipad",price:3400,kun:10},
                {id:1244,name:"aphone",price:6400,kun:100},
                {id:1334,name:"mypad",price:4400,kun:20},
                {id:8234,name:"zzpad",price:8400,kun:130}
            ]
        })
        myapp .controller('productController',function($scope,productList,$http){
            /*$scope.search = "ipad";//定義一個變量
            alert($scope.search);*/
            $http({
                url:"package.json"
            }).then(function (data) {
                $scope.data=data.data;
            })

            $scope.productList=productList
            $scope.orderColumn='name'; //排序字段
            // $scope.orderSign='-';      //為空時正序 為負(fù)號時倒序
            $scope.chk=false;
            $scope.xuanz=false;
            $scope.check=function (val) {
                if (val){
                    $scope.xuanz=true;
                }else{
                    $scope.xuanz=false;
                }

            }
            $scope.sortProduct=function(sortColumn){  //點(diǎn)擊列標(biāo)題排序事件
                $scope.orderColumn=sortColumn;//覺得按照那一列進(jìn)行排序
                if($scope.orderSign=="-"){
                    $scope.orderSign="";
                }else{
                    $scope.orderSign='-';
                }
            };
            $scope.AlldelProduct = function(name){
                if(confirm("是否刪除所有商品") ){
                    $scope.productList.length=0;
                }
            }
            //刪除產(chǎn)品
            $scope.delProduct = function(name){
                //alert(name);
                if(name!=""){
                    if(confirm("是否刪除"+name+"商品") ){
                        var p;
                        for (index in $scope.productList) {
                            p = $scope.productList[index];
                            if(p.name == name){
                                $scope.productList.splice(index,1);
                            }
                        }
                    }
                }
            }
            var u1="https://free-api.heweather.com/v5/weather?city=";
            var u2;
            var u3="&key=545d63e185fc48169a43cbabba6e74d2";
            $scope.city="beijing";
            $scope.show=false;
            $scope.searcha=function () {
                u2=$scope.city;
                $scope.show=true;
                $http({
                    url:u1+u2+u3
                }).then(function (data) {
                    $scope.cityName=data.data.HeWeather5[0].basic.city;
                    $scope.date=data.data.HeWeather5[0].daily_forecast[0].date;
                    $scope.temp=data.data.HeWeather5[0].daily_forecast[0].tmp.max;
                });
                $scope.city="";
            };
            var dataa={
                user:"我",
                items:[
                    {action:"約劉詩詩吃飯",done:false},
                    {action:"約劉詩詩跳舞",done:false},
                    {action:"約劉詩詩敲代碼",done:false},
                    {action:"約劉詩詩爬長城",done:false},
                    {action:"約劉詩詩逛天壇",done:false},
                    {action:"約劉詩詩看電影",done:false},
                ]
            };
            $scope.dataa=dataa;
            $scope.complate=false;
            $scope.count=function () {
                var n=0;
                for(var a=0;a<$scope.dataa.items.length;a++){
                    if($scope.dataa.items[a].done==false){
                        n++;
                    }
                }
                return n;
            };
            $scope.add=function () {
                if ($scope.action){
                    $scope.dataa.items.push({"action":$scope.action,"done":false});
                    $scope.action="";
                }
            }
        });
        myapp.filter("doFilter",function () {
            return function (items,flag) {
                var arr=[];
                for(var i=0;i<items.length;i++)
                {
                    if(items[i].done==false)
                    {
                        arr.push(items[i]);
                    }else{
                        if(flag==true)
                        {
                            arr.push(items[i]);
                        }
                    }
                }
                return arr;
            }

        })
        window.onload = newgame; //頁面載入的時候就開始一個新的游戲
        window.onpopstate = popState; //處理歷史記錄相關(guān)事件
        var state, ui; //全局變量，在newgame()方法中會對其初始化
        function newgame(playagain) {
            ui = {
                heading: null, //文檔最上面的<h1>元素
                prompt: null, //要求用戶輸入一個猜測數(shù)字
                input: null, //用戶輸入猜測數(shù)字的地方
                low: null, //可視化的三個表格單元格
                mid: null, //猜測的數(shù)字范圍
                high: null,
            };
            //查詢這些元素中每個元素的id
            for(var id in ui) ui[id] = document.getElementById(id);
            //給input字段定義一個事件處理程序函數(shù)
            ui.input.onchange = handleGuess;
            //生成一個隨機(jī)的數(shù)字并初始化游戲狀態(tài)
            state = {
                n: Math.floor(99 * Math.random())+1, //整數(shù)： 0 < n <100
                low: 0, //可猜數(shù)字范圍下限
                high: 100, //可猜數(shù)字范圍上限
                guessnum: 0, //猜測的次數(shù)
                guess: undefined //最后一次猜測
            };
            //修改文檔內(nèi)容來顯示該初始狀態(tài)
            display(state);
            if (playagain === true)save(state);
        }
        function save(state) {
            if (!history.pushState) return; //如果pushState()方法沒有定義富腊，則什么也不做

            //將一個保存的狀態(tài)和url關(guān)聯(lián)起來
            var url = "#guess" + state.guessnum;

            history.pushState(state, //要保存的狀態(tài)對象
                "", //狀態(tài)標(biāo)題：當(dāng)前瀏覽器會忽視它
                url); //狀態(tài)URL：對書簽是沒有用的
        }
        //這是onpopstate的事件處理程序与帆，用于恢復(fù)歷史狀態(tài)
        function popState(event) {
            if (event.state) {
                //如果事件有一個狀態(tài)對象簸州，則恢復(fù)該狀態(tài)
                state = event.state; //恢復(fù)歷史狀態(tài)
                display(state); //顯示恢復(fù)的狀態(tài)
            }else{
                history.replaceState(state, "", "#guess" + state.guessnum);
            }
        };
        //每次猜測一個數(shù)字的時候胜嗓，都會調(diào)用此事件處理程序
        //此處理程序用于更新游戲的狀態(tài)伏社、保存游戲狀態(tài)并顯示游戲狀態(tài)
        function handleGuess() {
            //從input字段中獲取用戶猜測的數(shù)字
            var g = parseInt(this.value);
            //如果該值是限定范圍中的一個數(shù)字
            if ((g > state.low) && (g < state.high)) {
                //對應(yīng)的更新狀態(tài)
                if (g < state.n) state.low =g;
                else if (g > state.n) state.high = g;
                state.guess = g;
                state.guessnum++;
                //在瀏覽器歷史記錄中保存新的狀態(tài)
                save(state);
                //根據(jù)用戶猜測情況來修改文檔
                display(state);
            }else{
                //無效的猜測：不保存狀態(tài)
                alert("請輸入大于" + state.low + "和小于" + state.high);
            }
        }
        //修改文檔來顯示游戲當(dāng)前狀態(tài)
        function display(state) {
            //顯示文檔的導(dǎo)航和標(biāo)題
            ui.heading.innerHTML = document.title ="我在想一個" + state.low + "到" + state.high + "之間的數(shù)字短条！";

            //使用一個表格來顯示數(shù)字的取值范圍
            ui.low.style.width = state.low + "%";
            ui.mid.style.width = (state.high-state.low) + "%";
            ui.high.style.width = (100-state.high) + "%";

            //確保input字段是可見的岩四、空的并且是聚焦的
            ui.input.style.visibility = "visible";
            ui.input.value = "";
            ui.input.focus();

            //根據(jù)用戶最近猜測恭朗，設(shè)置提示
            if (state.guess === undefined)
                ui.prompt.innerHTML = "輸入你的猜測：";
            else if (state.guess < state.n)
                ui.prompt.innerHTML = state.guess + "低了屏镊，再猜一次：";
            else if (state.guess > state.n)
                ui.prompt.innerHTML = state.guess + "高了，再猜一次：";
            else {
                //當(dāng)猜對了的時候痰腮，就隱藏input字段并顯示“再玩一次”按鈕
                ui.input.style.visibility = "hidden";
                ui.heading.innerHTML = document.title = state.guess + "正確而芥！";
                ui.prompt.innerHTML = "你贏了 <button onclick='newgame(true)'>再玩一次</button>";
            }
        }
    </script>
</head>
<body >
<header class="header">
    <h1 align="center">八維后臺管理系統(tǒng)</h1>
</header>
<div  style="width: 100%;height: 500px" ng-app="product" ng-controller="productController">
    <div class="nav" style="float: left;width: 20%;height: 100%" align="center">
        <ul class="ul" >
            <li onclick="f1(1)">首頁</li>
            <li onclick="f1(2)">新聞</li>
            <li onclick="f1(3)">查詢</li>
            <li onclick="f1(4)">日程</li>
            <li onclick="f1(5)">游戲</li>
        </ul>
    </div>
    <div style="float: right;width:80%;height:500px;">
        <div style="width:100%;height:500px;display: block" class="cv" id="d1">
            <ul class="ul2">
                <li ng-repeat="item in data">
                    <p>{{item.title}}</p>
                    ![]({{item.img}})
                </li>
            </ul>
        </div>
        <div style="width:100%;height:500px;display: none;" class="cv" id="d2">
            <center>
                <div  class="container" ng-app="product" ng-controller="productController" style="margin-top: 30px" >
                    <!--導(dǎo)航欄-->
                    <nav>
                        <div >
                            <div id="bs-example-navbar-collapse-1" >
                                <div>
                                    <input type="text" ng-model="search" placeholder="產(chǎn)品名稱" style="float: left">
                                    <button type="button" style="background-color: red;float: right" ng-click="AlldelProduct()">
                                        批量刪除
                                    </button>
                                </div>
                            </div>
                        </div>
                    </nav><br />
                    <table border="1 solid" cellpadding="10" cellspacing="0" style="width:100% ">
                        <thead>
                        <tr>
                            <th >
                                <input type="checkbox" ng-model="chk" ng-click="check(chk)">
                            </th>
                            <th ng-click="sortProduct('id')">
                                產(chǎn)品編號
                                <span></span>
                            </th>
                            <th ng-click="sortProduct('name')" style="color: red">
                                產(chǎn)品名稱
                                <span></span>
                            </th>
                            <th ng-click="sortProduct( 'price')">
                                產(chǎn)品價(jià)格
                                <span></span>
                            </th>
                            <th ng-click="sortProduct('kun')">
                                商品庫存<span></span>
                            </th>
                            <th>
                                操作
                                <span></span>
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="item in productList | filter:{ 'name':search} | orderBy:(orderSign+orderColumn) " align="center">
                            <td>
                                <input type="checkbox" ng-model="xuanz" ng-click="xuan(xuanz,item.id)">
                            </td>
                            <td>
                                {{item.id}}
                            </td>
                            <td>
                                {{item.name}}
                            </td>
                            <td>
                                {{item.price | currency:'￥: '}}
                            </td>
                            <td>
                                {{item.kun}}
                            </td>
                            <td>
                                <button ng-click="delProduct(item.name)" style="background-color: orange">刪除</button>
                            </td>

                        </tr>
                        </tbody>
                    </table>
                </div>

            </center>
        </div>
        <div style="width:100%;height:500px;display: none" class="cv" id="d3">
            <div style="margin-top: 30px">
                <input type="text" ng-model="city">
                <button ng-click="searcha()">點(diǎn)擊查詢</button>
                <ul ng-show="show">
                    <li>{{cityName}}</li>
                    <li>{{date}}</li>
                    <li>{{temp}}℃</li>
                </ul>
            </div>
        </div>
        <div style="width:100%;height:500px;display: none" class="cv" id="d4">
            <h2 style="margin-top: 30px">我的日程<span ng-bind="count()"></span></h2>
            <div>
                <input type="text" ng-model="action"><button ng-click="add()">添加</button>
            </div>
            <table>
                <thead>
                <tr>
                    <th>序號</th>
                    <th>日程</th>
                    <th>完成情況</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="item in dataa.items|doFilter:complate">
                    <td>{{$index}}</td>
                    <td>{{item.action}}</td>
                    <td><input type="checkbox" ng-model="item.done"></td>
                </tr>
                </tbody>
            </table>
            <div>顯示全部<input type="checkbox" ng-model="complate"></div>
        </div>
        <div style="width:100%;height:500px;display: none" class="cv" id="d5">
            <span id="heading" style="padding-top: 100px;">我在想一個數(shù)字...</span>
            <table >
                <tr >
                    <td id="low"></td>
                    <td id="mid"></td>
                    <td id="high"></td>
                </tr>
            </table>
            <label id="prompt"></label>
            <input id="input" type="text">
        </div>
    </div>
</div>

</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市膀值，隨后出現(xiàn)的幾起案子棍丐，更是在濱河造成了極大的恐慌误辑，老刑警劉巖，帶你破解...
    沈念sama閱讀 212,454評論 6贊 493
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件歌逢，死亡現(xiàn)場離奇詭異巾钉，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)秘案，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,553評論 3贊 385
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門砰苍，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人阱高，你說我怎么就攤上這事赚导。” “怎么了赤惊？”我有些...
    開封第一講書人閱讀 157,921評論 0贊 348
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵吼旧，是天一觀的道長。 經(jīng)常有香客問我未舟，道長圈暗，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 56,648評論 1贊 284
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任处面，我火速辦了婚禮厂置，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘魂角。我一直安慰自己昵济，他們只是感情好，可當(dāng)我...
    茶點(diǎn)故事閱讀 65,770評論 6贊 386
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布野揪。 她就那樣靜靜地躺著访忿，像睡著了一般。 火紅的嫁衣襯著肌膚如雪斯稳。 梳的紋絲不亂的頭發(fā)上海铆，一...
    開封第一講書人閱讀 49,950評論 1贊 291
  • 城市分裂傳說
    那天，我揣著相機(jī)與錄音挣惰，去河邊找鬼卧斟。 笑死，一個胖子當(dāng)著我的面吹牛憎茂，可吹牛的內(nèi)容都是我干的珍语。 我是一名探鬼主播，決...
    沈念sama閱讀 39,090評論 3贊 410
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼竖幔，長吁一口氣：“原來是場噩夢啊……” “哼板乙！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起拳氢，我...
    開封第一講書人閱讀 37,817評論 0贊 268
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對情侶失蹤募逞，失蹤者是張志新（化名）和其女友劉穎蛋铆，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體放接，經(jīng)...
    沈念sama閱讀 44,275評論 1贊 303
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡刺啦，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,592評論 2贊 327
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了透乾。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片洪燥。...
    茶點(diǎn)故事閱讀 38,724評論 1贊 341
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖乳乌，靈堂內(nèi)的尸體忽然破棺而出捧韵，到底是詐尸還是另有隱情，我是刑警寧澤汉操，帶...
    沈念sama閱讀 34,409評論 4贊 333
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布再来，位于F島的核電站，受9級特大地震影響磷瘤，放射性物質(zhì)發(fā)生泄漏芒篷。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,052評論 3贊 316
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一采缚、第九天 我趴在偏房一處隱蔽的房頂上張望针炉。 院中可真熱鬧，春花似錦扳抽、人聲如沸篡帕。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,815評論 0贊 21
  • 一樁弒父案贸呢，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽镰烧。三九已至，卻和暖如春楞陷，著一層夾襖步出監(jiān)牢的瞬間怔鳖，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,043評論 1贊 266
  • 情欲美人皮
    我被黑心中介騙來泰國打工固蛾， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留结执，地道東北人。 一個月前我還...
    沈念sama閱讀 46,503評論 2贊 361
  • 代替公主和親
    正文 我出身青樓艾凯，卻偏偏與公主長得像昌犹，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子览芳，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,627評論 2贊 350

推薦閱讀更多精彩內(nèi)容