小程序系列(二)丑人生成器 - 技术分享 - 志盟培训
首页技术分享 小程序系列(二)丑人生成器

小程序系列(二)丑人生成器

更新时间:2017-04-13      作者:陈老师       阅读:1648

一、效果预览:

小程序系列(二)丑人生成器

小程序系列(二)丑人生成器

二、准备工具:

1)浏览器(不要太旧哦)

2)记事本(就是能写代码的就可以)

三、基本步骤:

1)新建三个文件,分别保存成index.html、idiot.css、idiot.js

2)创建一个文件夹命名成css,把css文件放进去

3)创建一个文件夹命名成js,把js文件放进去

4)分别写入下面的代码

5)用浏览器打开index.html

四、源代码

html代码:

<!DOCTYPE html>

<head>

       <meta charset="UTF-8">

       <title>丑人生成器</title>

       <link rel="stylesheet" type="text/css" href="css/idiot.css">

       <script type="text/javascript" src="js/idiot.js"></script>

</head>

<body>

        <div id="out">

                 <p id="idiot">

                 <b class="result">[点击按钮生成丑人]</b>

                 </p>

                 <input type="button" id="bt" onclick="get_idiot()" value="生成丑人"></input>

</div>

</body>

</html>


css代码:

#idiot{background-color:#ccc; padding:20px;border-left:solid 7px black; font-size:30px;}

.result{font-size:20px;color:#44a;}

#bt{font-size: 16px; background-color:skyblue;color:white; border-style:solid;

     border-color:#4FD4C8; border-radius:10px; box-shadow: -2px 2px 8px grey;

     margin:10px; padding:5px;}

#bt:hover{box-shadow: 2px 2px 8px grey; font-weight: bolder; color:black;cursor: pointer;}


JS代码:

var idiots = new Array("牛娜", "呆萌奚", "韩儿静", "无敌小四", "张老师", "丁老师","何老师");

functionget_idiot(){

        varlen = idiots.length;

        var idiot=idiots[Math.floor(Math.random()*len*len)%len];

        varap=document.getElementById("idiot");

        var out=document.getElementById("out");

        out.removeChild(document.getElementById("bt"));

        ap.innerHTML="<b class=\"result\">[丑人已生成]</b><br/>丑人是:"+idiot+"";

}


解析:

HTML代码设计页面上的元素,CSS代码控制页面元素显示的效果,JS代码实现按钮的功能,随机选出一个人名。

HTML:

p元素:用来显示选到的人名。

input元素:用来实现按钮,点击时触发选人功能。


CSS:

#+id名:id选择器

.+class名:类选择器

#bt:hover:伪类选择器

关键属性:background-color:背景颜色、border:边框

box-shadow:阴影、border-radius:圆角、font-size:字体大小


JS:

Math.floor():通过JS的Math对象的静态方法,向下取整的功能;

document.getElementById("id名"):document对象的方法通过元素id获取网页上的元素;

out .removeChild(child):通过父元素删除子元素;

ap.innerHTML="”:直接修改某个元素的内容


五、原理:

这是一个利用HTMLCSS进行布局和美化页面,利用JS实现控制功能的简单案例。

在线报名

志盟科技上海招聘

在线报名 联系我们

志盟科技深圳招聘

在线报名 联系我们

志盟科技北京招聘

在线报名 联系我们
联系我们

咨询热线:

咨询 QQ:517578         

就业学员

  • 就业学员

    姓名:郭凡凡 
    院校:阜阳师范学院
    就职:佳戴
    职位:软件工程师
    月薪:10000

  • 就业学员

    姓名:陈祥龙 
    院校:中北大学
    就职:美囤妈妈
    职位:软件工程师
    月薪:9000

  • 就业学员

    姓名:陈建伟
    院校:南昌航空大学
    就职:SONY
    职位:嵌入式工程师
    月薪:8000

×
×
  • *真实姓名
  • *联系手机
  • *上课地址
  •    QQ号码

温馨提示:请保持手机畅通,咨询老师将为您提供专属的一对一报名服务。

×
  • *真实姓名
  • *联系手机
  • *联系邮箱
  • * QQ号码

温馨提示:请保持手机畅通,咨询老师将为您提供专属的一对一的服务。

本站由 宽敬科技——创新企业的建站运营顾问 提供支持