HTML route 登录+游戏+修改密码

来源：互联网发布：js document 创建标签编辑：程序博客网时间：2024/06/05 12:08

<!DOCTYPE html>
<html lang="en">

   <head>
       <meta charset="UTF-8">
       <title>路由</title>
       <style>
           *{margin:0px auto;}
           li {
               list-style-type: none;
               border: 1px solid deepskyblue;
               text-align: center;
               height: 60px;
           }
           a{line-height: 60px;}
           #navigator{margin-top: 70px;}
           center{margin-top: 10px;}
       </style>
       <script type="text/javascript" src="js/angular.min.js"></script>
       
       <script src="https://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
       <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
   </head>

   <body ng-app='routeDemo'>
       
       <div style="width: 600px;height: 400px;border: 1px solid black;">
           <div id="navigator" style="width: 200px;display: inline-block;height: 400px;float: left">
               
               <ul>
                   <li>
                       <a href="#/dl">登录</a>
                   </li>
                   <li>
                       <a href="#/jm">主界面</a>
                   </li>
                   <li>
                       <a href="#/yx">游戏</a>
                   </li>
                   <li>
                       <a href="#/mm">更改密码</a>
                   </li>
               </ul>
           </div>
           
           <div style="width: 300px;display: inline-block;height: 246px;float: left;border: 1px solid black;margin-top: 70px;margin-left: 40px;">
               <div ng-view=""></div>
           </div>
       </div>
   </body>
   <script type="text/ng-template" id="index.dl.html">
       <div style="width: 200px;height: 150px;border: 1px solid black;margin-top: 45px;">
           <center>请先输入账号与密码</center>
           <center>账号:<input type="text" id="zh"/><br /></center>
           <center>密码:<input type="text" id="mm"/><br /></center>
           <center><button onclick="qd()">确定</button></center>
       </div>
   </script>
   
   <script>
       var zhs=123;
       var mms=123;
       function qd(){
           var zh = document.getElementById("zh").value;
           var mm = document.getElementById("mm").value;
           if(zh==zhs&&mm==mms){
               //alert("账号与密码正确");
               var cf = confirm("账号与密码正确,是否确定登录?");
               if(cf){
                   alert("登录成功,点击确定将进行页面跳转");
                   window.location.href='http://www.baidu.com/';
               }else{
                   document.getElementById("zh").value="";
                   document.getElementById("mm").value="";
                   alert("已取消登录,自动清空文本域");
               }
           }else if(zh==""||mm==""||zh==null||mm==null){
               alert("账号或者密码不能为空");
           }else{
               alert("账号或者密码错误,请重新输入");
           }
       }
       function qd1(){
           var zh = document.getElementById("zh1").value;
           var mm = document.getElementById("mm1").value;
           if(zh==zhs&&mm==mms){
               document.getElementById("zh1").value="";
               document.getElementById("mm1").value="";
               var xinmm = prompt("请输入新的密码");
               if(xinmm!=null){
                   mms = xinmm;
                   alert("您现在的密码是:"+mms);
               }

           }else if(zh==""||mm==""||zh==null||mm==null){
               alert("账号或者密码不能为空");
           }else{
               alert("账号或者密码错误,请重新输入");
           }
       }
   </script>
   <script type="text/ng-template" id="index.jm.html">
       <h1><img src="img/u=4085929887,1847668498&fm=27&gp=0.jpg" width="300px" height="246px"/></h1>
   </script>
   <script type="text/ng-template" id="index.yx.html">
       <div style="margin-top: 70px;">
           <center>一千以内</center>
           <center><input type="number" id="sz" placeholder="请输入一个数字"/><button onclick="szqd()">确定</button></center>
           <center><button onclick="gb()">改变结果数字</button></center>
       </div>
   </script>
   
   <script>
       var i = 1;
       var j =200;
       var jj;
       function gb(){
               jj = (Math.random()*(1000-0)+0).toFixed(0);
               j=jj;
               alert("结果数字已被改变");
               i = 1;
           }

       function szqd(){
           var sz = document.getElementById("sz").value;

           if(sz==j){
               alert("您在第"+i+"次猜中了结果");
               i=1;
           }else if(sz>j){
               alert("您猜的数字太大了");
               i++;
           }else if(sz<j){
               alert("您猜的数字太小了");
               i++;
           }

       }

   </script>
   <script type="text/ng-template" id="index.mm.html">
       <div>
           <div style="width: 200px;height: 150px;border: 1px solid black;margin-top: 45px;">
           <center id="jiumm">请先输入旧的账号与密码</center>
           <center>账号:<input type="text" id="zh1"/><br /></center>
           <center>密码:<input type="text" id="mm1"/><br /></center>
           <center><button onclick="qd1()">确定</button></center>
       </div>
       </div>
   </script>
   <script type="text/javascript">
       angular.module('routeDemo', ['ngRoute'])
           .controller('HomeController', function($scope, $route) {
               $scope.$route = $route;
           })
           .controller('WomanController', function($scope, $route) {
               $scope.$route = $route;
           })
           .controller('WomanController', function($scope, $route) {
               $scope.$route = $route;
           })
           .controller('ManController', function($scope, $route) {
               $scope.$route = $route;
           })
           .controller('LifeController', function($scope, $route) {
               $scope.$route = $route;
           })
           .controller('CookController', function($scope, $route) {
               $scope.$route = $route;
           })

           //配置$routeProvider用来定义路由规则
           //$routeProvider为我们提供了when（path，object）& other(object)函数按顺序定义所有路由，函数包含两个参数：
           //@param1:url或者url正则规则
           //@param2：路由配置对象
           .config(function($routeProvider) {
               $routeProvider.
               when('/dl', {
                   //templateURL：插入ng-view的HTML模板文件
                   templateUrl: 'index.dl.html',
                   controller: 'HomeController'

               }).
               when('/jm', {
                   templateUrl: 'index.jm.html',
                   controller: 'WomanController'
               }).
               when('/yx', {
                   templateUrl: 'index.yx.html',
                   controller: 'ManController'
               }).
               when('/mm', {
                   templateUrl: 'index.mm.html',
                   controller: 'LifeController'
               })
           })
   </script>

</html>

阅读全文

0 0