<!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>
<!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>