<!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='-'; //为空时正序 为负号时倒序
$scope.chk=false;
$scope.xuanz=false;
$scope.check=function (val) {
if (val){
$scope.xuanz=true;
}else{
$scope.xuanz=false;
}
}
$scope.sortProduct=function(sortColumn){ //点击列标题排序事件
$scope.orderColumn=sortColumn;//觉得按照那一列进行排序
if($scope.orderSign=="-"){
$scope.orderSign="";
}else{
$scope.orderSign='-';
}
};
$scope.AlldelProduct = function(name){
if(confirm("是否删除所有商品") ){
$scope.productList.length=0;
}
}
//删除产品
$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; //处理历史记录相关事件
var state, ui; //全局变量，在newgame()方法中会对其初始化
function newgame(playagain) {
ui = {
heading: null, //文档最上面的<h1>元素
prompt: null, //要求用户输入一个猜测数字
input: null, //用户输入猜测数字的地方
low: null, //可视化的三个表格单元格
mid: null, //猜测的数字范围
high: null,
};
//查询这些元素中每个元素的id
for(var id in ui) ui[id] = document.getElementById(id);
//给input字段定义一个事件处理程序函数
ui.input.onchange = handleGuess;
//生成一个随机的数字并初始化游戏状态
state = {
n: Math.floor(99 * Math.random())+1, //整数： 0 < n <100
low: 0, //可猜数字范围下限
high: 100, //可猜数字范围上限
guessnum: 0, //猜测的次数
guess: undefined //最后一次猜测
};
//修改文档内容来显示该初始状态
display(state);
if (playagain === true)save(state);
}
function save(state) {
if (!history.pushState) return; //如果pushState()方法没有定义，则什么也不做
//将一个保存的状态和url关联起来
var url = "#guess" + state.guessnum;
history.pushState(state, //要保存的状态对象
"", //状态标题：当前浏览器会忽视它
url); //状态URL：对书签是没有用的
}
//这是onpopstate的事件处理程序，用于恢复历史状态
function popState(event) {
if (event.state) {
//如果事件有一个状态对象，则恢复该状态
state = event.state; //恢复历史状态
display(state); //显示恢复的状态
}else{
history.replaceState(state, "", "#guess" + state.guessnum);
}
};
//每次猜测一个数字的时候，都会调用此事件处理程序
//此处理程序用于更新游戏的状态、保存游戏状态并显示游戏状态
function handleGuess() {
//从input字段中获取用户猜测的数字
var g = parseInt(this.value);
//如果该值是限定范围中的一个数字
if ((g > state.low) && (g < state.high)) {
//对应的更新状态
if (g < state.n) state.low =g;
else if (g > state.n) state.high = g;
state.guess = g;
state.guessnum++;
//在浏览器历史记录中保存新的状态
save(state);
//根据用户猜测情况来修改文档
display(state);
}else{
//无效的猜测：不保存状态
alert("请输入大于" + state.low + "和小于" + state.high);
}
}
//修改文档来显示游戏当前状态
function display(state) {
//显示文档的导航和标题
ui.heading.innerHTML = document.title ="我在想一个" + state.low + "到" + state.high + "之间的数字！";
//使用一个表格来显示数字的取值范围
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();
//根据用户最近猜测，设置提示
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 {
//当猜对了的时候，就隐藏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">八维后台管理系统</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>
</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" >
<!--导航栏-->
<nav>
<div >
<div id="bs-example-navbar-collapse-1" >
<div>
<input type="text" ng-model="search" placeholder="产品名称" 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')">
产品编号
<span></span>
</th>
<th ng-click="sortProduct('name')" style="color: red">
产品名称
<span></span>
</th>
<th ng-click="sortProduct( 'price')">
产品价格
<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()">点击查询</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;">我在想一个数字...</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>
JS-路由实现功能
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- (一) react-router-dom 安装 React Router被拆分成下面几个包： react-rout...
- 前言 最近练习Vue，看到官方文档中的嵌套路由，不做不知道，实在是太坑了，网上资料demo少之又少，然后自己就做了...
