JavaScript测试

最新推荐文章于 2022-11-09 16:44:58 发布

lzx1104

最新推荐文章于 2022-11-09 16:44:58 发布

阅读量599

点赞数

分类专栏： JS/CSS/HTML

本文链接：https://blog.csdn.net/lzx1104/article/details/41594859

版权

JS/CSS/HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

js.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/onestyle.css" />
<script src="js/my/my.js"></script>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/my/jq.js"></script>
</head>
<body οnlοad="checkCookies();startClock()">


<script>
document.write(Date());
document.write("<h1>document.write < h1 > This is a heading</h1>");
document.write("<p>document.write < p > This is a paragraph.</p>");
</script>
<button type="button" οnclick="alert('οnclick=alert()')">点击这里</button>
<button id="changeText" type="button" οnclick="changeText()">点击改变文本</button>
<button id="changeColor" type="button" οnclick="changeColor()">点击改变样式</button>
<p>
  <img id="myimage" οnclick="changeImage()" src="image/eg_bulboff.gif">
</p>


<p>
  <input id="checkNum" type="text">
  <button type="button" οnclick="checkNum()">点击这里</button>
</p>


<p>
  <form action="#" οnsubmit="return validate_form(this)" method="post">
    Email: <input type="text" name="email" size="30">
    <input type="submit" value="Submit"> 
  </form>
</p>


<p>
  <div id="hid_text">这是一段文本</div>
  <input id="hid_button" type="button" value="隐藏文本" οnclick="hid_text()" />
</p>


<div style="margin-top:20px">
  <h2>JavaScript HTML DOM 事件</h2>  
  <p>
  onload 和 onunload 事件会在用户进入或离开页面时被触发。<br />
  onload 事件可用于检测浏览器类型和版本，并基于这些信息来加载网页的正确版本。<br />
  onload 和 onunload 事件可用于处理 cookie。
  </p>
  <h3 id="onload_check">onload check: </h3>
  <p>
  onchange 事件常结合对输入字段的验证来使用。<br />
  <input type="text" id="onchange_text" οnchange="onchange_text()">
  </p>
  <div οnmοuseοver="mOver(this)" οnmοuseοut="mOut(this)" 
       style="background-color:green;width:100px;height:20px;padding:10px;color:#ffffff;margin-top:5px;">把鼠标移到上面</div>
  <div οnmοusedοwn="mDown(this)" οnmοuseup="mUp(this)" 
       style="background-color:green;color:#ffffff;width:90px;height:20px;padding:10px;margin:5px 0;">请点击这里</div>
  请输入字符：<input type="text" οnfοcus="this.style.background='yellow'">
  <p οnmοuseοver="style.color='red'" οnmοuseοut="style.color='blue'">把鼠标移到这段文本上</p>
</div>


<div id="rm" style="margin-top:20px" >
  <p id="node1">这是一个节点</p>
  <p id="node2">删除这个节点</p>
  <button type="button" οnclick="rmNode2()">点击删除</button>
  <button type="button" οnclick="createNode3()">点击创建</button>
</div>


<div id="jsobj" style="margin-top:20px" >
  <h2>JS 对象</h2>
  <p id="jsobj_text">>>>> 输出区域 <<<<</p>
  <button type="button" οnclick="jsobj_strlen()">字符串长度</button>
  <button type="button" οnclick="jsobj_upper()">字符串大写</button>
  <button type="button" οnclick="jsobj_person()">person obj</button>
  <button type="button" οnclick="jsobj_person_func()">person obj func</button>
  <div id="jsobj_clock" style="margin: 10px 0 "></div>
</div>


<div id="html-dom" style="margin-top:20px" >
  <h2>HTML DOM</h2>
</div>


<div id="jq" style="margin-top:20px" >
  <h2>jQuery</h2>
  <p id="jq-hello"></p>
<div >


<div id="bottom-bar" style="margin-top:100px">
</div>
</body>
</html>

my.sj



function changeText()
{
x=document.getElementById("changeText");
x.innerHTML="文本已经改变";
}


function changeImage()
{
element = document.getElementById('myimage')
if (element.src.match("bulboff"))
{
  element.src="image/eg_bulbon.gif";
}
else
{
  element.src="image/eg_bulboff.gif";
}
}


function changeColor()
{
x = document.getElementById('changeColor')
if (x.style.color == "rgb(0, 0, 255)")
{
x.style.color="#ff0000";
}
else 
{
x.style.color="#0000ff";
}
}


function checkNum()
{
var x = document.getElementById('checkNum').value
if (x == "" || isNaN(x))
{
  alert("Not Numeric");
}
}


function validate_required(field,alerttxt)
{
with (field)
  {
  if (value==null||value=="")
    {alert(alerttxt);return false}
  else {return true}
  }
}


function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2) 
  {alert(alerttxt);return false}
else {return true}
}
}


function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==false)
  {email.focus();return false}
}
}
/*
function validate_form(thisform)
{
with (thisform)
  {
  if (validate_required(email,"Email must be filled out!")==false)
    {email.focus();return false}
  }
}
*/
function hid_text()
{
x = document.getElementById('hid_text')
y = document.getElementById('hid_button')
if (x.style.visibility == 'hidden'){
  x.style.visibility='visible'
  y.value="隐藏文本"
}
else {
  x.style.visibility='hidden'
  y.value="显示文本"
}
}


function checkCookies()
{
x = document.getElementById('onload_check')
if (navigator.cookieEnabled==true)
{
x.innerHTML+="已启用 cookie";
}
else {
x.innerHTML+="已启用 cookie";
}
}


function onchange_text()
{
var x=document.getElementById("onchange_text");
x.value=x.value.toUpperCase();
}
function mOver(obj)
{
obj.innerHTML="谢谢"
}
function mOut(obj)
{
obj.innerHTML="把鼠标移到上面"
}
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="请释放鼠标按钮"
}
function mUp(obj)
{
obj.style.backgroundColor="green";
obj.innerHTML="请按下鼠标按钮"
}
function rmNode2()
{
var parent=document.getElementById("rm");
var rm=document.getElementById("node2");
parent.removeChild(rm);
}
function createNode3()
{
var para=document.createElement("p");
var node=document.createTextNode("这是新段落节点");
para.appendChild(node);


var element=document.getElementById("rm");
element.appendChild(para);
}


function jsobj_strlen()
{
x = document.getElementById("jsobj_text");
var message="Hello World!";
x.innerHTML = message + " length = " + message.length;
}
function jsobj_upper()
{
x = document.getElementById("jsobj_text");
var message="Hello world!";
x.innerHTML = message.toUpperCase();
}
function jsobj_person()
{
person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
x = document.getElementById("jsobj_text");
x.innerHTML = person.firstname + " " + person.lastname + " is " + person.age + " years old, has " + person.eyecolor + " eyes."
}
function jsobj_person_func()
{
 function person(firstname,lastname,age,eyecolor)
 {
  this.firstname=firstname;
  this.lastname=lastname;
  this.age=age;
  this.eyecolor=eyecolor;
 }
 bill = new person("Bill","Gates",56,"blue");
 x = document.getElementById("jsobj_text");
 x.innerHTML = bill.firstname + " " + bill.lastname + " is " + bill.age + " years old, has " + bill.eyecolor + " eyes."
 
 var person={fname:"Bill",lname:"Gates",age:56};
 txt = ""
 for (i in person)
 {
  txt = txt + person[i] + " ";
 }
 x.innerHTML = txt
}


function startClock()
{
var today=new Date()
var y=today.getFullYear()
var M=today.getMonth()+1
var d=today.getDate()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
var weekday=getWeekDay(today.getDay())
// add a zero in front of numbers<10
m=checkTime(m)
s=checkTime(s)
document.getElementById('jsobj_clock').innerHTML=y+"年"+M+"月"+d+"日 "+h+":"+m+":"+s+"   "+weekday
t=setTimeout('startClock()',500)
}
function checkTime(i)
{
if (i<10) 
  {i="0" + i}
  return i
}
function getWeekDay(day)
{
var weekday=new Array(7)
weekday[0]="星期日"
weekday[1]="星期一"
weekday[2]="星期二"
weekday[3]="星期三"
weekday[4]="星期四"
weekday[5]="星期五"
weekday[6]="星期六"
return weekday[day]
}