AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2023-02-17 106
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： A2021-A2022年度总结（项目内容四）

JavaScript你会多少？

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <style  type="text/css">
      .ty{
        color: darkorchid;
        font-size: 30px;
      }
    </style>
    <title></title>
    <div id="test" onclick="test()"><span class="ty"> package readingrandwriter;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.io.OutputStreamWriter;
public class CopeFile {
  public static void main(String[] args) throws IOException {
  //创建字节输入
    FileInputStream fis= new   FileInputStream("C:\\Users\\MZFAITHDREAM\\Desktop\\Javaday1_9.zip");
    //创建字节输出  
    FileOutputStream fos =new  FileOutputStream("D:\\Day");
  //字符输入
    InputStreamReader isr=new    InputStreamReader(fis,"utf-8");
  //字符输出
    OutputStreamWriter osr=new   OutputStreamWriter(fos,"utf-8");
  //创建一个数组去放入取到的数据
    char[] cr=new char[1024];
    int num=0;
  //while
    while((num=isr.read(cr))!=-1) {
      //reading
      osr.write( cr,0,num);
    }
    isr.close();
    osr.close();
  }
}
天行健，橘子椅子前不息兴旺里路.自强不息</span></div>
  </head>
  <body>
    <script type="text/javascript">
      function test(){
        var t=document.getElementById('test');
        alert(t.innerHTML);
        alert(t.innerText);
        alert(t.outerHTML);
        alert(t.outerText);
        alert(t.offsetHeight);
        alert(t.length);
        alert(t.offsetWidth);
      }
      test();
    </script>
  </body>
</html>

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style class="  ">
      .pstyle{
      }
    </style>
  </head>
  <body>
  <div>
    <hr>
    <hr>
    <hr>
    <hr>
    <hr>
    <hr>
  </div>
    <script>
      var hrl=document.createElement("hr");
      document.body.appendChild(hrl);
      var hrcolor=document.createAttribute("color");
      hrcolor.value="back";
      //hrcolor.value"red";
      hrl.setAttributeNode(hrcolor);
      var hrl=document.createElement("hr");
      document.body.appendChild(hrl);
      var hrcolor=document.createAttribute("color");
      hrcolor.value="red";
      //hrcolor.value"red";
      hrl.setAttributeNode(hrcolor);
      var hrl=document.createElement("hr");
      document.body.appendChild(hrl);
      var hrcolor=document.createAttribute("color");
      hrcolor.value="yellow";
            var hrl=document.createElement("hr");
            document.body.appendChild(hrl);
            var hrcolor=document.createAttribute("color");
            hrcolor.value="back";
            //hrcolor.value"red";
            hrl.setAttributeNode(hrcolor);
            var hrl=document.createElement("hr");
            document.body.appendChild(hrl);
            var hrcolor=document.createAttribute("color");
            hrcolor.value="red";
            //hrcolor.value"red";
            hrl.setAttributeNode(hrcolor);
            var hrl=document.createElement("hr");
            document.body.appendChild(hrl);
            var hrcolor=document.createAttribute("color");
            hrcolor.value="red";
            var hrl=document.createElement("hr");
            document.body.appendChild(hrl);
            var hrcolor=document.createAttribute("color");
            hrcolor.value="back";
            //hrcolor.value"red";
            hrl.setAttributeNode(hrcolor);
            var hrl=document.createElement("hr");
            document.body.appendChild(hrl);
            var hrcolor=document.createAttribute("color");
            hrcolor.value="red";
            //hrcolor.value"red";
            var hrl=document.createElement("hr");
            document.body.appendChild(hrl);
            var hrcolor=document.createAttribute("color");
            hrcolor.value="back";
            //hrcolor.value"red";
            hrl.setAttributeNode(hrcolor);
            var hrl=document.createElement("hr");
            document.body.appendChild(hrl);
            var hrcolor=document.createAttribute("color");
            hrcolor.value="red";
            //hrcolor.value"red";
            hrl.setAttributeNode(hrcolor);
            var hrl=document.createElement("hr");
            document.body.appendChild(hrl);
            var hrcolor=document.createAttribute("color");
            hrcolor.value="red";
            var hrl=document.createElement("hr");
            document.body.appendChild(hrl);
            var hrcolor=document.createAttribute("color");
            hrcolor.value="back";
            //hrcolor.value"red";
            hrl.setAttributeNode(hrcolor);
            var hrl=document.createElement("hr");
            document.body.appendChild(hrl);
            var hrcolor=document.createAttribute("color");
            hrcolor.value="red";
            //hrcolor.value"red";
            hrl.setAttributeNode(hrcolor);
            var hrl=document.createElement("hr");
            document.body.appendChild(hrl);
            var hrcolor=document.createAttribute("color");
            hrcolor.value="red";
            hrl.setAttributeNode(hrcolor);
            var hrl=document.createElement("hr");
            document.body.appendChild(hrl);
            var hrcolor=document.createAttribute("color");
            hrcolor.value="red";
    </script>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>2021年倒计时</title>
    <style type="text/css">
      .rty{
        color: red;
      }
      .tyu{
        color: #C71585;
      }
    </style>
  </head>
  <body>
    <h1 id="res"></h1>
    <script type="text/javascript" class="rty">
      function test(year,month,day){
        var end =new Date(year,month-1,day);
        var leftTime=end.getTime()-Date.now();
        var day  =Math.floor(leftTime/1000/60/60/24);
        var h =Math.floor(leftTime/1000/60/60%24);
        var  m =Math.floor(leftTime/1000/60%60);
        var s =Math.floor(leftTime/1000/60);
        var str="距2021年结束还有"+day+"天"+h+"小时"+m+"分钟"+s+"秒";
      res.innerHTML=str 
      }
      setInterval("test(2021,12,31)",1000);
    </script>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      .A{
        color: #00BFFF;
        font-size: 64PX;
      }
      .B{
        color: deeppink;
        font-size: 34px;
      }
      .qw{
        height: 500px;
        width: 900px;
      }
    </style>
  </head>
  <body>
    <p class="A">BOM 与 ROM</p>
    <h2 class="A">BOM是浏览器对象模型，DOM是文档对象模型，前者是对浏览器本身进行操作，而后者是对浏览器（可看成容器）内的内容进行操作 </h2><br />
    <h3 class="B">什么是BOM
BOM是browser object model的缩写，简称浏览器对象模型
BOM提供了独立于内容而与浏览器窗口进行交互的对象
由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C
BOM最初是Netscape浏览器标准的一部分
在BOM章节中你将学到什么
BOM教程中，同学们将学到与浏览器窗口交互的一些对象，例如可以移动，调整浏览器大小的window对象，可以用于导航的location对象与history对象，可以获取浏览器，操作系统与用户屏幕信息的navigator与screen对象，可以使用document作为访问HTML文档的入口，管理框架的frames对象等
BOM结构图
window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的，也可以称为window的子对象
由于window是顶层对象，因此调用它的子对象时可以不显示的指明window对象，例如下面两行代码是一样的：
示例
1
2
document.write("www.dreamdu.com");
window.document.write(<a href="http://www.dreamdu.com">www.dreamdu.com</a>);
javascript中的BOM和DOM什么区别？
这是浏览器运行时中的两个不同的概念。
BOM 浏览器对象模型
提供了独立于内容而与浏览器窗口进行交互的对象。描述了与浏览器进行交互的方法和接口，可以对浏览器窗口进行访问和操作，譬如可以弹出新的窗口，改变状态栏中的文本，对Cookie的支持，IE还扩展了BOM，加入了ActiveXObject类，可以通过js脚本实例化ActiveX对象等等）
DOM 文档对象模型
DOM是针对XML的基于树的API。描述了处理网页内容的方法和接口，是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档。
DOM本身是与语言无关的API，它并不与Java，JavaScript或其他语言绑定。</h3>
<img src="img/Bom/Bom.png" class="qw" />
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>autoScroll</title>
</head>
<style>
    .parent {
        width: 900px;
        height: 1000px;
        margin: 0 auto;
        background:  #00CED1;
        overflow-y: scroll;
    }
    /*设置的子盒子高度大于父盒子，产生溢出效果*/
    .child {
        height: auto;
    }
    .child li {
      font-size:40px;
        height: 500px;
        width: 600px;
        margin: 12px 0;
        background:   #044599;
    }
</style>
<body>
    <div id="parent" class="parent">
        <div id="child1" class="child">
          <li><img src="../img/teacher%20(12).jpg"></li>
            <li><img src="../img/teacher%20(12).jpg"></li>
            <li><img src="../img/teacher%20(12).jpg"></li>
            <li><img src="../img/teacher%20(12).jpg"></li>
            <li><img src="../img/teacher%20(12).jpg"></li>
            <li><img src="../img/teacher%20(12).jpg"></li>
            <li><img src="../img/teacher%20(12).jpg"></li>
        </div>
        <div id="child2" class="child"></div>
    </div>
    <script type="text/javascript">
        (function () {
            var parent = document.getElementById('parent');
            var child1 = document.getElementById('child1');
            var child2 = document.getElementById('child2');
            child2.innerHTML = child1.innerHTML;
            setInterval(function () {
               if(parent.scrollTop >= child1.scrollHeight) {
                   parent.scrollTop = 0;
               } else {
                   parent.scrollTop++;
               }
            }, 20);
        })()
    </script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">   <!--文档的头部区域中元数据区的字符集定义，这里是utf-8，表示国际通用的字符集编码格式-->   
<title> Sample Page!</title> 
</head>
    <div id="demo">  </div>
<script language="JavaScript"> 
function myFunction(){ 
var x; var person=prompt("请输入你的名字","小曼"); 
if (person!=null && person!=""){ 
x="你好!  next to meet to you" +person+ ",今天感觉如何?晴天樱桃";
document.getElementById("demo").innerHTML=x; 
}
 }
myFunction();
</script>
</body>
</html> 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据类型</title>
    <style>
        *{
            font-size: 47px;
        }
    </style>
</head>
<body>
<h1>值类型(基本类型)：字符串（String）、<br>数字(Number)、<br>布尔(Boolean)、<br>对空（Null）、<br>未定义（Undefined）、<br>Symbol。
    引用数据类型：<br>对象(Object)、<br>数组(Array)、<br>函数(Function)。</h1>
<script>
    var x1=34.00;
    var x2=34;
    var y=123e5;
    var z=123e-5;
    var u=123*567/78^78;
   document.write(u+"<br>");
    document.write(x1 + "<br>");
    document.write(x2 + "<br>");
    document.write(y + "<br>");
    document.write(z + "<br>");
</script>
<br>
<script>
    var i;
    var cars = new Array();
    cars[0] = "Saab";
    cars[1] = "Volvo";
    cars[2] = "BMW";
    cars[3] = "Volvo";
    cars[4] = "hubin";
    cars[5] = "wangping";
    cars[6] = "xiaomi";
    for (i=0;i<cars.length;i++)
    {
        document.write(cars[i] + "<br>");
    }
</script>
<br>
<script>
    var carname1="Volvo XC60";
    var carname2='Volvo XC60';
    var answer1='It\'s alright';
    var answer2="He is called \"Johnny\"";
    var answer3='He is called "Johnny"';
    document.write(carname1 + "<br>");
    document.write(carname2 + "<br>");
    document.write(answer1 + "<br>");
    document.write(answer2 + "<br>");
    document.write(answer3 + "<br>");
</script>
<script>
    var person=
        {
            firstname : "John",
            twoname:"hubin",
            lastname  : "Doe",
            id        :  5566
        };
    document.write(person.firstname + "<br>");
    document.write(person["twoname"] + "<br>");
    document.write(person["lastname"] + "<br>");
    var person;
    var car="Volvo";
    document.write(person + "<br>");
    document.write(car + "<br>");
    var car=null;
    document.write(car + "<br>");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>创建对象</title>
</head>
<body>
<p>创建 JavaScript 对象。</p>
<p id="demo">1</p>
<p id="demo1">2</p>
<p id="demo2">3</p>
<p id="demo3">3</p>
<p>
    你可以使用 .property 或 ["property"].
</p>
<script>
    var person = {firstName:"John", lastName:"Doe", age:45, eyeColor:"blue"};
    document.getElementById("demo").innerHTML =
        person.firstName + " 现在 " + person.age + " 岁.";
    var person = {firstName:"key", lastName:"Doe", age:32, eyeColor:"blue"};
    document.getElementById("demo1").innerHTML =
        person.firstName + " 现在 " + person.age + " 岁.";
    var person = {firstName:"animal", lastName:"Doe", age:32, eyeColor:"blue"};
    document.getElementById("demo2").innerHTML =
        person.firstName + " 现在 " + person.age + " 岁.";
    var person = {firstName:"animals", lastName:"Does", age:32, eyeColor:"blue"};
    document.getElementById("demo3").innerHTML =
        person.firstName + " 现在 " + person.age + " 岁.";
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>创建对象</title>
</head>
<body>
<p>创建和使用对象方法。</p>
<p>对象方法是一个函数定义,并作为一个属性值存储。</p>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<p id="demo4"></p>
<script>
    var person = {
        firstName: "John",
        lastName: "Doe",
        id: 5566,
        fullName: function () {
            return this.firstName + " " + this.lastName;
        }
    };
        var person = {
            firstName: "key",
            lastName : "Doe",
            id : 566,
            fullName : function()
            {
                return this.firstName + " " + this.lastName;
            }
    };
    document.getElementById("demo1").innerHTML = "不加括号输出函数表达式："  + person.fullName;
    document.getElementById("demo2").innerHTML = "加括号输出函数执行结果："  +  person.fullName();
    document.getElementById("demo3").innerHTML = "不加括号输出函数表达式："  + person.fullNam;
    document.getElementById("demo4").innerHTML = "加括号输出函数执行结果："  +  person.fullName();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>函数</title>
    <style>
        button{
            color: yellow;
            background-color: red;
        }
    </style>
    <script>
        function myFunction()
        {
            alert("Hello World!");
            alert("你好我的世界");
        }
    </script>
</head>
<body>
<button onclick="myFunction()">点我出现Hellow  world</button>
<p>点击这个按钮，来调用带参数的函数。</p>
<button onclick="my('Harry Potter','Wizard')">点击这个按钮，来调用带参数的函数</button>
<script>
    function my(name,job){
        alert("Welcome " + name + ", the " + job);
    }
</script>
<p>请点击其中的一个按钮，来调用带参数的函数。</p>
<button onclick="myF('Harry Potter','Wizardcctyv')">one</button>
<button onclick="myF('Bob','Builder')">two</button>
<script>
    function myF(name,job)
    {
        alert("Welcome " + name + ", the " + job);
    }
</script>
<p>本例调用的函数会执行一个计算，然后返回结果：</p>
<p id="demoasd"></p>
<script>
    function mya(a,b,c){
        return a*b/c;
    }
    document.getElementById("demoasd").innerHTML=mya(100,3,2);
   /* document.getElementById("demoasd").innerHTML=mya(100,323,2);*/
</script>
<button onclick="getElementById('de').innerHTML=Date()">现在的时间是?</button>
<button onclick="this.innerHTML=Date()">现在的时间是?</button>
<p id="de"></p>
</body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>parseFloat与parseInt</title>
  </head>
  <body>
    <script type="text/javascript" class="parseInt">
      var a=parseInt("10");  //return 10
      var a1=parseInt("10.33");
        var a2=parseInt("134 45 56");
          var a3=parseInt("79");
            var a4=parseInt("23 years");
              var a5=parseInt("1he we 56");
                var a6=parseInt("10",8);
      alert(a);
      alert(a1);
      alert(a2);
      alert(a3);
      alert(a4);
      alert(a5);
      alert(a6);
    </script>
    <script type="text/javascript" class="parseFloat">
      var b=parseFloat("10");  //return 10
      var b1=parseFloat("10.33");
        var b2=parseFloat("134 45 56");
          var b3=parseFloat("79");
            var b4=parseFloat("23 years");
              var b5=parseFloat("1he we 56");
                var b6=parseFloat("10",8);
       alert(b+"hellow");
      alert(b1);
      alert(b2);
      alert(b3);
      alert(b4);
      alert(b5);
      alert(b6);
    </script>
  </body>
文章标签：
JavaScript
前端开发
t75yjb52rsccc
目录
相关文章
t75yjb52rsccc
A2021-A2022年度总结项目内容。（一）
A2021-A2022年度总结项目内容。（一）
t75yjb52rsccc
51 0
热烈的马
|
4月前
|
Python
【python自动办公】批量更改Excel中大量工作表的内容（附源码 有注释）
【python自动办公】批量更改Excel中大量工作表的内容（附源码 有注释）
热烈的马
162 0
半只牛马
|
编译器 程序员 C语言
C++入门（内容补充）
之前给大家更新了一系列关于C++的基础语法，那么今天小编再给大家进行部分内容的补充，然后我们马上就会进入类有关内容的介绍。
半只牛马
65 0
t75yjb52rsccc
|
前端开发 JavaScript
A2021-2022年度总结（项目内容五）
A2021-2022年度总结（项目内容五）
t75yjb52rsccc
89 0
A2021-2022年度总结（项目内容五）
q7s2kces74wvy
|
前端开发 开发者
评论列表案例-演示艾特符号替代相对路径的好处|学习笔记
快速学习评论列表案例-演示艾特符号替代相对路径的好处
q7s2kces74wvy
451 0
t75yjb52rsccc
A2021-A2022年度总结（项目内容四）（三）
A2021-A2022年度总结（项目内容四）
t75yjb52rsccc
67 0
t75yjb52rsccc
A2021-A2022年度总结（项目内容四）（二）
A2021-A2022年度总结（项目内容四）
t75yjb52rsccc
63 0
t75yjb52rsccc
A2021-A2022年度总结项目内容（三）（三）
A2021-A2022年度总结项目内容（三）
t75yjb52rsccc
61 0
t75yjb52rsccc
A2021-A2022年度总结项目内容（三）（一）
A2021-A2022年度总结项目内容（三）
t75yjb52rsccc
61 0
t75yjb52rsccc
A2021-A2022年度总结项目内容（三）（四）
A2021-A2022年度总结项目内容（三）
t75yjb52rsccc
74 0