js练习
<!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>
<title></title>
<script type="text/javascript">
//验证按钮是否为空
// window.onload = function () {
// var inputs = document.getElementsByTagName("input");
// for (var i = 0; i < inputs.length; i++) {
// if (inputs[i].type == "text") {
// inputs[i].onblur = function () {
// //失去焦点,this表示当前点击的对象
// if (this.value.length == 0) {
// this.style.backgroundColor = "red";
// }
// else {
// this.style.backgroundColor = "white";
// }
// };
// inputs[i].onfocus = function () {
// if (this.value.lenth == 0) {
// this.style.backgroundColor = "white";
// }
// };
// }
// }
// }
// 评分星星
// window.onload = function () {
// //1.给rating中的所有td注册事件
// //2.给每一个td起索引（编号)
// //3.变成实体星星
// var tb = document.getElementById("rating");
// var tds = tb.getElementsByTagName("td");
// for (var i = 0; i < tds.length; i++) {
// tds[i].style.cursor = "pointer";
// tds[i].id = i;
// //给每一个td注册事件
// tds[i].onmouseover = function () {
// //获取当前触发事件的编号
// var index = this.id; //获取的依然是字符串，需要转化
// //当然和之前的td
// for (var i = 0; i <= parseInt(index); i++) {
// tds[i].innerText = "★";
// }
// //之后的td
// for (var i = parseInt(index) + 1; i < tds.length; i++) {
// tds[i].innerText = "☆";
// }
// };
// }
// }
//选美女,选中的背景高亮显示
// window.onload = function () {
// var div = document.getElementById("mv");
// var links = div.getElementsByTagName("a");
// for (var i = 0; i < links.length; i++) {
// links[i].onclick = function () {
// for (var i = 0; i < links.length; i++) {
// links[i].style.backgroundColor = "white";
// }
// this.style.backgroundColor = "red";
// return false; //不想让你跳转，只想让你高亮显示
// }
// }
// }
//隔行变色
// window.onload = function () {
// var tb = document.getElementById("tb");
// var rows = tb.getElementsByTagName("td");
// for (var i = 0; i < rows.length; i++) {
// //奇偶行不同色
// if (i % 2 == 0) {
// rows[i].style.backgroundColor = "red";
// }
// else {
// rows[i].style.backgroundColor = "green";
// }
// //光棒效果
// var bgColor;
// rows[i].onmouseover = function () {
// bgColor = this.style.backgroundColor;
// this.style.backgroundColor = "yello";
// }
// rows[i].onmouseout = function () {
// this.style.backgroundColor = bgColor;
// }
// }
// }
//图片浏览器
// window.onload = function () {
// var json = [{ "name": "美女1", "url": "网页作业/家乡美/1.png" },
// { "name": "美女2", "url": "网页作业/家乡美/2.png" },
// { "name": "美女3", "url": "网页作业/家乡美/3.png" },
// { "name": "美女4", "url": "网页作业/家乡美/4.png" }
// ];
// var div = document.getElementById("imgs");
// if (json.length > 0) {
// var ul = document.createElement("ul");
// div.appendChild(ul);
// //生成li
// for (var i = 0; i < json.length; i++) {
// var li = document.createElement("li");
// ul.appendChild(li);
// //动态创建a
// var link = document.createElement("<a href='" + json[i].url + "'></a>");
// link.innerHTML = json[i].name;
// link.onclick = function () {
// var href = this.href;
// img.scr = href;
// //取消后续内容的执行
// return false;
// }
// li.appendChild(link);
// }
// //动态生成Image标签
// var img = document.createElement("img");
// div.appendChild(img);
// }
// }
// 点击按钮 设置透明度
window.onload = function () {
document.getElementById("d1").style.filter = "alpha(opacity=100)";
}
var num = 100;
function f1() {
if (num > 0) {
num = num - 10;
document.getElementById("d1").style.filter = "alpha(opacity=" + num + ")";
}
else {
alert("不能点了");
}
}
</script>
<style type="text/css">
div
{
width:200px;
height:200px;
background-color:Red;
filter:alpha(opacity=100);
}
</style>
</head>
<body>
<!--验证按钮是否为空
<input type="text"/><br />
<input type="text"/><br />
<input type="text"/><br />
<input type="text"/><br />
<input type="text"/><br />-->
<!--评分星星
<table id="rating">
<tr>
<td>☆</td>
<td>☆</td>
<td>☆</td>
<td>☆</td>
<td>☆</td>
</tr>
</table>-->
<!--选美女,选中的话高亮显示
<div id="mv">
<a href="">西施</a>
<a href="">贵妃</a>
<a href="">貂蝉</a>
<a href="">昭君</a>
</div>-->
<!--隔行变色，高亮显示
<table id="tb" border="1">
<tr>
<td>
1111111111111111
</td>
</tr>
<tr>
<td>
2222222222222222
</td>
</tr>
<tr>
<td>
3333333333333333
</td>
</tr>
<tr>
<td>
4444444444444444
</td>
</tr>
</table>-->
<!--图片浏览器
<div id="imgs">
</div>-->
<!--点击按钮 设置透明度-->
<div id="d1">
</div>
<input type="button" value="click" onclick="f1()"/>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
//验证按钮是否为空
// window.onload = function () {
// var inputs = document.getElementsByTagName("input");
// for (var i = 0; i < inputs.length; i++) {
// if (inputs[i].type == "text") {
// inputs[i].onblur = function () {
// //失去焦点,this表示当前点击的对象
// if (this.value.length == 0) {
// this.style.backgroundColor = "red";
// }
// else {
// this.style.backgroundColor = "white";
// }
// };
// inputs[i].onfocus = function () {
// if (this.value.lenth == 0) {
// this.style.backgroundColor = "white";
// }
// };
// }
// }
// }
// 评分星星
// window.onload = function () {
// //1.给rating中的所有td注册事件
// //2.给每一个td起索引（编号)
// //3.变成实体星星
// var tb = document.getElementById("rating");
// var tds = tb.getElementsByTagName("td");
// for (var i = 0; i < tds.length; i++) {
// tds[i].style.cursor = "pointer";
// tds[i].id = i;
// //给每一个td注册事件
// tds[i].onmouseover = function () {
// //获取当前触发事件的编号
// var index = this.id; //获取的依然是字符串，需要转化
// //当然和之前的td
// for (var i = 0; i <= parseInt(index); i++) {
// tds[i].innerText = "★";
// }
// //之后的td
// for (var i = parseInt(index) + 1; i < tds.length; i++) {
// tds[i].innerText = "☆";
// }
// };
// }
// }
//选美女,选中的背景高亮显示
// window.onload = function () {
// var div = document.getElementById("mv");
// var links = div.getElementsByTagName("a");
// for (var i = 0; i < links.length; i++) {
// links[i].onclick = function () {
// for (var i = 0; i < links.length; i++) {
// links[i].style.backgroundColor = "white";
// }
// this.style.backgroundColor = "red";
// return false; //不想让你跳转，只想让你高亮显示
// }
// }
// }
//隔行变色
// window.onload = function () {
// var tb = document.getElementById("tb");
// var rows = tb.getElementsByTagName("td");
// for (var i = 0; i < rows.length; i++) {
// //奇偶行不同色
// if (i % 2 == 0) {
// rows[i].style.backgroundColor = "red";
// }
// else {
// rows[i].style.backgroundColor = "green";
// }
// //光棒效果
// var bgColor;
// rows[i].onmouseover = function () {
// bgColor = this.style.backgroundColor;
// this.style.backgroundColor = "yello";
// }
// rows[i].onmouseout = function () {
// this.style.backgroundColor = bgColor;
// }
// }
// }
//图片浏览器
// window.onload = function () {
// var json = [{ "name": "美女1", "url": "网页作业/家乡美/1.png" },
// { "name": "美女2", "url": "网页作业/家乡美/2.png" },
// { "name": "美女3", "url": "网页作业/家乡美/3.png" },
// { "name": "美女4", "url": "网页作业/家乡美/4.png" }
// ];
// var div = document.getElementById("imgs");
// if (json.length > 0) {
// var ul = document.createElement("ul");
// div.appendChild(ul);
// //生成li
// for (var i = 0; i < json.length; i++) {
// var li = document.createElement("li");
// ul.appendChild(li);
// //动态创建a
// var link = document.createElement("<a href='" + json[i].url + "'></a>");
// link.innerHTML = json[i].name;
// link.onclick = function () {
// var href = this.href;
// img.scr = href;
// //取消后续内容的执行
// return false;
// }
// li.appendChild(link);
// }
// //动态生成Image标签
// var img = document.createElement("img");
// div.appendChild(img);
// }
// }
// 点击按钮 设置透明度
window.onload = function () {
document.getElementById("d1").style.filter = "alpha(opacity=100)";
}
var num = 100;
function f1() {
if (num > 0) {
num = num - 10;
document.getElementById("d1").style.filter = "alpha(opacity=" + num + ")";
}
else {
alert("不能点了");
}
}
</script>
<style type="text/css">
div
{
width:200px;
height:200px;
background-color:Red;
filter:alpha(opacity=100);
}
</style>
</head>
<body>
<!--验证按钮是否为空
<input type="text"/><br />
<input type="text"/><br />
<input type="text"/><br />
<input type="text"/><br />
<input type="text"/><br />-->
<!--评分星星
<table id="rating">
<tr>
<td>☆</td>
<td>☆</td>
<td>☆</td>
<td>☆</td>
<td>☆</td>
</tr>
</table>-->
<!--选美女,选中的话高亮显示
<div id="mv">
<a href="">西施</a>
<a href="">贵妃</a>
<a href="">貂蝉</a>
<a href="">昭君</a>
</div>-->
<!--隔行变色，高亮显示
<table id="tb" border="1">
<tr>
<td>
1111111111111111
</td>
</tr>
<tr>
<td>
2222222222222222
</td>
</tr>
<tr>
<td>
3333333333333333
</td>
</tr>
<tr>
<td>
4444444444444444
</td>
</tr>
</table>-->
<!--图片浏览器
<div id="imgs">
</div>-->
<!--点击按钮 设置透明度-->
<div id="d1">
</div>
<input type="button" value="click" onclick="f1()"/>
</body>
</html>