js特效2（4个特效）

最新推荐文章于 2022-06-14 17:59:21 发布

甜甜今天学了吗

最新推荐文章于 2022-06-14 17:59:21 发布

阅读量167

点赞数

文章标签： html css javascript

本文链接：https://blog.csdn.net/dawanhjiao/article/details/104799895

版权

1.输入框焦点的获取和失去

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>输入框焦点</title>
</head>
<body>
<input type="text" placeholder="请输入姓名"><!--placeholder：提示-->
<script>
    window.onload = function (ev) {
        var input = document.getElementsByTagName('input')[0];
        //获得焦点
        input.onfocus = function (ev) {
            this.style.width = '400px';
            this.style.height = '40px';
            //this.style.outline = 'none';//去掉框的外边线
            this.style.fontSize = '10px';
        };
        //失去焦点
        input.onblur = function (ev1) {
            this.style.width = '200px';
        }
    }
</script>
</body>
</html>

2.上传图片的格式验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上传图片的验证</title>
</head>
<body>
<label>上传图片</label>
<input type="file" id="file">
<!--我想让图片的后缀为jpg、png、gif为合格-->
<script>
    window.onload = function (ev) {
        var file = document.getElementById('file');
        //监听作用域的变化
        file.onchange = function (ev1) {
            //获取用户上传的路径
            var path = this.value;
            //截取后缀
            var hou = path.substr(path.lastIndexOf('.'));
            //统一转成小写
            var small = hou.toLowerCase();
            //判断
            if (small === '.jpg' || small === '.png' || small === '.gif' ){
                alert('你选择的图片格式正确');
            }
            else{
                alert('不正确！！！');
            }
        }
    }
</script>
</body>
</html>

3.Tab选项卡

window.onload = function (ev) {
    var allLi = f('head').getElementsByTagName('li');
    var alldom = f('content').getElementsByClassName('dom');
    for (var i = 0; i < allLi.length; i++) {
        var li = allLi[i];
        (function (i) {
            li.onmouseover = function (ev1) {
                //清除同级别的选中样式
                for (var j = 0; j < allLi.length; j++) {
                    allLi[j].className = '';
                    alldom[j].style.display = 'none';
                }
                this.className = 'selected';
                //在html里面是class，但是在js里面就是className
                alldom[i].style.display = 'block';
            }
        })(i)
    }
};
function f(id) {
    return document.getElementById(id);
};

4.发表评论

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发表评论</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #box{
            width: 800px;
            border: 1px solid #ccc;
            margin: 100px auto;
            padding: 20px;
        }
        #text{
            width: 80%;
            height: 120px;
        }
        .top{
            margin-bottom: 20px;
        }
        #ul{
            margin: 0 80px;
        }
        #ul li{
            border-bottom: 1px dashed #CCCCCC;
            color: red;
            line-height: 44px;
        }
        #ul li a{
            float: right;
        }
    </style>
</head>
<body>
<div id="box">
    <div class="top">
        <label>
            发表评论：
            <textarea id="text" cols="60" rows="10"></textarea>
        </label>
        <button id="btn">发表</button>
    </div>
    <ul id="ul">
    </ul>
</div>
</body>
<script>
    window.onload = function (ev) {
        f('btn').addEventListener('click',function (ev1) {
            var content = f('text').value;
            if (content.length === 0){
                alert("请输入评论的内容：");
                return;
            }
            //创建li标签
            var ul = f('ul');
            var li = document.createElement('li');
            li.innerHTML = content + '<a href="javascript:;">删除</a>';//让删除变成无效的点击
            ul.insertBefore(li,ul.children[0]);//永远插到第一个li标签的前面
            //清除输入框中的内容
            f('text').value = "";
            //删除评论
            var aa =ul.getElementsByTagName('a');
            for (var i = 0; i < aa.length; i++){
                var a = aa[i];
                a.addEventListener('click',function (ev1) {
                    this.parentNode.remove();
                })
            }
        });
        function f(id) {
            return document.getElementById(id);
        }
    }
</script>
</html>

甜甜今天学了吗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js特效2（4个特效）

1.输入框焦点的获取和失去<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>输入框焦点</title></head><body><input type="text" placehold...
复制链接

扫一扫