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>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style class="q">
.q{
color: #C71585;
font-size: 67px;
}
</style>
<p class="q">字符集·</p>
<big>
<script type="text/javascript" class="q"`>
var myString ="this ASlDFGHJK like love sample too no pains no gains my dreams afaith "
var a =myString.length;
document.write(a+"<br>");
alert(a);
var b=myString.charAt(3);
document.write(b+"<br>");
alert(b);
var c=myString.chaCoderAt(2);
document.write(c+"<br>");
var d=myString.indexOf("too");
document.write(d+"<br>");
var e=myString.lastIndexOf("s");
document.write(e+"<br>");
var f=myString.substr(1,7);
document.write(f+"<br>");
var g=myString.substring(2,23);
document.write(g+"<br>");
var h=myString.split();
document.write(a[5]);
document.write(a+"<br>");
var i=myString.replace("too","soort");
document.write(i+"<br>");
var j=myString.toLowerCase();
document.write(j+"<br>");
var k=myString.toUpperCase();
document.write(k+"<br>");
</script>
</big>
<i>
<script type="text/javascript">
var myString ="this ASlDFGHJK like love sample too no pains no gains my dreams afaith "
var j=myString.toLowerCase();
document.write(j);
</script>
</i>
<strike>
<script type="text/javascript">
var myString ="this ASlDFGHJK like love sample too no pains no gains my dreams afaith "
var j=myString.toLowerCase();
document.write(j);
</script>
</strike>
<sub>
<script type="text/javascript">
var myString ="this ASlDFGHJK like love sample too no pains no gains my dreams afaith "
var j=myString.toLowerCase();
document.write(j);
</script>
</sub>
<sup>
<script type="text/javascript">
var myString ="this ASlDFGHJK like love sample too no pains no gains my dreams afaith "
var j=myString.toLowerCase();
document.write(j);
</script>
</sup>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
.Q{
font-size: 50PX;
}
</style>
<!--
作者：2571507538@qq.com
时间：2021-08-09
描述： <p class="Q">登录界面居中如图所示</p>
--><title>登录界面居中如图所示</title>
<div id="login"><img src="img/bnm/cc1 (5).jpg"/></div>
<script type="text/javascript">
function show(){
var w=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
var h=window.innerWidth||document.documentElement.clientHeight||document.body.clientHeight;
var login=document.getElementById('login');
var top=(h-500)/2;
var left=(w-350)/2;
login.style.top+'px';
login.style.left+'px';
window.onload=function(){show();};
window.onresize=function(){show();};
}
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="demo">prompt方法</div>
<div id="demo2">计算圆</div>
<script type="text/javascript">
function myFuction(){
var x;
var person=prompt("请输入你的名字");
if(person!=null&&person!=" "){
x="你好呀"+person+",今天又什么感觉吗小明？";
document.getElementById("demo").innerHTML=x;
}
}
myFuction();
</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></title>
</head>
<body>
<!--<script type="text/javascript">
window.onload = function(){
var speed = 20;
var td1 = document.getElementById("td1");
var td2 = document.getElementById("td2");
td2.innerHTML = td1.innerHTML;
var div1 = document.getElementById("div1");
function goLeft(){
if (td1.offsetWidth - div1.scrollLeft < 0) {
div1.scrollLeft = div1.scrollLeft - td1.offsetWidth;
}else {
div1.scrollLeft++;
}
}
setInterval(goLeft,speed);
}
</script>-->
<script src="../js/动态橱窗.js"></script>
<div id="div1" style="overflow:hidden;width:800px;height:50px;">
<table style="width: 800px;height: 45px;background-color: silver;">
<tr>
<td id="td1">
<table style="width: 800px;height: 45px;background-color: silver;">
<tr>
<td align="center"><font size="5px" color=blue>JS实现滚动窗口</font></td>
</tr>
</table>
</td>
<td id="td2"></td>
</tr>
</table>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
.AS{
color: #C71585;
font-family: "微软雅黑";
font-size: 20px;
}
</style>
<script language="JavaScript">
var msg="欢迎动态表格对象案例 ，方法无极限，快乐第一位"
function scr()
{
document.title=msg;
msg=msg.substring(1,msg.length)+msg.substring(0,2);
}
setInterval("scr()",500)
</script>
<title>
动态表格的建立table
</title>
<div class="AS">
<p class="AS">以下说明</p>
<h1>table 表格的布局</h1>
<h1>1：caption caption 表头信息</h1>
<h1>2:tr tr 一个表格的行</h1>
<h1>3:th th表格头</h1>
<h1>4:td td 单元格</h1>
</div>
<table id="cj" cellpadding="0" width="100%" align="center" border="4">
<strong><caption style="font-size: 40px; line-height: 40px; color: deepskyblue; align=center"; >学生信息统计表</caption></strong>
<tr>
<th>学号：</th>
<th>姓名：</th>
<th>C语言：</th>
<th>动态脚本</th>
<th>总分为</th>
<th>删除</th>
<input type="button" onclick="insRow()" value="插入行" />
<input type="button" onclick="tt()" value="修改内容" />
</tr>
</table>
<script type="text/javascript">
function insRow(){
rs=document.getElementById('cj').insertRow(1);
var c0=rs.insertCell(0);
var c1=rs.insertCell(1);
var c2=rs.insertCell(2);
var c3=rs.insertCell(3);
var c4=rs.insertCell(4);
var c5=rs.insertCell(5);
c0.innerHTML="学号为A202020981"
c1.innerHTML="亲单元2"
c2.innerHTML="亲单元3"
c3.innerHTML="亲单元4"
c4.innerHTML="亲单元5"
c4.innerHTML="删除内容"
;
}
function tt(){
var c=document.getElementById('cj').rows[1].cells[0];
c.innerHTML="内容为";
c.width="70";
c.Style.backgroundColor="#CCC";
}
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片的效果</title>
<style>
#box>span{
display: inline-block;
width: 100px;
background: #faa;
height: 50px;
color:#fff;
font-size:24px;
text-align: center;
line-height: 50px;
}
#box>span:hover{
background: orange;
}
img{
display: none;
}
</style>
</head>
<body>
<div id="box">
<span>图1</span>
<span>图2</span>
<span>图3</span>
<span>图四</span>
<span>图1</span>
<span>图2</span>
<span>图3</span>
<span>图四</span>
</div>
<img src="../img/teacher%20(1).jpg">
<img src="../img/teacher%20(11).jpg">
<img src="../img/teacher%20(12).jpg">
<img src="../img/teacher%20(13).jpg">
<img src="../img/teacher%20(1).jpg">
<img src="../img/teacher%20(11).jpg">
<img src="../img/teacher%20(12).jpg">
<img src="../img/teacher%20(13).jpg">
<script type="text/javascript">
window.onload=function(){
//获取box的子
var boxs=document.getElementById('box').children;
for(var i=0;i<boxs.length;i++){
boxs[i].onclick=function(){
var k=i;
return function(){
var imgobj=document.getElementsByTagName('img');
//把所有的图片隐藏
for(var j=0;j<imgobj.length;j++){
imgobj[j].style.display='none';
}
//显示当前点击的图片
imgobj[k].style.display='block';
};
}();
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 圆的面积</title>
<style type="text/css">
*{
font-size: 30px;
font-weight: bolder;
}
</style>
</head>
<body>
<div class="box1">
<p class="n">圆的面积与周长</p>
<label for="redius">圆的r</label>
<input type="text" id="redius"/>
</div>
<div class="box2">
<label for="perimeter">圆的周长</label>
<input type="text" id="perimeter"/>
</div>
<div class="box3">
<table>
<label for="area">圆的面积</label>
<input type="text" id="area"/>
</table>
</div>
<script>
let radius =document.getElementById("redius"),
perimeter=document.getElementById("perimeter"),
area=document.getElementById("area");
radius.oninput=function(){
let r=radius.value;
let res_perimeter=Math.PI*2*r;
let res_area=Math.PI*Math.pow(r,2);
if(r=='0'){
perimeter.value='0';
area.value='0';
}else{
perimeter.value=res_perimeter.toString().substr(0,4).concat('0');
area.value=res_area.toString().substr(0,4).concat('0');
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script language="JavaScript">
var msg="欢迎来到字符串对象案例 ，方法无极限，快乐第一位"
function scr()
{
document.title=msg;
msg=msg.substring(1,msg.length)+msg.substring(0,2);
}
setInterval("scr()",500)
</script>
<style type="text/css">
.A{
color: crimson;
font-size: 39px;
}
</style>
</head>
<body>
<p class="A">字符串对象案例.indeOf()</p>
<script type="text/javascript">
var S="programming lauguage think you";
document.write(S.indexOf("r")+"<br />");
document.write(S.indexOf("r",3)+"<br />");
document.write(S.lastIndexOf("r")+"<br />");
document.write(S.lastIndexOf("r",3)+"<br />");
document.write(S.lastIndexOf("V")+"<br />");
document.write(S.substring(2,6)+"<br />");
document.write(S+"<br />");
document.write(S.substr(1,10)+"<br />");
document.write(S+"<br />");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>单机事物用function</title>
<style type="text/css">
.gh{
color: darkorange;
font-family: "微软雅黑";
font-size: 34px;
}
.er{
background: #00BFFF;
font-size: 40px;
height: 300px;
width: 450px;
}
</style>
</head>
<body>
<input type="text" name="MyTest" value="鼠标以单机" onclick="javascript:alert('鼠标一点机文本框！')"/><br />
<input type="text" name="MyTest" value="鼠标以单机" onclick="javascript:alert('鼠标点机文本框ok了吗！')"/><br />
<input type="text" name="MyTest" value="密码是正确的吗" onclick="javascript:alert('没错密码是对的哦哦哦！')"/><br />
<input type="button" name="myButton" value="亲爱的能鼠标单机鼠标" onclick="d()" class="er"/>
<p class="gh">单机事物用function</p>
<!--
作者：2571507538@qq.com
时间：2021-06-25
描述： 这用了函数 function d(){
alert("密码凑数");
alert("密码器无语了")
alert("这密码用毒吧")
alert("能改密码吗！！！")
alert("亲爱的，能呀！！！")
alert("那如何去改密码呀亲爱的")
用onclick="d()" 功能去实现的哦
window.alert();
弹出窗口可以多个
}
-->
<script type="text/javascript">
function d(){
alert("请输入你的密码哦");
alert("亲爱的你的密码不正确");
alert("你输入的密码我无语了");
alert("亲爱的：这密码用毒吧");
alert("能改密码吗！！！");
alert("亲爱的，能呀！！！");
alert("那如何去改密码呀亲爱的");
alert("请输入你的手机号");
alert("获取手机短信的验证码");
alert("come on");
alert("请输入你的姓名");
}
</script>
<!--
作者：2571507538@qq.com
时间：2021-06-25
描述：console.log()
-->
<script type="text/x-javascript">
a=5;
b=6;
c=a+b;
console.log(c)
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>循环语句</title>
<style type="text/css">
.qw{
color: mediumvioletred;
font-family: "微软雅黑";
font-size: 45px;
}
</style>
</head>
<body>
<div class="qw"></div>
<script type="text/javascript" class="qw">
document.write("AA========while循化=====================","<br/>");
var i=0;
while (i<100){
document.write(i);
i++;
}
document.write("BB====do====while循化=======================","<br/>");
var i=0;
do{
document.write(i);
i++;
}while (i<1000);
document.write("CC========for循化==============================","<br/>");
for (var i = 0; i < 2000; i++) {
document.write(i);
}
document.write("=DD=======for in遍历对象属性循化==============================","<br/>");
obj={
name:"bobtyuuuuuuuiijgvngngjvhjg",
age:45,
gender:"maile"
};
for(var x in obj) {
document.write(obj[x]);
};
document.write("EE========for in循化==对象继承属性============================","<br/>");
for(var key in obj){
if(obj.hasOwnProperty(key)){
document.write(key);
}
}
document.write("=FF=======for in循化===遍历数组===========================","<br/>");
var a=['A7','B8','C9','D5','E7','F5','G6'];
for(var i in a){
document.write(i,a[i],"<br>")
}
</script>
<script type="text/javascript">
try{
tryStatements
}catch(exception){
//TODO handle the exception
catchStatements
}
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>成绩管理</title>
<style>
body {
margin: 0;
font: normal 20px "Microsoft YaHei";
color: #0C0C0C;
font-size: 14px;
line-height: 20px;
}
.ui_txt{
width: 60px;
height: 16px;
margin: 2px 2px 2px 5px;
outline: 0;
padding: 5px;
border: 1px solid;
border-color: #C0C0C0 #D9D9D9 #D9D9D9;
border-radius: 2px;
background: #FFF;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0
rgba(255, 255, 255, 0.2);
-webkit-transition: box-shadow, border-color .5s ease-in-out;
-moz-transition: box-shadow, border-color .5s ease-in-out;
-o-transition: box-shadow, border-color .5s ease-in-out;
}
#box_top {
height: 37px;
line-height: 37px;
color: #fff;
background: #044599;
padding-left: 20px;
}
.ui_btn {
margin: 6px;
width: 80px;
height: 30px;
vertical-align: middle;
line-height: 30px;
text-align: center;
border-style: none;
cursor: pointer;
font-family: "Microsoft YaHei", "微软雅黑", "sans-serif";
}
.ui_btn:hover {
width: 80px;
height: 30px;
vertical-align: middle;
line-height: 30px;
text-align: center;
border-style: none;
cursor: pointer;
font-family: "Microsoft YaHei", "微软雅黑", "sans-serif";
color: #fff;
}
.table {
padding: 0;
margin: 0;
position: relative;
margin: 0 auto;
}
.table tr th {
background: #044599 no-repeat;
text-align: center;
border: 1px solid #02397F;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 14px;
color: #fff;
height: 37px;
border-collapse: collapse;
}
.table tr td {
text-align: center;
border-left: 1px solid #ECECEC;
border-right: 1px solid #ECECEC;
border-bottom: 1px solid #ECECEC;
font-size: 15px;
color: #909090;
height: 37px;
}
</style>
</head>
<body>
<script>
function Student(Id,name,english,mathe_m,c,js,data_s)
{
this.Id=Id;
this.name=name;
this.c=parseFloat(c);
this.js= parseFloat(js);
this.english=parseFloat(english);
this.mathe_m=parseFloat(mathe_m);
this.data_s=parseFloat(data_s);
}
Student.prototype.summation=function(){
return this.english+this.mathe_m+this.c+this.js+this.data_s;
}
var students=new Array();
var count=0;
function getId(id){return document.getElementById(id);}
function SumShow(){
with(form1)
{
if(elements[0].value==""||elements[1].value=="")
{
getId('info').innerHTML="******学号或姓名不能空！ ****** ";//存放提示信息的div
return;
}
for(var i=2;i<7;i++){
if(isNaN(elements[i].value)|| parseFloat(elements[i].value)>100|| parseFloat(elements[i]).value<0||elements[i].value=='')
{getId('info').innerHTML="成绩要在0到100之间，请重新输入！"
return;
}
}
var stu=new Student(elements[0].value,elements[1].value,elements[2].value,elements[3].value,elements[4].value,elements[5].value,elements[6].value);
//document.getElementById('info').innerHTML=stu.no+stu.name+"的总分是"+stu.summation()+"<br>";
}
for(n in students){
if(students[n].Id==stu.Id){
getId('info').innerHTML="学号重复!!!";
return;
}
}
addTable(stu);
students[count]=stu;
count++;
getId('info').innerHTML="";
}
function addTable(stu){
colsNum=10;
rlen=getId("cj").rows.length;
rs=getId("cj").insertRow(rlen);
for(i=0;i<colsNum;i++)
rs.insertCell(i);
rs.cells[0].innerHTML='<input name="ic" type="checkbox" value=' +stu.Id+ ' onclick="single_check()" />';
rs.cells[1].innerHTML=stu.Id;
rs.cells[2].innerHTML=stu.name;
rs.cells[3].innerHTML=stu.english;
rs.cells[4].innerHTML=stu.mathe_m;
rs.cells[5].innerHTML=stu.c;
rs.cells[6].innerHTML=stu.js;
rs.cells[7].innerHTML=stu.data_s;
rs.cells[8].innerHTML=stu.summation();
rs.cells[9].innerHTML="<a id="+stu.Id+" onclick='deleteScore("+stu.Id+")'>删除</a>";
rs.onmouseover=function(){this.bgColor="#ddd";}
rs.onmouseout=function(){this.bgColor="#fff";}
}
function deleteScore(ID)
{
var a=getId(ID)
var i=a.parentNode.parentNode.rowIndex;
getId("cj").deleteRow(i);
for(n in students)
if(students[n].Id==ID)
students.splice(n,1);
}
function all_check()
{
var oInput= document.getElementsByName("ic");
for(i=0;i<oInput.length;i++)
if(getId('all').checked==true) //全选按钮
oInput[i].checked=true;// alert(oInput[i].value);
else
oInput[i].checked=false;
}
function single_check()
{ var oInput= document.getElementsByName("ic");
var j=0;
for(i=0;i<oInput.length;i++)
if(oInput[i].checked==true)
j++;
if( j==oInput.length)
getId('all').checked=true;
else
getId('all').checked=false;
}
function removeRow(){
var cheObj=document.getElementsByName("ic");
//var taObj=document.getElementById("cj");
if(confirm("确定要删除么？"))
for(var k=0;k<cheObj.length;k++){
var v=cheObj[k].value;
if(cheObj[k].checked){
getId("cj").deleteRow(k+1); //获取表格元素，删除对应 表格 的行
for(n in students)
if(students[n].Id==v)
students.splice(n,1);
k=-1;
}
}
getId('all').checked=false;
}
</script>
<div id="box_top">学生成绩管理</div>
<form name="form1">
学号 :<input name="no" class="ui_txt">
姓名 :<input name="name" class="ui_txt"><br />
英语 :<input name="efield" class="ui_txt" >
高数 :<input id="高数" name="gs" type="text" class="ui_txt" >
C语言：<input name="c" class="ui_txt">
动态脚本:<input name="js" class="ui_txt">
数据结构 :
<input name="sj" class="ui_txt" class="ui_txt"><br />
<input type="button" value="显示总分" onClick="SumShow()" class="ui_btn">
<input type="reset" value="重置" class="ui_btn">
</form><br />
<div id="info"></div>
<table id="cj" class="table" cellspacing="0" cellpadding="0" width="100%" align="center">
<caption style=" font-size:28px;line-height: 50px; color: blue ;">学生成绩信息统计表</caption>
<tr><th > <label><input id="all" type="checkbox" onclick="all_check()" />全选</label></th>
<th>学号</th>
<th>姓名</th>
<th>英语</th>
<th>高数</th>
<th>C语言</th>
<th>动态脚本</th>
<th>数据结构</th>
<th>总分</th>
<th>删除</th>
</tr>
</table>
<input type="button" value="删除选中" onClick="removeRow()" class="ui_btn"/>
<script language="JavaScript">
var msg="欢迎来到成绩管理案例噢噢噢噢案例 ，方法无极限，快乐第一位"
function scr()
{
document.title=msg;
msg=msg.substring(1,msg.length)+msg.substring(0,2);
}
setInterval("scr()",500)
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/*
var uri="my test.asp? name =stalek&car=saab "
document.write(encodeURI(uri)+"<br />")
document.write(decodeURI(uri)+"<br />")
*/
var a1=typeof "john";
var a2=typeof "3.24567";
var a3=typeof false;
var a5=typeof {name:'join',age:67};
var a6=typeof undefined;
var a7=typeof null;
alert(a1);
alert(a2);
alert(a3);
alert(a5);
alert(a6);
alert(a7);
document.write(a);
</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>
<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 onl oad="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='√';
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>
在学习的路上多反思反思。