找回密码
当前位置：前端开发者 > 教程 > 正文

WEB前端开发留言板实例

2018-10-24 分类：教程 阅读(1340) 评论(0)
前端 开发框架
前端开发三大主流框架
前端开发最好的框架是什么

html 代码/JavaScript

<!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>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <title>无标题文档</title>
    <style>
        #te{width:210px;height:120px;border:1px solid #000;}
ul{width:400px;height:500px;border:1px solid #000;margin:10px auto;padding:0;overflow:auto;}
ul li{list-style:none; border-bottom:dashed #000 1px;padding:4px; overflow:hidden; }
</style>
</head>
<body>
    <textarea id=”te” rows=”8″ cols=”40″> </textarea>
    <input type=”button” id=”btn” value=”发送” />
    <ul></ul>
    <script>
        window.onload = function () {
            function getStyle(obj, attr) {
                if (obj.currentstyle) {
                    return obj.currentStyle[attr];
                }
                else {
                    return getComputedStyle(obj, false)[attr];
                }
            };
            function domove(obj, json, q, fn) {
                clearInterval(obj.timer);
                obj.timer = setInterval(function () {
                    for (var attr in json) {
                        if (attr == ‘opacity’) {
                            var iCur = parseInt(getStyle(obj, attr) * 100);
                            var speed = (json.opacity – iCur) / q;
                            speed > 0 ? speed = Math.ceil(speed) : speed = Math.floor(speed);
                            if (iCur == json.opacity) {
                                clearInterval(obj.timer);
                                if (fn) { fn() };
                            }
                            else {
                                obj.style.opacity = (iCur + speed) / 100;
                                obj.style.filter = ‘alpha(opacity:iCur)’
                            };
                        } ///透明度改变
                        else {
                            var iCur = parseInt(getStyle(obj, attr));
                            var dis = parseInt(json[attr]) – iCur;
                            var speed = dis / q;
                            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                            if (iCur != parseInt(json[attr])) {
                                obj.style[attr] = parseInt(getStyle(obj, attr)) + speed + ‘px’;
                            }
                            else {
                                clearInterval(obj.timer)
                                if (fn) { fn() }
                            };
                        } ///非透明度改变
                    }
                }, 30);
            } //运动库
            var oTe = document.getElementById(‘te’);
            var oUl = document.getElementsByTagName(‘ul’)[0];
            var oBtn = document.getElementById(‘btn’);
            oBtn.onclick = function () {
                var oLi = document.createElement(‘li’);
                var aLi = document.getElementsByTagName(‘li’);
                oLi.innerHTML = oTe.value;
                oTe.value = ”;
                if (aLi.length) {
                    oUl.insertBefore(oLi, aLi[0]);
                }
                else {
                    oUl.appendChild(oLi);
                }
                var iHeight = oLi.offsetHeight;
                oLi.style.height = 0;
                oLi.style.opacity = 0;
                domove(oLi, { height: iHeight }, 9, function () {
                    domove(oLi, { opacity: 100 }, 9)
                })
            }
        }
    </script>
</body>
</html>
前端开发 要学几个框架
快速开发前端框架
2017 前端框架快速开发
赞(0)
前端开发者 » WEB前端开发留言板实例
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论