AI 助理
备案控制台
开发者社区 云计算 文章 正文

A2021-A2022年度总结（项目内容四）（三）

2023-02-17 71
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： A2021-A2022年度总结（项目内容四） 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>数组Array</title>
    <style type="text/css">
      *{
        font-size: 40px;
        background-color: #CCFFFF;
      }
      hr{
        border: 2px solid;
      }
    </style>
    <script type="text/javascript">
      var arr1=new Array(3);
      document.write(arr1.length)
      var arr2=new Array("aa","bb","cc","dd","ee","ff","gg","hh");
      for (var i=0;i<arr2.length;i++) {
        document.write(arr2[i]+" ");
      }
      document.write("<br />");
      document.write("<hr />");
      arr2.sort();
      for (var i = 0; i <arr2.length; i++) {
        document.write(arr2[i]+" ")
      }
      document.write("<br />");
      document.write("<hr />")
    </script>
  </head>
  <body>
    <script type="text/javascript">
      var arr1=new Array(3);
      document.write(arr1.length)
      var arr2=new Array("aa","bb","cc","dd","ee","ff","gg","hh");
      for (var i=0;i<arr2.length;i++) {
        document.write(arr2[i]+" ");
      }
      document.write("<br />")
      document.write("<hr />")
      arr2.sort();
      for (var i = 0; i <arr2.length; i++) {
        document.write(arr2[i]+" ")
      }
      document.write("<br />")
      document.write("<hr />")
    </script>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> ARRAY数组方法应用</title>
    <style type="text/css">
      *{
        font-size: 40px;
        background-color: #CCFFFF;
      }
      hr{
        border: 2px solid;
      }
    </style>
  </head>
  <body>
    <p class="we">array数组方法应用</p>
    <script type="text/javascript">
      var a1=new  Array("1a","2b","3c","4d","5e","6ff");
      var a2=new  Array("a1","b1","c1","d1");
      var s=a1.toString();
      document.write(s+"<br/>");
      var s1=a1.join("+","<br/>");
      document.write(s+"<br/>");
      var s2 =a1.shift()
      document.write(s2+"<br/>");
      var s3=a1.unshift("m","n");
      document.write(s3+"<br/>");
      var s4=a1.pop();
      document.write(s4+"<br/>");
      var s5=a1.push("m","n");
      document.write(s5+"<br/>");
      var s6 =a1.concat(a2)
      document.write(s6+"<br/>");
      var s7=a1.slice(2,3);
      document.write(s7+"<br/>");
      var s8=a1.splice(2,4);
      document.write(s8+"<br/>");
      var s9=a1.sort( );
      document.write(s9+"<br/>");
      var s10=a1.reverse("m","n");
      document.write(s10+"<br/>");
      var s11=a2.reverse("m","n");
      document.write(s11+"<br />");
    </script>
    <script type="text/javascript">
    var a3=new  Array("11a","22b","33c","44d","55e","66ff","77gg");
    var s12=a3.splice(2,3,'gooleg','fasebooks');
    document.write(a122+"<br />");
    </script>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      .yu{
        color: red;
        font-family: "微软雅黑";
        font-size: 40px;
      }
    </style>
  </head>
  <body>
    <p class="yu">Date对象</p>
    <script type="text/javascript">
      var myDate=new Date();
      Date();
      var a = myDate.getYear();
      var a1=myDate.getFullYear();
      var a2 = myDate.getMonth();
      var a3 = myDate.getDate();
      var a4 = myDate.getDay();
      var a5 = myDate.getTime();
      var a6 = myDate.getHours();
      var a7 = myDate.getMinutes();
      var a8 = myDate.getSeconds();
      var a9 = myDate.getMilliseconds();
      var a10 = myDate.toLocaleDateString();
      var a11 = myDate.toISOString();
      var a12=myDate.toGMTString();
    document.write(a+"<br />");
    document.write(a1+"<br />");
    document.write(a2+"<br />");
    document.write(a3+"<br />");
    document.write(a4+"<br />");
    document.write(a5+"<br />");
    document.write(a6+"<br />");
    document.write(a7+"<br />");
    document.write(a8+"<br />");
    document.write(a9+"<br />");
    document.write(a10+"<br />");
    document.write(a11+"<br />");
    document.write(a12+"<br />");
    </script>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>本地存储</title>
  </head>
  <body onload="checkCookie()">
    <script>
function setCookie(cname,cvalue,exdays){
  var d = new Date();
  d.setTime(d.getTime()+(exdays*24*60*60*1000));
  var expires = "expires="+d.toGMTString();
  document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname){
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i=0; i<ca.length; i++) {
    var c = ca[i].trim();
    if (c.indexOf(name)==0) 
    return c.substring(name.length,c.length);
  }
  return "";
}
function getId(id)   //封装
{return document.getElementById(id)}
//var search=getId("search");
function delCookie() {
        var exp = new Date();
        exp.setTime(exp.getTime() - 1); 
        document.cookie = "username=;expires=" + exp.toGMTString();
        getId('user').innerHTML = '请输入您的账号 ：';
        getId('in').style.display = "inline-block";
        getId('log').style.display = "inline-block";
        getId('in').value='';
        getId('out').style.display = "none";
      }
function login() {
        none = getId('in').value;
        if(name != "" && name != null)
          setCookie("username",name,30);
        alert(getCookie("username"));
        getId('user').innerHTML = name + '登录成功..欢迎光临！';
        getId('in').style.display = "none";
        getId('log').style.display = "none";
        getId('out').style.display = "block";
      }
function checkCookie(){
//  var user=getCookie("username");
//  if (user!=""){
//    alert("Welcome again " + user);
//  }
//  else {
//    user = prompt("Please enter your name:","");
//    if (user!="" && user!=null){
//      setCookie("username",user,30);
//    }
//  }
  var user = getId('user');
        var inName = getId('in');
        var name = getCookie("username");
        if(name != "") {
          user.innerHTML = "欢迎光临：" + name; 
          inName.style.display = "none";
          getId('log').style.display = "none";
        } else {
          getId('out').style.display = "none";
          user.innerHTML = "请输入您的账号 ：";
//          name = inName.value;
//          if(name != "" && name != null)
//            setCookie("username", name, 30);
        }
}
</script>
<span id="user"></span>
    <input id="in" />
    <span id="log" onclick="login()">登录</span>
    <span id="out" onclick="delCookie()">退出</span></body>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>注册</title>
    <style>
      #login {
        width: 560px;
        height: 350px;
        border: 1px solid #ccc;
        position: absolute; 
        background: #fff; 
      }
      #login  form{margin: 20px 5px 20px 90px;}
      #login h2 {
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 16px;
        letter-spacing: 1px;
        color: #fff;
        background: #044599;
        margin: 0;
        padding: 0;
        border-bottom: 1px solid #ccc;
        margin: 0 0 20px 0;
      } 
      #login div 
      {
        font-size: 14px;
        color: #666;
        padding: 5px 0;
        text-align: left;
      }
      #login input.text  {
        width: 200px;
        height: 25px;
        border: 1px solid #ccc;
        background: #00CED1;
        font-size: 14px;
      } 
      .pc{ 
            margin:0 8px; 
            color: #00BFFF;  
        }
      #login input.submit {
        width: 107px;
        height: 40px;
       background: darksalmon;
        border: none;
        cursor: pointer;
        color: #FFFFFF;
        font-size: 22px;
        font-family: "黑体";
        margin: 20px 120px;
        border-radius: 6px;
      }
    </style>
  </head>
  <body>
    <div id="login">  <h2> 老师管理 注 册界面</h2>
       <form name="regform" action="123.html"  >
      <div>teacher用户帐号：<input type="text" id="user" name="user" autofocus   class="text" /><span id="userInfo" class="pc">*</span></div>
      <div>teacher用户密码：<input type="password" id="pass" name="pass"   class="text" /><span id="passInfo"  class="pc">* </span></div>
      <div>确认密码：<input type="password" name="rpass"   class="text" /><span id="rpassInfo"  class="pc">* </span></div>
            <div>个人邮箱：<input id="email" type="email" name="email"   class="text"/><span id="emailInfo"  class="pc">*</span> </div>
            <div>联系电话：<input id="tel" type="tel"  name="tel"   class="text"/><span id="telInfo"  class="pc">*</span></div>
           <input type="button" name="sub" class="submit"   value="注册" /> 
           <a href="成绩管理.html"><h1>注册成功</h1></a>
       </form>
    </div>
  </body>
  <script>
  //regform.sub.onclickregform.onsubmit
  //var flag=0;
    function getId(id){return document.getElementById(id);}
    var userInfo=getId('userInfo');
      var passInfo=getId('passInfo');
     var rpassInfo=getId('rpassInfo');
      var emailInfo=getId('emailInfo');
       var telInfo=getId('telInfo');
    function formCheck(o,oInfo,rule,info)
        {
           if(rule.test(o.value)){ 
               oInfo.innerHTML='&radic;';
               oInfo.style.color='#008000';
        // flag+=1;
           }
           else   
              {oInfo.innerHTML=info;  
       }
        } 
     var uname=regform.user;uname.focus();
        uname.onblur=function(){formCheck(this,userInfo,/^[0-9a-zA-Z]\w{4,16}$/,'5-16数字或字母组成');} 
         var pass=regform.pass;pass.focus();
         pass.onblur=function(){formCheck(this,passInfo,/^\w{6,12}$/,'6位数字/字母/英文符号');}
       var rpass=regform.rpass;rpass.focus();
       rpass.onblur=function()  {
         formCheck(this,rpassInfo,/^\w{6,12}$/,'6位数字/字母/英文符号');
        if(pass.value!=rpass.value)
          {rpassInfo.innerHTML='两次密码不一致！';
          regform.sub.disabled=true;
      }
          else 
          { regform.sub.disabled=false; 
      //flag+=1;
          }
       }
        email=regform.email;email.focus();
         email.onblur=function(){formCheck(this,emailInfo,/^\w+@\w+\.\w+$/,'邮箱格式有误');}
        tel=regform.tel;tel.focus();
        tel.onblur=function(){formCheck(this,telInfo,/^1[358]\d{9}$/,'电话号码格式非法');} 
    //提交
  regform.sub.onclick=function () {
      alert(email.focus());
    //if (flag==6) {
      regform.submit();
    //}
  };
    window.onload = function() {
      var login = document.getElementById('login') ;
      var top = (document.documentElement.clientHeight - 350) / 2;
      var left = (document.documentElement.clientWidth - 560) / 2;
      login.style['top'] = top + 'px';
      login.style['left'] = left + 'px';
      window.onresize = function() {
        var top = (document.documentElement.clientHeight - 350) / 2;
        var left = (document.documentElement.clientWidth - 560) / 2;
        login.style['top'] = top + 'px';
        login.style['left'] = left + 'px';
      }
    }
  </script>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>简易选项卡</title>
    <style>
        body,ul,li{margin:0;padding:0;}
        body{font:12px/1.5 Tahoma;}
        #outer{width:450px;margin:10px auto;}
        #tab{overflow:hidden;zoom:1;background:#000;border:1px solid #000;}
        #tab li{float:left;color:#fff;height:30px;cursor:pointer;line-height:30px;list-style-type:none;padding:0 20px;}
        #tab li.current{color:#000;background:#ccc;}
        #content{border:1px solid #000;border-top-width:0;}
        #content ul{line-height:25px;display:none;margin:0 30px;padding:10px 0;}
    </style>
    <script>
        window.onload = function ()
        {
            var oLi = document.getElementById("tab").getElementsByTagName("li");
            var oUl = document.getElementById("content").getElementsByTagName("ul");
            for(var i = 0; i < oLi.length; i++)
            {
                oLi[i].index = i;
                oLi[i].onmouseover = function ()
                {
                    for(var n = 0; n < oLi.length; n++) oLi[n].className="";
                    this.className = "current";
                    for(var n = 0; n < oUl.length; n++) oUl[n].style.display = "none";
                    oUl[this.index].style.display = "block"
                }
            }
        }
    </script>
</head>
<body>
<div id="outer">
    <ul id="tab">
        <li class="current">第一课</li>
        <li>第二课</li>
        <li>第三课</li>
    </ul>
    <div id="content">
        <ul style="display:block;">
            <li><a href="A-1.html">网页特效原理分析</a></li>
            <li>响应用户操作</li>
            <li>提示框效果</li>
            <li>事件驱动</li>
            <li>元素属性操作</li>
            <li>动手编写第一个JS特效</li>
            <li>引入函数</li>
            <li>网页换肤效果</li>
            <li>展开/收缩播放列表效果</li>
        </ul>
        <ul>
            <li>改变网页背景颜色</li>
            <li>函数传参</li>
            <li>高重用性函数的编写</li>
            <li>126邮箱全选效果</li>
            <li>循环及遍历操作</li>
            <li>调试器的简单使用</li>
            <li>典型循环的构成</li>
            <li>for循环配合if判断</li>
            <li>className的使用</li>
            <li>innerHTML的使用</li>
            <li>戛纳印象效果</li>
            <li>数组</li>
            <li>字符串连接</li>
        </ul>
        <ul>
            <li>JavaScript组成：ECMAScript、DOM、BOM，JavaScript兼容性来源</li>
            <li>JavaScript出现的位置、优缺点</li>
            <li>变量、类型、typeof、数据类型转换、变量作用域</li>
            <li>闭包：什么是闭包、简单应用、闭包缺点</li>
            <li>运算符：算术、赋值、关系、逻辑、其他运算符</li>
            <li>程序流程控制：判断、循环、跳出</li>
            <li>命名规范：命名规范及必要性、匈牙利命名法</li>
            <li>函数详解：函数构成、调用、事件、传参数、可变参、返回值</li>
            <li>定时器的使用：setInterval、setTimeout</li>
            <li>定时器应用：站长站导航效果</li>
            <li>定时器应用：自动播放的选项卡</li>
            <li>定时器应用：数码时钟</li>
            <li>程序调试方法</li>
        </ul>
    </div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      .A{
        color: royalblue;
        font-size: 40px;
      }
    </style>
  </head>
  <body>
    <p class="A">动态表格的删除</p>
    <table id="my" border="2" class="A">
      <tr><td>行一</td>
        <td>单元一</td><td><input type="button" value="删除" onclick="de(this)"/></td></tr>
      <tr><td>行2</td><td>单元一</td><td><input type="button" value="删除" onclick="de(this)"/></td></tr>
      <tr><td>行3</td><td>单元一</td><td><input type="button" value="删除" onclick="de(this)"/></td></tr>
      <tr><td>行4</td><td>单元一</td><td><input type="button" value="删除" onclick="de(this)"/></td></tr>
      <tr><td>行5</td><td>单元一</td><td><input type="button" value="删除" onclick="de(this)"/></td></tr>
      <tr><td>行6</td><td>单元一</td><td><input type="button" value="删除" onclick="de(this)"/></td></tr>
      <!--
              作者：2571507538@qq.com
              时间：2021-07-23
              描述：脚本实现动态
            -->
      <script>
        function de(r){
          var i=r.parentNode.parentNode.rowIndex;
          document.getElementById('my').deleteRow(i);
        }
      </script>
    </table>
  </body>
</html>

在学习的路上多反思反思。

t75yjb52rsccc
目录
相关文章
钊气蓬勃.
|
C++
组合计数及补充
组合计数及补充
钊气蓬勃.
68 0
YiYa_咿呀
|
机器学习/深度学习
【知识补充】
【知识补充】
YiYa_咿呀
47 0
t75yjb52rsccc
A2021-A2022年度总结项目内容。（一）
A2021-A2022年度总结项目内容。（一）
t75yjb52rsccc
56 0
.昭阳.
|
前端开发
第一个网页总结暨前端基础知识补充
一，css基本引入 二，字体引入样式 三，类名约定 四，文字相关 五，相关技巧 分竖线 六，案例遇到问题及解决方法 七，文本格式化标签 八，meta标签 九，表格 十，input表单 十 一，dl标签 十二，css相关补充 背景， 透明图像，opacity![](https://img-blog.csdnimg.cn/e6756a58e45c4b94aac154aeb76148c6.png) 在搜索框内添加图标 css3 边框-阴影，圆角 文本溢出显示，换行 css3 2D转换 transition过渡 Bootstrap4 颜色引用 Bootstrap4 进度条
.昭阳.
90 0
第一个网页总结暨前端基础知识补充
半只牛马
|
编译器 程序员 C语言
C++入门（内容补充）
之前给大家更新了一系列关于C++的基础语法，那么今天小编再给大家进行部分内容的补充，然后我们马上就会进入类有关内容的介绍。
半只牛马
73 0
t75yjb52rsccc
|
前端开发 JavaScript
A2021-2022年度总结（项目内容五）
A2021-2022年度总结（项目内容五）
t75yjb52rsccc
94 0
A2021-2022年度总结（项目内容五）
t75yjb52rsccc
A2021-A2022年度总结项目内容（三）（一）
A2021-A2022年度总结项目内容（三）
t75yjb52rsccc
69 0
t75yjb52rsccc
A2021-A2022年度总结项目内容（三）（二）
A2021-A2022年度总结项目内容（三）
t75yjb52rsccc
96 0
t75yjb52rsccc
A2021-A2022年度总结项目内容（三）（四）
A2021-A2022年度总结项目内容（三）
t75yjb52rsccc
85 0
t75yjb52rsccc
A2021-A2022年度总结（项目内容四）（二）
A2021-A2022年度总结（项目内容四）
t75yjb52rsccc
67 0