js练习

简介:                   //验证按钮是否为空 //        window.onload = function () { //            var inputs = document.
<!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" onclick="f1()"/>
</body>
</html>
相关文章
|
安全 大数据 BI
阿里云数据中台发布智能风控引擎Quick Decision和隐私计算DataTrust,升级品牌主张
阿里云数据中台产品矩阵再丰富, Quick Decision和DataTrust双产品公开亮相,同时发布全新品牌视频,升级品牌主张!
15500 0
阿里云数据中台发布智能风控引擎Quick Decision和隐私计算DataTrust,升级品牌主张
|
11月前
|
人工智能 自然语言处理 安全
关于claude怎么下载?这篇文章告诉你答案!
Claude 是 Anthropic 公司开发的一款大型语言模型,被誉为下一代 AI 助手 🤖。它拥有强大的文本处理能力,能够进行对话、写作、翻译、总结等多种任务 📝。
|
消息中间件 Java Kafka
flowable6.8.0正式发布了
flowable6.8.0正式发布了
780 0
|
9月前
|
存储 运维 Kubernetes
正式开源,Doris Operator 支持高效 Kubernetes 容器化部署方案
飞轮科技推出了 Doris 的 Kubernetes Operator 开源项目(简称:Doris Operator),并捐赠给 Apache 基金会。该工具集成了原生 Kubernetes 资源的复杂管理能力,并融合了 Doris 组件间的分布式协同、用户集群形态的按需定制等经验,为用户提供了一个更简洁、高效、易用的容器化部署方案。
393 16
正式开源,Doris Operator 支持高效 Kubernetes 容器化部署方案
|
10月前
|
机器学习/深度学习 人工智能 负载均衡
利用AI智能分析代理IP流量:提升网站性能的新策略
在数字时代,网站性能至关重要。代理IP技术广泛应用于突破地域限制、保护隐私和优化访问速度,但也带来了服务器负担加重和安全风险。AI智能分析代理IP流量成为有效策略,通过精准识别、动态调整和预测分析,提升网站性能和安全性。案例显示,某电商平台通过AI智能分析成功提升了访问速度和安全性,用户满意度显著提高。未来,AI技术将进一步优化代理IP应用,助力网站发展。
189 5
|
11月前
|
缓存 安全 程序员
易语言在跨平台开发中有哪些常见的技术挑战和解决方案
易语言在跨平台开发中有哪些常见的技术挑战和解决方案
247 1
|
网络协议 数据安全/隐私保护
Socks5代理和HTTP代理有哪些优缺点?
SOCKS5和HTTP代理对比:SOCKS5支持TCP/UDP,提供身份验证和数据加密,性能优但无法处理HTTP头部信息;HTTP代理能读取头部做细粒度控制,广泛支持但仅限HTTP协议,可能影响性能。选择取决于具体需求和应用支持。
|
11月前
|
人工智能 搜索推荐 量子技术
关键词感知检索
【11月更文挑战第7天】关键词感知检索是一种先进的信息检索技术,通过识别、分析和匹配用户输入的关键词,提供更精准的搜索结果。它不仅涉及简单的字符串匹配,还考虑了关键词的语义关系、文本结构等因素。主要应用于搜索引擎、学术文献检索和企业内部文档管理等领域。未来的发展趋势包括语义理解的深化和多模态融合。
239 0
解决办法:无法修正错误,因为您要求某些软件包保持现状,就是它们破坏了软件包间的依赖关系。
解决办法:无法修正错误,因为您要求某些软件包保持现状,就是它们破坏了软件包间的依赖关系。
1882 0