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>
相关文章
|
4月前
|
资源调度 JavaScript 前端开发
如何开始使用 Next.js?
【8月更文挑战第4天】如何开始使用 Next.js?
55 3
|
6月前
|
JavaScript 安全 前端开发
JS神奇的或0(|0)
可以看到明显的带或0运算与不带或0运算的结果无论是位数还是符号位都有不同。 那这中间到底发生了什么? 这里找一个数字为例:117063531626496 要想验证这个问题,思路如下: 1,对比变更前后的数字的二进制格式 2,找到是否有数字表示的安全边界 首先按照思路1,我们看一下这个数字和这个数字或0后的二进制格式分别是什么:
|
7月前
|
JavaScript 前端开发
初识JS
这篇内容介绍了JavaScript的基础知识,包括DOM和BOM(相当于内置模块和第三方模块)、变量的声明(var、let、const的特点和区别)、数组操作(如push、pop、splice等)、字典操作以及DOM操作示例。变量部分强调了var的变量提升和块级作用域问题,let和const的块级作用域和不可重复声明,以及const用于创建不可变的常量。在实际应用中,展示了如何动态改变HTML元素内容和创建新元素的示例。
|
7月前
|
JavaScript 前端开发
什么是js?
什么是js?
|
7月前
|
JavaScript
this的使用(js的问题)
this的使用(js的问题)
20 0
|
7月前
|
存储 JavaScript 前端开发
js的一些小技巧
js的一些小技巧
|
JavaScript
js小技巧(2)
js小技巧(2)
|
JSON 缓存 JavaScript
JS之12个小技巧
JS之12个小技巧
109 0
JS之12个小技巧
|
JavaScript
一些js 小技巧
一些js 小技巧
104 0
|
JSON 前端开发 区块链
ethers.js
如果你已经在以太坊上开发过DApp,那你在前端JavaScript中可能用过web3.js。Ethers.js则是一个轻量级的web3.js替代品,在本文中,我们将学习如何使用Ether.js构建一个简单的DApp。
1701 0