JavaScript基础实战

最新推荐文章于 2022-03-16 22:28:39 发布
最新推荐文章于 2022-03-16 22:28:39 发布
阅读量453 收藏
点赞数 1
分类专栏： H5 JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27262727/article/details/70141436
版权
H5 同时被 2 个专栏收录
2 篇文章 0 订阅
订阅专栏
JS
1 篇文章 0 订阅
订阅专栏

a) 设计一个导航栏，每个导航栏按键都可以跳转到对应的页面；

b) 生活服务框的设计：仿照淘宝的服务框，设计一个淘宝的生活服务页面；

c) 设计一个CSS表格，显示你的个人信息，当鼠标放在信息上时，显示你的个人介绍，如：姓名信息，爱好信息，专业信息；

d) 距离毕业还剩下xx年xx月xx日xx时xx分xx秒xxx毫秒；(2018年6月20日毕业)

1) 设计一个导航栏，每个导航栏按键都可以跳转到对应的页面；

步骤：本实验采用CSS跟div盒子对导航栏进行设计。

过程：

header.css

* {
    margin:  0px;
    padding: 0px;
}
.nav {
    width: 600px;
    height: 50px;
    /*border: 1px dashed blue;*/
    margin: 100px auto;

}
.nav ul {
    list-style: none;
}
.nav ul li {
    float: left;
    width: 150px;
    line-height: 50px;
    text-align: center;
}
/*超链接美化*/
.nav ul li a {
    display: block;
    width: 150px;
    height: 50px;
    text-decoration: none;
    background-color: #abd5ff;
    color: rgba(27,14, 255,0.3);
    border-radius: 20px20px20px20px;
}
/*鼠标放在超链接上面的效果*/
.nav ul li a:hover{
    background-color: orange;
    color: black;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航栏</title>
    <link href="./images/header.css"rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="nav">
    <ul>
        <li><ahref="#">首页</a></li>
        <li><ahref="1_生活服务框的设计.html">生活服务框</a></li>
        <li><ahref="2_个人信息.html">个人信息</a></li>
        <li><ahref="#">毕业倒计时</a></li>
    </ul>
</div>
</body>
</html>

2）生活服务框的设计：仿照淘宝的服务框，设计一个淘宝的生活服务页面

步骤：本实验采用CSS精灵跟div盒子对生活服务窗进行设计。

过程：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生活服务框的设计</title>
    <link href="./images/header.css"rel="stylesheet" type="text/css"/>
    <style>

        body, ul,li {
            margin: 0px;
            padding: 0px;
        }

        .life {
            width: 248px;
            height: 212px;
            /*overflow: hidden;*/
            margin: 100px auto;
            /*border: 1px solid #e4e4e4;*/
        }

        .life ul {
            list-style-type: none;
            width: 252px;
        }

        .life ul li {
            float: left;
            width: 62px;
            height: 70px;
            border: 1px solid#e4e4e4;
            margin: -1px0px0px-1px;
            position: relative;
            top: 0px;
            left: 0px;
            /*z-inde只对定位生效*/
            z-index: 0;
        }

        .life ul li:hover{
            border-color: #C81623;
            z-index: 1;
        }

        .life ul li a {
            display: block;
            width: 62px;
            height: 70px;
            text-align: center;
            text-decoration: none;
            color: #C81623;
            padding-top: 48px;
            font-size: 12px;
            position: relative;
            top: 0px;
            left: 0px;

        }
life ul li a:hover{
            color: #817978;
        }

        .life ul li a i {
            display: block;
            width: 25px;
            height: 25px;
            background: url("./images/taobao_sprite.png")no-repeat 0px top;
            position: absolute;
            top: 12px;
            left: 18px;
        }

        .life ul li a i:hover{
            background-position: 0px0px;
        }

    </style>
    <script>

function $(id) {
    return document.getElementById(id);
}

window.onload= function() {
    //获取了所有的i
    varis = $("life").getElementsByTagName("i");

    var span= $("life").getElementsByTagName("span");
    var arr= ["话费","机票","彩票","游戏","购物","话费","机票","彩票","游戏","购物","话费","机票","彩票","游戏","购物"];

    for (vari = 0; i < is.length; i++) {
        is[i].style.backgroundPositionY= (-44 * i) + "px";
        span[i].innerHTML= arr[i];

    }

    //鼠标移动上去的时候,图片变色
    varindex;
    var lis= $("life").getElementsByTagName("li");
    for(vari = 0;i<lis.length; i++){
        lis[i].index= i;
    }

            for(vari = 0; i < lis.length; i++) {
            lis[i].onmouseover= function() {
                //排他思想:干掉别人, 留下自己
                for(var j= 0; j < lis.length;j++) {
                    span[j].style.color= "#C81623";
                }
                span[this.index].style.color= "#e4e4e4";
            }
        }

}
    </script>
</head>
<body>
<div class="nav">
    <ul>
        <li><ahref="#">首页</a></li>
        <li><ahref="1_生活服务框的设计.html"><fontcolor="black">生活服务框</font></a></li>
        <li><ahref="2_个人信息.html">个人信息</a></li>
        <li><ahref="3_其它.html">毕业倒计时</a></li>
    </ul>
</div>

<div class="life"id="life">
    <ul>
        <li>
            <a href="#">
                <i></i>
                <span>话费</span>
            </a>
        </li>
        <li><ahref="#"><i></i><span>机票</span></a></li>
        <li><ahref="#"><i></i><span>彩票</span></a></li>
        <li><ahref="#"><i></i><span>话费</span></a></li>
        <li><ahref="#"><i></i><span>话费</span></a></li>
        <li><ahref="#"><i></i><span>话费</span></a></li>
        <li><ahref="#"><i></i><span>话费</span></a></li>
        <li><ahref="#"><i></i><span>话费</span></a></li>
        <li><ahref="#"><i></i><span>话费</span></a></li>
        <li><ahref="#"><i></i><span>话费</span></a></li>
        <li><ahref="#"><i></i><span>话费</span></a></li>
        <li><ahref="#"><i></i><span>话费</span></a></li>
    </ul>
</div>

</body>
</html>

3）设计一个CSS表格，显示你的个人信息，当鼠标放在信息上时，显示你的个人介绍，如：姓名信息，爱好信息，专业信息；

步骤：本实验采用CSS跟JavaScript对CSS表格显示个人信息进行设计。

过程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS表格-显示个人信息</title>
    <link href="./images/header.css"rel="stylesheet" type="text/css"/>
    <style>

        .content {
            margin-left: 290px;
            width: 300px;
            height: 350px;
            display: none;
        }
        .content lie
        {
            margin-top: 10px;
            float: left;
            width: 200px;
            height: 40px;
            text-align: center;
            border: 1px solid black;
            line-height: 40px;
        }
        .box .a:hover
        {
            color: orange;
            background-color:blue;
        }
        .box1 {
            width: 500px;
            height: 250px;
            border: 1px solid blue;
            margin: 0px auto;
        }
        .box1 .tr{
            width: 500px;
            height: 48px;
            border: 1px solid blue;
            margin: 0px auto;
        }
        .box1 .tr.left{
            float: left;
            width: 248px;
            height: 48px;
            border: 1px solid blue;
            margin: 0px auto;
        }
        .box1 .tr.right{
            float: right;
            width: 248px;
            height: 48px;
            border: 1px solid blue;
            margin: 0px auto;
        }

    </style>

    <script>
        window.onload= function () {

            var a= document.getElementById("a");
            var a1= document.getElementById("a1");

            a.onmousemove= function () {
                a1.style.display= "block";
            }
            a.onmouseout= function () {
                a1.style.display= "none";
            }
        }
    </script>

</head>
<body>
<div class="nav">
    <ul>
        <li><ahref="#">首页</a></li>
        <li><ahref="1_生活服务框的设计.html">生活服务框</a></li>
        <li><ahref="2_个人信息.html"id="a">个人信息</a></li>
        <li><ahref="3_其它.html"><font>毕业倒计时</font></a></li>
    </ul>
</div>
<div class="box1"id="a1">
<div class="tr">
    <div class="td">
        <div class="left"><h2 align="center">姓名</h2></div>
        <div class="right"><h2align="center">XXXX</h2></div>
    </div>
</div>
    <div class="tr">
        <div class="left"><h2align="center">专业</h2></div>
        <div class="right"><h2align="center">XXXX</h2></div>
    </div>
    <div class="tr">

        <div class="left"><h2align="center">爱好</h2></div>
        <div class="right"><h2align="center">XXXX</h2></div>

    </div>
    <div class="tr">
        <div class="left"><h2align="center">电话</h2></div>
        <div class="right"><h2align="center">XXXX</h2></div>
    </div>
    <div class="tr">
        <div class="left"><h2align="center">E-mail</h2></div>
        <div class="right"><h2align="center">XXXX</h2></div>
    </div>
</div>
</body>
</html>

 

4）距离毕业还剩下xx年xx月xx日xx时xx分xx秒xxx毫秒；(2018年6月20日毕业)

步骤：本实验采用JavaScript对Date方法进行操作。

过程：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒计时</title>
    <link href="./images/header.css"rel="stylesheet" type="text/css"/>
    <style>

        #demo {
            width: 500px;
            height: 40px;
            line-height: 40px;
            margin: 100px auto;
            text-align: center;
            border: 2px dashed#e4e4e4;
            border-radius: 20px;
            color: #64e4e4;
            cursor: pointer;
        }

        #demo:hover{
            color: #C81623;
            border-color: #C81623;
        }
    </style>
    <script>
        window.onload= function () {
            var demo= document.getElementById("demo");

            var endTime= new Date("2018/06/20 12:00:00");

            setInterval(function() {
                var now= new Date();

                //获取下课时间-当前时间时间差(毫秒数)
                varinterval = endTime.getTime() - now.getTime();

                var ms= interval % 1000;
                var second= parseInt(interval/1000)%60;
                var minute= parseInt(interval/1000/60) %60;
                var hour= parseInt(interval/1000/60/60) %24 ;
                var date= parseInt(interval/1000/60/60/24) % 365;
                var year= parseInt(interval/1000/60/60/24/365) % 2017;

                second = (second<10) ?"0"+second:second;
                minute = (minute<10) ?"0"+minute:minute;
                hour = (hour<10) ?"0"+hour:hour;
                ms = (ms<10) ?"00"+ms: (ms<100? "0"+ms:ms);
                year= (year<10) ?"00"+year: (year<100? "0"+year:year);

                demo.innerHTML= "距离毕业还剩下"+year+"年"+date+"天"+hour+"时"+minute+"分"+second+"秒"+ms+"毫秒";
            },1);
        }
    </script>
</head>
<body>
<div class="nav">
    <ul>
        <li><ahref="#">首页</a></li>
        <li><ahref="1_生活服务框的设计.html">生活服务框</a></li>
        <li><ahref="2_个人信息.html">个人信息</a></li>
        <li><ahref="3_其它.html"><font>毕业倒计时</font></a></li>
    </ul>
</div>
<div id="demo">距离毕业还剩下xx年xx日xx时xx分xx秒xxx毫秒</div>
</body>
</html>




ai_XZP_master
关注
专栏目录
js实现页面下拉后展示导航，以及点击导航自动滑动到相关页面
weixin_33772645的博客
03-31 514
//监控，下拉750px后展示导航 $(window).scroll(function(){ var $this = $(this); var targetTop = $(this).scrollTop(); if(targetTop > 750){ $("#fixed-menu").css('display','block'); ...
js实现点击切换导航栏效果(排他思想)
最新发布
weixin_46378070的博客
02-25 2689
使用html+css+js，实现简易导航栏切换效果
js实现页面滚动，切换导航栏/点击导航栏跳转到指定位置
技术分享
03-20 2721
方法一 利用 a标签绑定好需要滑动位置的Id <a href="#aboutWrap">关于春芽</a> 简单快捷，弊端：速度不可控 方法二scrollTop 加入动画 通过使用animate加入动画； scrollTop：距离； $("html, body").animate({scrollTop: $('#'+domid).offset().t...
微信小程序开发：向数组中插入数据
Smallmouse96的博客
05-19 9959
每次请求的数据插入到定义的数组中，之前数据不覆盖 concat(); Page({ data: { content: ['aaa', 'bbb', 'ccc'] }, //监听页面滚动到底部 onReachBottom() { const than = this; this.setData({ content: than.data.content.concat(than.data.content) }) } }) ...
js原生简单轮播图制作
weixin_41930665的博客
04-21 250
//调用idfunction $(id){return document.getElementById(id);};//缓冲函数function move(obj,target,ratio,fn){clearInterval(obj.times);obj.times=setInterval(function (){//假设全部执行完var wen=true;for(var key in targe...
零基础入javaScript到实战达人
03-27
"零基础入javaScript到实战达人"的视频教程旨在为初学者提供一个逐步学习JavaScript的路径，从基础知识到高级实战技巧，帮助你成为一名熟练的JavaScript开发者。 1. **基础语法**：JavaScript的基础包括变量、数据...
JavaScript实战讲解课程
06-13
文件名中的“实战讲解课程”暗示了这些压缩包可能包含了一系列关于JavaScript实际应用的教学资源，可能包括视频教程、示例代码、练习项目等，帮助学习者深入理解和掌握JavaScript的实际开发技能。通过学习这些资源，...
JavaScript项目实战-优学网.zip
07-07
优学网项目主要分为首页+登录注册页+视频播放页内容，使用html+css实现基本页面布局，完成ajax请求数据进行页面渲染以及表单正则验证的项目练习。...资源中含有基础布局项目以及项目优化两部分，代码中有详细的注解
JavaScript实战项目之飞机大战
12-12
总的来说，"JavaScript实战项目之飞机大战"是一个综合性的学习资源，涵盖了JavaScript编程基础、DOM操作、事件处理、动画制作、游戏逻辑等多个方面。通过分析和实践这个项目，开发者不仅可以提升JavaScript技能，还...
HTML+Javascript+Css实战题
06-08
此外，实战题可能会包含AJAX（异步JavaScript和XML），用于向服务器发送请求并更新页面内容，无需刷新整个页面。还有可能涉及JSON（JavaScript Object Notation）数据格式，它是现代Web服务和前端之间交换数据的常用...
自定义属性/tab栏切换知识简介
weixin_54259919的博客
10-24 278
自定义属性 规范 用处 保存我的数据，使用这个数据 data-属性名="属性值" 方法集 方法 说明 var div = document.getElementById('data-index') 获取自定义属性所在的标签 div.getAttribute('自定义属性') 获取自定义属性值 div.setAttribute('自定义属性'，'值') 设置修改自定义属性值 div.setAttribute('class'，'新的类名') 修改...
..
zhao55759013的博客
02-01 151
无标题文档 .warp { width:200px; position:relative; top:50px; left:50px; } ul { padding:15px 0px; margin:9px; list-style:none; background:#6c6669; color:#ffffff; border-right-width:0px; } l
CSS初始化示例
bin1813的博客
02-14 284
@charset "UTF-8"; /*css 初始化 */ html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; } fieldset, img,input,button
多张图片上传(设置主图，删除图片)---简化js拼接
sage425的专栏
03-20 3997
描述：后台商品编辑时，页面：上传图片，设置图片主图，以及删除图片，后台：保存图片到图片服务器，返回完整目录 1.页面 html: 商品图片（最多可添加10张图片，建议图片尺寸600*600px，大小≤6MB，支持JPG、PNG、JPEG） 共 0 张
标签响应javascript的href处理
冰镇乌鸦
06-10 1691
为了给一个标签绑定javascript，但又不让它跳转链接，大家习惯上用的都是 第一种第二种第三种  而结果呢，几乎每一种用法都会有所问题 第一种和第二种似乎没有区别，似乎也是最常用，但IE6下，点击的瞬间，会中止后续资源的载入，如果页面上存在着gif动画，那么，在点击这个链接的一瞬间，页面上的gif将会被中止。这会是很杯具的体验。 第三种虽然在IE6下
在HTML文档中嵌入JavaScript的四种方法
热门推荐
weichushun的专栏
12-22 1万+
在HTML里嵌入JavaScript 在HTML文档里嵌入客户端JavaScript代码有4中方法： 1.内嵌，放置在<script>和</script>标签之间 （少）； 2.放置在有<script>标签的src属性指定的外部文件中 （多）； 3.放置自HTML事件处理程序中，该事件处理程序由onclick或onmouseover这样的HTML属性值指定它 （很少）； 4.放在一个URL里，这个URL使用特殊的协议”javascript“协议 （很少）...
javascript：html嵌入javascript代码的三种方式
qq_51476492的博客
03-16 1万+
一、概念 javascript是运行在浏览器中的脚本语言，运行在浏览器的内存当中，不需要程序员手动编译，编写玩源代码之后，浏览器直接打开解释执行，简称JS。 二、html嵌入javascript代码的三种方式 JS是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对应的程序。 例如：在JS中有很多事件，其中有一个事件叫做：鼠标单击，click，并且任何事件都会对应一个事件句柄onclick。 1.事件句柄是以html标签的属性存在的。 在按钮标签中设置onclick属性值，则点击按钮发生click事件后，
2.1.9 附件上传失败问题！
Fruits Boy
11-23 4844
文件上传 td,div,input,select,textarea,body {font-family:Verdana, 宋体, fantasy;font-size:12px;} body {margin:0 3px;padding:0;background-color:transparent;} form {margin:0;padding:0;} Check
【京东电商网站主界面仿写——CSS第二部分】前端面试：JSON Web Token（JWT）是什么？
追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
11-21 320
由于这个项目整体的代码较长，所以分成几个部分给大家展示。 比较完整的效果在这里~~【京东网站主界面仿写——使用Html5+CSS3+JavaScript等实现(附源代码和效果)，挺炫的喔~~~】 HTML部分已经展示结束啦！！！！！ 这里开始展示第二部分，关于CSS部分代码。 这里展示的是第301行到第1001行代码。 /*轮播图左边当行蓝*/ .dd-inner{height:466px;background:#c81623;width:210px;margin-left:1px;margin-top:7
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值