• 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>
  • 相关阅读:
    Vue整合nginx:(1)开发环境npm run dev下,通过nginx解决前后端分离造成的跨域问题
    SpringBoot 整合 ActiveMq
    SpringBoot 整合 slf4j 日志打印
    Java 抽象类的简单使用
    MongoDB基本使用
    node.js修改全局安装文件路径
    Vue + iview框架,搭建项目遇到的相关问题记录
    ThinkPHP重写路由,掩藏public/index.php
    thinkPhP + Apache + PHPstorm整合框架
    Ionic3,装饰器(@Input、@ViewChild)以及使用 Events 实现数据回调中的相关用法(五)
  • 原文地址:https://www.cnblogs.com/java20130723/p/3211464.html
Copyright © 2020-2023  润新知