20170712js

来源：互联网发布：必赢客时时彩软件编辑：程序博客网时间：2024/06/11 03:54

随机数输出产生星期：

function xingqi(){
var x=parseInt(Math.random()*7)+1;
switch (x)
{
case 1:
x="星期一";
alert(x);
break;
case 2:
x="星期二";
alert(x);
break;
case 3:
x="星期三";
alert(x);
break;
case 4:
x="星期四";
alert(x);
break;
case 5:
x="星期五";
alert(x);
break;
case 6:
x="星期六";
alert(x);
break;
case 7:
x="星期天";
alert(x);
break;

}

<div align="center" >
<input type="button" value="返回星期" onclick="xingqi()"/>
</div>
<hr/>

JavaScript 支持不同类型的循环：
for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块

function forin(){
var stu={
stuid:9527,
stuname:"燧先生",
stupassword:"123456"
};
for( x in stu){
alert(stu[x]);
}
}

<div align="center" >
<input type="button" value="forin" onclick="forin()"/>
</div>
<hr/>

do/while 循环
do/while 循环是 while 循环的变体。该循环会执行一次代码块，在检查条件是否为真之前，然后如果条件为真的话，就会重

复这个循环。

function while1(){
stu=["aa","bb","cc","dd"]
var i=0;
while(stu[i]){
alert(stu[i]);
i++;
}
}

<div align="center" >
<input type="button" value="while" onclick="while1()"/>
</div>
<hr/>

break 语句用于跳出循环。
continue 用于跳过循环中的一个迭代。

HTML DOM （文档对象模型）
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树。

先id读取搜索再标签取得 img属性：

function biaoqian1(){
var imgid=document.getElementById("imgid1");
var x=imgid.getElementsByTagName("img");
alert(x.length);
for(var i=0;i<x.length;i++){
alert(x[i].src);
}
}

<hr/>
<div align="center" id="imgid1" >
<input type="button" value="图片" onclick="testB()"/><br/>
<img src="img/aaa.jpg" id="tp1"/><br/>
<img src="img/bbb.jpg" id="tp2"/><br/>
</div>

<div align="center" >
<input type="button" value="先id再标签找对象" onclick="biaoqian1()"/>
</div>

进入欢迎退出欢迎下次再来：

function testa(){
alert("欢迎");
}
function testb(){
alert("欢迎下次进入");
}

<body onload="testa()" onunload="testb()">

实现鼠标移出改变框的内容：
onchange 事件
onchange 事件常结合对输入字段的验证来使用。
下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。

<input type="text" id="text" onchange="testc()"/>

function testc(){
var text=document.getElementById("text");
document.getElementById("text").value="999999999999";
}

省的案例：

function testd(){
var sheng=document.getElementById("sheng");
alert(sheng.value);
alert(sheng.options[sheng.selectedIndex].text);
}

省：
<select id="sheng" onchange="testd()">

<option value="四川1">四川</option>
<option value="北京1">北京</option>
<option value="海南1">海南</option>
<option value="上海1">上海</option>

</select>

鼠标移入移出：

onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

function teste(){
var sheng=document.getElementById("button1");
document.getElementById("button1").value="999999999999";
}
function testf(){
var sheng=document.getElementById("button1");
document.getElementById("button1").value="aiyaya";
}

<input type="button" id="button1" value="aiyaya" onmouseover="teste()"onmouseout ="testf()"/>
</br>

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件

，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

function testg(){
var tp=document.getElementById("img1");
tp.src="img/bbb.jpg";
}
function testh(){
var tp=document.getElementById("img1");
tp.src="img/aaa.jpg";
}

<div>
<img src="img/aaa.jpg"/ id="img1" onmousedown="testg()"onmouseup ="testh()">
</div>

获取和失去焦点：

function testi(){
var onfocus=document.getElementById("onfocus");
document.getElementById("onfocus").value="获取焦点";
}
function testj(){
var tp=document.getElementById("onfocus");
document.getElementById("onfocus").value="失去焦点";
}

<hr/>
<input type="text" id="onfocus" onfocus="testi()" onblur="testj()"/>
</br>

添加和删除文本：

var h=document.createElement("h1");
var h1=document.getElementById("h1");
h.innerHTML="bbbbbbbbbbbbbb";
h1.appendChild(h);
var h2=document.getElementById("h2");
h1.removeChild(h2);

<div id="h1">
<h1 id="h">aaaaaaaaaaaa</h1>
<h2 id="h2">ccccccccccc</h2>
</div>

Window 对象
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一：

Window Screen
window.screen 对象在编写时可以不使用 window 这个前缀。
一些属性：
screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度

location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口（80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）

百度一下：
function testn(){
var name=document.getElementById("name").value;
location.href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=0&rsv_idx=1&tn=baidu&wd="+name

+"&rsv_pq=972970bb0004279b&rsv_t=b1821yMPabn%2BEqsj2z%2BwS%2BV2YyJ1CjBblQDShyx0bgXYJAc

%2Bt4zrFqsmGQQ&rqlang=cn&rsv_enter=1&rsv_sug3=6&rsv_sug1=1&rsv_sug7=100&rsv_sug2=0&inputT=1571&rsv_sug4=2101";
}

<hr/>
百度一下：
<input type="text" id="name">
<input type="button" value="提交" onclick="testn()"/>
</br>
<hr/>

Window History
window.history 对象在编写时可不使用 window 这个前缀。
为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。
一些方法：
history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同

前进后退：

function testo(){
history.forward();
}
function testp(){
history.back();
}
function testq(){
history.go(1);
}

<input type="button" value="前进" onclick="testo()"/>
</br>
<hr/>
<input type="button" value="后退" onclick="testp()"/>
</br>
<hr/>
<input type="button" value="go前进1" onclick="testq()"/>
</br>
<hr/>

history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同

阅读全文

0 0