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>
