js练习-阿里云开发者社区

js练习

2017-11-16 1014

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

<!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]. = 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]. = function () {
// bgColor = this.style.backgroundColor;
// this.style.backgroundColor = "yello";
// }
// rows[i]. = 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>








<div id="d1">
</div>
<input type="button" value="click" onclick="f1()"/>
</body>

</html>

本文转自蓬莱仙羽51CTO博客，原文链接：http://blog.51cto.com/dingxiaowei/1366608，如需转载请自行联系原作者

js练习

热门文章

最新文章

相关课程

相关电子书

相关实验场景