javascrip简单程序

将网上的一些JavaScript代码套用到了自己的程序中：
<!DOCTYPE html>
<html>
<head>
<title>高阳个人主页</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
/*设置超链接样式*/
table {
    border-collapse: collapse;
    border-spacing: 0;
}

a {
    color: #5086a5;
    text-decoration: none;
    font-size: 12px;
}

a:hover {
    color: #5086a5;
    text-decoration: underline;
    font-size: 12px;
}

a:visited {
    color: #5086a5;
    font-size: 12px;
}
/*整个tab层居中，宽度为600px*/
#tabDiv {
    width: 600px;
    margin: 1em auto;
    padding-bottom: 10px;
    border-right: #b2c9d3 1px solid;
    border-top: #b2c9d3 1px solid;
    border-left: #b2c9d3 1px solid;
    border-bottom: #b2c9d3 1px solid;
    background: #ffffff;
}
/*tab头的样式*/
#tabsHead {
    padding-left: 0px;
    height: 26px;
    background-color: #e8f7fc;
    font-size: 1em;
    margin: 1px 0px 0px;
    color: #5086a5;
    line-height: 26px;
}
/*已选tab头（超链接）的样式*/
.curtab {
    padding-top: 0px;
    padding-right: 10px;
    padding-bottom: 0px;
    padding-left: 10px;
    border-right: #b2c9d3 1px solid;
    font-weight: bold;
    float: left;
    cursor: pointer;
    background: #ffffff;
}
/*未选tab头（超链接）的样式*/
.tabs {
    border-right: #c1d8e0 1px solid;
    padding-top: 0px;
    padding-right: 10px;
    padding-bottom: 0px;
    padding-left: 10px;
    font-weight: normal;
    float: left;
    cursor: pointer;
}
p {
    font-size: 12pt;
    text-indent: 2em;
}
li {
      border-bottom-style: solid;
      border-bottom-color: #EEE;
      border-bottom-width: thin;
      height: 25px;
    font-family: "宋体";
    font-size: 12pt;
}
</style>

<div></div>
<script>
    var div = document.querySelector('div');
    getDate();
    setInterval(getDate, 1000);

    function getDate() {
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        month = month < 10 ? '0' + month : month;
        var dates = date.getDate();
        dates = dates < 10 ? '0' + dates : dates;
        var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        var day = date.getDay();
        var hour = date.getHours();
        var half = hour >= 12 ? '下午' : '上午';
        hour = hour <= 12 ? hour : (hour - 12);
        hour = hour < 10 ? '0' + hour : hour;
        var min = date.getMinutes();
        min = min < 10 ? '0' + min : min;
        var sed = date.getSeconds();
        sed = sed < 10 ? '0' + sed : sed;
        div.innerHTML = (year + '年' + month + '月' + dates + '日 ' + arr[day] + ' ' + half + hour + '点' + min + '分' + sed + '秒');
    }
</script>


<script type="text/jscript">    
        //显示tab（tabHeadId：tab头中当前的超链接；tabContentId要显示的层ID）
        function showTab(tabHeadId,tabContentId) 
        {
            //tab层
            var tabDiv = document.getElementById("tabDiv");
            //将tab层中所有的内容层设为不可见
            //遍历tab层下的所有子节点
            var taContents = tabDiv.childNodes;
            for(i=0; i<taContents.length; i++) 
            {
                //将所有内容层都设为不可见
                if(taContents[i].id!=null && taContents[i].id != 'tabsHead')
                {
                    taContents[i].style.display = 'none';
                }
            }
            //将要显示的层设为可见
            document.getElementById(tabContentId).style.display = 'block';          
            //遍历tab头中所有的超链接
            var tabHeads = document.getElementById('tabsHead').getElementsByTagName('a');
            for(i=0; i<tabHeads.length; i++) 
            { 
                //将超链接的样式设为未选的tab头样式
                tabHeads[i].className='tabs'; 
            }
            //将当前超链接的样式设为已选tab头样式
            document.getElementById(tabHeadId).className='curtab';
            document.getElementById(tabHeadId).blur();
        }

        //文字自动滚动
        window.onload = () => {
            //获取元素
            var roll = document.getElementById("rollCon"),
            div = roll.innerHTML,
            //设置样式
            setCss = (_this, cssOption) => {
                //检测节点类型
                if(!_this || _this.nodeType === 3 || _this.nodeType === 8 || !_this.style)
                    return 
                for(var css in cssOption) {
                    _this.style[css] = cssOption[css]
                }
                return _this
            }
            roll.innerHTML = "<div id='rollCon_roll'>" + div + "</div>"
            //初始化样式
            setCss(rollCon, {             
                "position" : "relative", //设置相对位置
                "overflow" : "hidden"   //当内容超出文本框时隐藏
            })
            var timeRoll = document.getElementById("rollCon_roll"),
            //修改top值
            timeoutRoll = () => {
                var height = timeRoll.offsetHeight,
                    top = parseInt(timeRoll.style.top, 10),
                    tt = height > Math.abs(top) || top >= 0 ? top - 10 : (height || 0)
                //修改样式
                setCss(timeRoll, {
                    "top" : tt + "px"
                })
                //定时调用
                setTimeout(timeoutRoll, 200)
            }
            timeoutRoll()
            //设置先对位置
            setCss(timeRoll, {
                "position" : "relative",
                "top" : "0px"
            })
        }
</script>

</head>

<body>
    <div style="width: 100%; font-family: 微软雅黑; text-align: center; font-size: 20pt;">高阳个人主页</div>

    <div id="tabDiv" style="width: 1000px">

        <div id="tabsHead">
            <a id="tabs1" class="curtab" href="javascript:showTab('tabs1','tabContent1')">基本资料</a> <a id="tabs2" class="tabs" href="javascript:showTab('tabs2','tabContent2')">获奖记录</a> <a id="tabs3" class="tabe" href="javascript:showTab('tabs3','tabContent3')">最新动态</a>
        </div>

        <div id="tabContent1" style="display: block">
            <table style="border-width: 0; width: 100%">
                <tr>
                    <td rowspan="3" style="width: 300px; text-align: center"><img alt="姚明" src="./image/p.jpg" style="width: 280px" /></td>
                    <td colspan="3" rowspan="3">
                        <table border="1" style="border-left-color: green; border-bottom-color: green; width: 701px; border-top-style: solid; border-top-color: green; border-right-style: solid; border-left-style: solid; height: 380px; border-right-color: green; border-bottom-style: solid">
                            <tr>
                                <td style="width: 50%">姓名：高阳</td>
                                <td style="width: 50%">生日：2001.12.08</td>
                            </tr>
                            <tr>
                                <td style="width: 50%">国籍：中华人民共和国</td>
                                <td style="width: 50%">出生地：安徽省安庆市</td>
                            </tr>
                            <tr>
                                <td style="width: 50%; height: 29px">身高：175cm</td>
                                <td style="width: 50%; height: 29px">体重：70kg</td>
                            </tr>
                            <tr>
                                <td style="width: 50%">血型：B</td>
                                <td style="width: 50%">星座：天蝎座</td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <h2>学习经历</h2>
                                    <div id="rollCon" class="rollCon">
                                    <p>2007年9月进入老家的幼儿园开启了学习生涯。</p>
                                    <p>2008年9月进入孔城镇实验小学开始了小学生涯。</p>
                                    <p>2011年9月由于姐姐的学习原因进行转学到双港中心小学，在双港镇度过了3年时光。</p>
                                    <p>2014年9月姐姐中学毕业再次因此中学回到桐城市进入桐城市第二初中开始了3年的初中生涯。</p>
                                    <p>2017年6月进行中考，9月进入桐城市天城中学度过了难忘的3年高中生活。</p>
                                    <p>2020年6月进行高考，9月进入石家庄铁道大学</p>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                </tr>
                <tr>
                </tr>
            </table>
        </div>
        <!--以下为获奖记录部分内容-->
        <div id="tabContent2" style="display: none">
            <img src="./image/q.jpeg" alt="错误">
            <ul>
                <ul style="color:#5086a5">无最新获奖记录</ul>
            </ul>
        </div>
        <!--以下为最新动态部分内容-->
        <div id="tabContent3" style="display: none" >
            <ul>
                <li>姓名：学号</li>
                <li>学号20204161</li>
                <li>学校：石家庄铁道大学</li>
                <li>院系：信息学院软件工程</li>
                <li>班级：信2005-2</li>
            </ul>
        </div>
    </div>
</body>
</html>
posted @ 2022-03-22 19:54 无衣123 阅读(35) 评论(0) 收藏举报
刷新页面返回顶部
无衣123

javascrip简单程序

公告
