js代码小结

于 2024-12-16 10:05:03 发布
阅读量369 收藏 5
点赞数 7
文章标签： javascript 前端 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_68736843/article/details/144498572
版权

1.页面提示用户输入一个整数，当用户输入的值大于5时，在页面输出一个倒三角形，规定输入6，在页面输出如图左边所示的倒三角形，当输入值小于或等于5时，在页面上输出倒正三角形，规定输入4，在页面输出如图右边所示的倒正三角形。

<body>
    <script type="text/javascript">
        document.write('<center>')
        var t = prompt("请输入一个整数','")
        if (t > 5) {
            for (var i = t; i > 0; i--) {
                for (var j = 0; j < i; j++) {
                    document.write('* &nbsp;&nbsp;')
                }
                document.write('<br/>')
            }
        } else {
            for (var k = t; k > 0; k--) {
                for (var m = 0; m < k; m++) {
                    document.write('* &nbsp;&nbsp;')
                }
                document.write('<br/>')
            }
            for (var n = 1; n <= t; n++) {
                for (var h = 0; h < n; h++) {
                    document.write('* &nbsp;&nbsp;')
                }
                document.write('<br/>')
            }
        }
    </script>
</body>

2.根据所给素材，在如图1所示的页面文本框中动态显示客户端当前时间。

 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>动态显示系统时间</title>
    <style type="text/css">
        body {
            width: 913px;
            margin: 0px auto;
        }
        
        .main {
            font-family: "黑体";
            font-size: 25px;
            color: #CC0000;
        }
        
        .clock {
            font-size: 50px;
            color: #CC0000;
            border-style: none
        }
    </style>

</head>

<body onload="disptime()">
    <div class="top">
        <img src="images/banner.png" alt="banner" />
    </div>
    <div class="main">
        当前系统时间：<input class="clock" type="text" id="time" />
    </div>
    <script type="text/javascript">
        function disptime() {
            var time = new Date()
            var hour = time.getHours()
            var minute = time.getMinutes()
            var second = time.getSeconds()
            if (minute < 10)
                minute = '0' + minute
            if (second < 10)
                second = '0' + second
            document.getElementById('time').value = hour + ':' + minute + ':' + second;
            var myTime = setTimeout('disptime()', 1000)
        }
    </script>
</body>

</html>

3.在学信网注册时，点击文本框“就读学校”右侧的“选择”按钮，弹出学校列表窗口，选择某所学校后，自动关闭列表窗口返回注册窗口，“就读学校”文本框自动填充为之前选择的学校。

 

 index.html文件

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>账号注册_学信网</title>
    <link href="css/mystyle.css" rel="stylesheet" type="text/css" charset="utf-8">

</head>

<body>
    <div class="bluebg">
        <div class="header">
            <div class="headerlinks">
                <a href="http://www.chsi.com.cn/#" target="_blank">学信网</a>　|　<a href="#" target="_blank">学信档案</a>　|　<a href="#" target="_blank">阳光高考</a>　|　<a href="#" target="_blank">研招网</a>　|　<a href="#" target="_blank">全国征兵网</a>　|　<a href="#" target="_blank">大创网</a>
            </div>
            <div class="headertxt">
                <a href="#" target="_blank">首页</a>　|　<a href="#" target="_blank">联系我们</a>
            </div>
        </div>
        <div class="box clearfix">

            <div class="t">
                欢迎注册学信网账号
                <div class="tlogin">
                    已有学信网账号<a href="#" class="regsuclogin">立即登录</a>
                </div>
            </div>
            <div class="mainbox clearfix">
                <form>
                    <div class="maintxt">
                        注册成功后可以使用中国研究生招生信息网、阳光高考、学信档案、全国征兵网、全国大学生创业服务网提供的服务。<br> （
                        <a href="#" target="_blank" class="colorblue" style="text-decoration:underline;">什么是学信网账号？</a>　<a href="#" target="_blank" class="colorblue" style="text-decoration:underline;">了解更多</a>）
                    </div>
                    <div class="regline clearfix">
                        <table width="353" border="0">
                            <tr>
                                <td width="112">手机</td>
                                <td width="231"><input type="text" /></td>
                            </tr>
                            <tr>
                                <td>密码</td>
                                <td><input type="password" /></td>
                            </tr>
                            <tr>
                                <td>姓名</td>
                                <td><input type="text" /></td>
                            </tr>
                            <tr>
                                <td>身份证号</td>
                                <td><input type="text" /></td>
                            </tr>
                            <tr>
                                <td>就读学校</td>
                                <td><input type="text" id="school" />
                                    <INPUT type="button" name="regButton" value=" 选择 " onclick="openwindow()">
                                </td>
                            </tr>
                            <tr>
                                <td>Email</td>
                                <td><input type="text" /></td>
                            </tr>
                            <tr>
                                <td colspan="2"><input type="submit" value="确定了，马上提交" /></td>
                            </tr>
                        </table>
                </form>
                <script>
                    function openwindow() {
                        window.open("school.html", "", "width=400,height=400,top=100,left=200,toolbar=no,scrollable=yes,resizable=yes,llocation=no,menubar=no")
                    }
                </script>

</body>

</html>

 mystyle.css文件

body,p,ul,ol,li,img,h1,h2,h3,h4,h5,h6,form,fieldset,legend,select,input{margin:0; padding:0;}
body{background:#FFFFFF;color:#333333;text-align:left;font:14px/28px Tahoma, Helvetica, Arial, ��Microsoft YaHei��, \5FAE\8F6F\96C5\9ED1, SimSun, sans-serif;}
ul,ol,li{list-style:none;}
select,input{vertical-align:middle; font-size:12px; font-family: Tahoma, Helvetica, Arial, ��Microsoft YaHei��, \5FAE\8F6F\96C5\9ED1, SimSun, sans-serif;}
img{border:0;}
p{text-indent:2em;}
a,a:link,a:visited{color:#333333; text-decoration:none;}
a:hover{color:#DC5925; text-decoration:underline;}
.clearfix:after{content:'\0020'; display:block; clear:both; height:0;}
.clearfix{zoom:1;}
.clearFloat{ clear:both;height:0;line-height:0;font-size:0; overflow:hidden;}
.bluebg{ background:#eff3f6; padding-bottom:25px;}
.header{ height:200px; background:#6095C1; color:#e4f2fe;}
.headerlinks{ width:980px; margin:0 auto; height:40px; line-height:40px; text-align:right;}
.headertxt{ width:980px; margin:0 auto; height:50px; padding-top:50px; background:url("https://t4.chei.com.cn/account/images/theme/normal/yz_banner_bg.png?20170623 ") no-repeat left top; line-height:50px; text-align:right;}
.header a,.header a:link,.header a:visited{color:#e4f2fe;}
.box{ width:980px; margin:-60px auto 0 auto; padding-bottom:20px; border:10px solid #EFF3F6; box-shadow:0 0 5px #999; background:#FFF;}
.t{ position:relative; width:800px; height:60px; margin:0 auto; border-bottom:1px solid #EFF3F6; line-height:60px; text-align:center; font-size:24px;}
.tlogin{ position:absolute; top:10px; right:0; font-size:14px; line-height:40px;}
.tlogin input{ display:inline-block; width:60px; height:30px; margin-left:10px; vertical-align:middle; border:none; border-radius:4px; background:#6095C1; font-size:14px; font-weight:700; text-align:center; color:#FFF; cursor:pointer;}
.tlogin input:hover{ opacity:.8;}
.mainbox{ width:800px; margin:0 auto;}
.maintxt{ height:65px; line-height:24px; text-align:left;padding-top: 10px;}
.regline{ width:800px; margin-bottom:15px; line-height:30px; clear:both;}
.regtitle{ float:left; display:inline; width:100px; padding-right:23px; text-align:right;}
.regtitles{ width:50px; padding-right:10px;}
.regimpt{ float:left; display:inline; margin-left:-15px; color:#F00;}
.regiptbox{ position:relative; float:left; display:inline;}
.regipt{ width:190px; height:20px; padding:4px; border:1px solid #CCC; border-radius:4px; line-height:20px;font-size:14px; font-weight:700;}
.regipts{ width:60px;}
.regiptl{ width:300px;}
.regslt{ width:200px; height:28px; padding:3px 0; display:block; margin-top:2px; line-height:22px;}
.regsubmit{display:inline-block; width:150px; height:40px; vertical-align:middle; border:none; border-radius:4px; background:#6095C1; font-size:16px; font-weight:700; text-align:center; color:#FFF; cursor:pointer;}
.regsubmit:hover{ opacity:.8;}
a.colorblue{ color:#06C;}
a.regsuclogin,a.regsuclogin:link,a.regsuclogin:visited{display:inline-block; padding:3px 15px; margin-left:8px; border-radius:4px; background:#6095C1; line-height:28px; font-size:14px; font-weight:700; color:#FFF; cursor:pointer;}
a.regsuclogin:hover{ opacity:.8;}
.btnhqjym{ display:block; width:120px; height:30px; margin-top:2px; border:1px solid #AAA; border-radius:4px; background:#F6F6F6; font-size:12px; font-weight:700; text-align:center; color:#333; cursor:pointer;}
.btnhqjym:hover{ background:#FFF;}
.button_disabled{ color:#999;}
.button_disabled:hover{background:#F6F6F6;}
.mleft10{ margin-left:10px;}
input.error{ border:1px solid #e09898; background:#fff1f1;}
.error,.errorMessage{ color:#C00;}
.regtips{ width:465px; color:#666;}
.phonehas{ padding:8px 20px; margin:0 0 15px 123px; border:1px solid #f1e1b1; background:#fffcf3;}
.phonehasdot{ position:absolute; left:366px; top:-8px; width:15px; height:9px; overflow:hidden; background:url("https://t1.chei.com.cn/account/images/theme/normal/yz_arrow.png ") no-repeat 0 0;}

 school.html文件

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>请从列表中选择</title>
    <style>
        #mdA table,
        #mdA table td,
        #mdA table th {
            border: 1px solid #000000;
            border-collapse: collapse;
        }
    </style>

</head>

<body>
    <div id="mdA">
        <table width="300" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td><a href="#" onclick="choose(this)">广东科学技术职业学院</a></td>
            </tr>
            <tr>
                <td><a href="#" onclick="choose(this)">番禺职业技术学院</a></td>
            </tr>
            <tr>
                <td><a href="#" onclick="choose(this)">吉林大学珠海学院</a></td>
            </tr>
            <tr>
                <td><a href="#" onclick="choose(this)">北京师范大学珠海学院</a></td>
            </tr>
            <tr>
                <td><a href="#" onclick="choose(this)">深圳信息职业技术学院</a></td>
            </tr>
            <tr>
                <td><a href="#" onclick="choose(this)">广东轻工职业技术学院</a></td>
            </tr>
            <tr>
                <td><a href="#" onclick="choose(this)">顺德职业技术学院</a></td>
            </tr>
            <tr>
                <td><a href="#" onclick="choose(this)">广东交通职业技术学院</a></td>
            </tr>
            <tr>
                <td><a href="#" onclick="choose(this)">广东水利电力职业技术学院</a></td>
            </tr>
            <tr>
                <td><a href="#" onclick="choose(this)">广东岭南职业技术学院</a></td>
            </tr>
            <tr>
                <td><a href="#" onclick="choose(this)">广东食品药品职业学院</a></td>
            </tr>
            <tr>
                <td><a href="#" onclick="choose(this)">珠海城市职业技术学院</a></td>
            </tr>
            <tr>
                <td><a href="#" onclick="choose(this)">广东建设职业技术学院</a></td>
            </tr>
            <tr>
                <td><a href="#" onclick="choose(this)">民办南华工商学院</a></td>
            </tr>
            <tr>
                <td><a href="#" onclick="choose(this)">广东女子职业技术学院</a></td>
            </tr>
            <tr>
                <td><a href="#" onclick="choose(this)">肇庆医学高等专科学校</a></td>
            </tr>
            <tr>
                <td><a href="#" onclick="choose(this)">清远职业技术学院</a></td>
            </tr>
            <tr>
                <td><a href="#" onclick="choose(this)">广东工贸职业技术学院</a></td>
            </tr>
            <tr>
                <td><a href="#" onclick="choose(this)">广州城建职业学院</a></td>
            </tr>
            <tr>
                <td><a href="#" onclick="choose(this)">广州城市职业学院</a></td>
            </tr>
            <tr>
                <td><a href="#" onclick="choose(this)">广州民航职业技术学院</a></td>
            </tr>
            <tr>
                <td><a href="#" onclick="choose(this)">中山火炬职业技术学院</a></td>
            </tr>
            <tr>
                <td><a href="#" onclick="choose(this)">广东机电职业技术学院</a></td>
            </tr>
            <tr>
                <td><a href="#" onclick="choose(this)">清远职业技术学院</a></td>
            </tr>
            <tr>
                <td><a href="#" onclick="choose(this)">江门职业技术学院</a></td>
            </tr>
            <tr>
                <td><a href="#" onclick="choose(this)">广东省外语艺术职业学院</a></td>
            </tr>
            <tr>
                <td><a href="#" onclick="choose(this)">河源职业技术学院</a></td>
            </tr>
        </table>
    </div>
    <script>
        function choose(obj) {
            var parent = window.opener.document.getElementById('school')
            parent.value = obj.innerHTML
            self.close()
            window.opener.focus()
        }
    </script>
</body>

</html>

4.将冬奥会网友的祝福制作成手风琴动画效果，效果如图所示。单击选项，下面的内容以动画方式展开，再次单击，以动画方式收缩。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>手风琴动画效果</title>
    <style>
        body {
            width: 100%;
        }
        
        div.container {
            width: 70%;
            margin: 0 auto;
            border-radius: 20px;
        }
        
        button.accordion {
            background-color: rgb(253, 245, 175);
            color: #444;
            cursor: pointer;
            padding: 18px;
            width: 100%;
            border: none;
            text-align: left;
            outline: none;
            font-size: 15px;
            transition: 0.4s;
        }
        
        button.accordion.active,
        button.accordion:hover {
            background-color: rgb(255, 199, 166);
        }
        
        div.panel {
            padding: 0 18px;
            background-color: rgb(252, 250, 232);
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.2s ease-out;
        }
    </style>
</head>

<body>
    <div class="container">
        <h2>北京冬奥会感受墙</h2>
        <p>点击以下选项显示折叠内容</p>

        <button class="accordion">筑梦冰雪，热盼冬奥</button>
        <div class="panel">
            <p>
                2020年如同一列伤痕累累的列车在时代的轨道上留下了深深的痕迹，每个人都身在其中，病疫之际，各国同舟共济，众志成城，人类命运共同体的含义尽显其中。得见今日破冰之下，春暖花开。 2015年7月31日下午，亿万中国观众屏住呼吸，期待着2022冬奥会举办地结果的揭晓，当国际奥委会主席巴赫宣布“北京”时，神州大地翘首以待的亿万中国人沸腾了！如同14年前北京获得2008年奥运会承包权时一样，中国人民在这一刻都沉浸在忘我的兴奋状态之中。
            </p>
        </div>

        <button class="accordion">相约冰雪，共迎冬奥</button>
        <div class="panel">
            <p>
                北京冬奥会开幕倒计时一年了！新闻媒体、朋友圈、微信群里洋溢着欢声笑语，大家纷纷畅谈对2022年冬奥会的期盼。2008年的北京夏季奥运会的盛况仿佛就在昨天，那时候我还是一名大学三年级的学生。不曾想，转眼间2022年冬奥会已走近我们的身边，如今，我已是一个孩子的妈妈。时光荏苒，变的是年龄和岁月，不变的是对奥运会的强烈期盼。 北京冬奥会倒计时一周年活动在国家游泳中心“冰立方”举行。冬奥会和冬残奥会的火炬外观设计对外发布。火炬是展示奥运精神和中国特色文化的重要载体，薪火相传的奥林匹克精神，正是在火炬的传递过程中被继承和发扬。2022年冬奥会火炬的名字为“飞扬”，放飞体育梦想，激扬奋斗热情。
            </p>
        </div>

        <button class="accordion">全民冬奥，一起向未来！</button>
        <div class="panel">
            <p>
                有一种火焰起于繁华之中，经几万里山河不灭，传递着和平的信仰，点燃着成功的希望；有一种竞技蔓延于和平之时，经数万次胜负不愠，传递着坚持不懈的精神，歌唱着棋逢对手的佳话。奥林匹克运动将乐观坚强的奥运精神传播到五湖四海。2015年7月31日，在祖国不懈的努力下，在14亿人民的期盼中，2022冬奥会申办成功，北京光荣地成为“双奥”城市。 伴随着申奥成功的，是紧张刺激的申办答辩，是为了营造合适比赛环境而夜以继日的人工造雪，是本着绿色、共享、开放、廉洁的原则精心设计的奥运场馆。无数的中华儿女为了冬奥会的顺利举办，为了中华民族的荣誉，努力奋斗，成功建立了北京—张家口—延庆赛场。
            </p>
        </div>
    </div>
</body>
<script>
    var acc = document.querySelectorAll('.accordion')
    for (var i = 0; i < acc.length; i++) {
        acc[i].onclick = function() {
            this.classList.toggle('active')
            var panel = this.nextElementSibling
            if (panel.style.maxHeight) {
                panel.style.maxHeight = null
            } else {
                panel.style.maxHeight = panel.scrollHeight + 'px'
            }
        }
    }
</script>

</html>

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值