博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js练习
阅读量:4946 次
发布时间:2019-06-11

本文共 4384 字,大约阅读时间需要 14 分钟。

<!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" οnclick="f1()"/>
</body>
</html>

转载于:https://www.cnblogs.com/java20130723/archive/2013/03/21/3211464.html

你可能感兴趣的文章
Excel数据生成Sql语句的方法
查看>>
java中random()函数用法介绍
查看>>
C# OLEDB读取EXCEL表格时,某些字段为空解决方法
查看>>
Web前端开发HTML基础(1)
查看>>
bzoj1934: [Shoi2007]Vote 善意的投票
查看>>
The New Methodology新方法论
查看>>
Linux 进程管理剖析: Linux 同步方法剖析 内核原子,自旋锁和互斥锁
查看>>
day06---selenium剩余操作和自动登录
查看>>
Promise 基础学习
查看>>
干货!前端常见兼容性问题
查看>>
linux下mail命令使用
查看>>
晚安西南-----远控房魅影二之FKQ1440-14
查看>>
【例题】一笔画问题
查看>>
cuda8.0 + cudnn6 + tensorflow1.4 xing
查看>>
C# 字符串转换值类型
查看>>
nginx rewrite
查看>>
Oracle 身份验证方式
查看>>
整体贪心 + 局部01背包 之 hdu 2546
查看>>
浏览器渲染和服务器渲染区别
查看>>
sublime 自定义配置python开发环境
查看>>