zoukankan      html  css  js  c++  java
  • 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
            {
                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>
  • 相关阅读:
    (004)maven执行junit单元测试,指定执行哪些测试类
    (009)Nginx静态资源web服务
    (008)Nginx的访问控制_介绍实现访问控制的基本方式
    (03)Nginx将配置文件default.conf重命名后报Job for nginx.service failed because the control process exited with error code. See "systemctl status nginx.service" and "journalctl -xe" for details.解决方案
    (007)Nginx的请求限制_配置语法与原理
    (006)Nginx之模块讲解
    (005)Nginx之日志log_format
    (004)Nginx默认配置语法解析及演示
    (003)Nginx编译配置参数讲解
    Gym
  • 原文地址:https://www.cnblogs.com/java20130723/p/3211464.html
Copyright © 2011-2022 走看看