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]. = 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>
    <!--验证按钮是否为空
    <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>



















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


相关文章
|
2月前
|
存储 JavaScript 前端开发
JS项目练习
JS项目练习
|
24天前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——4、DIV+CSS绘制旗帜练习
H5+CSS3+JS逆向前置——4、DIV+CSS绘制旗帜练习
10 0
|
2月前
|
存储 JavaScript
JS中相等(==)和等全(===)的区别与练习
JS中相等(==)和等全(===)的区别与练习
17 1
|
8月前
|
XML JSON JavaScript
在JavaScript中用json对象创建一个table表格——实战练习
在JavaScript中用json对象创建一个table表格——实战练习
143 0
|
4月前
|
JavaScript
js对象案例练习
js对象案例练习
27 0
|
5月前
|
JavaScript 前端开发
带你读《现代Javascript高级教程》二十四、正则表达式的常见问题与练习(1)
带你读《现代Javascript高级教程》二十四、正则表达式的常见问题与练习(1)
|
5月前
|
JavaScript 前端开发
带你读《现代Javascript高级教程》二十四、正则表达式的常见问题与练习(2)
带你读《现代Javascript高级教程》二十四、正则表达式的常见问题与练习(2)
|
6月前
|
JavaScript 前端开发
JavaScript小练习
JavaScript小练习
|
6月前
|
JavaScript 前端开发
JavaScript小练习
JavaScript小练习
|
7月前
|
JavaScript 前端开发
Javascript数组编程练习
Javascript数组编程练习
53 2

相关产品

  • 云迁移中心