angularjs综合题
来源：互联网 发布：淘宝滑动验证码识别 编辑：程序博客网 时间：2024/05/22 05:16
<!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> <img ng-src="{{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" > <!--导航栏--> <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>阅读全文
0 0
- angularjs综合题
- angularJS综合题
- angularjs综合
- AngularJs的综合应用
- AngularJs路由综合
- AngularJs购物车添加订单综合
- Angularjs+路由表格的增删改查综合
- [求职面试][综合题]综合题目汇总
- 笔试题(综合
- pku1899几何综合题
- 程序员文史综合题
- 程序员文史综合题
- 数据库综合题复习题
- 算法题--综合篇
- 循环综合题分析
- 综合题复习
- 闭包 && 综合题
- 数据库综合题
- LeetCode 542. 01 Matrix
- 第一章绪论
- 人工智能中的偏序规划-基于STRIPS语言
- 在一个Android项目里面有两个可运行文件,如何实现调用方式
- C++ 重载运算符 友元函数作为重载运算符 重载运算符+
- angularjs综合题
- 2-变量和基本类型
- 将Eclipse代码导入到AndroidStudio的两种方式
- 数据字典
- Gitbook/Markdown中插入复杂（合并单元格）的表格
- vs2010 Firebird:3.0源码编译步骤：（以64位举例）
- NoSQL与MySQL关系型数据库
- 异步加载数据加多条目加载
- cocoscreator--snake游戏总结
