文档章节

学前端开发:js 原生模仿微博发布

小婧大神
 小婧大神
发布于 2017/04/25 11:26
字数 448
阅读 3
收藏 0

初学前端开发,需要掌握的基础项目案例:js 原生模仿微博发布

<!DOCTYPE html>

<html>

 

         <head>

                   <metacharset="UTF-8">

                   <title></title>

         </head>

         <styletype="text/css">

                   *{

                            margin:0;

                            padding:0;

                            list-style:none;

                            font-family:"微软雅黑";

                            outline:none;

                   }

                  

                   #box{

                            width:1000px;

                            height:650px;

                            border:4px solid #CCCCCC;

                            margin:0 auto;

                   }

                  

                   #p1{

                            font-size:24px;

                            margin-left:40px;

                            margin-top:30px;

                   }

                  

                   #a1{

                            width:500px;

                            height:50px;

                            margin-left:40px;

                            margin-top:30px;

                   }

                  

                   #fabu{

                            width:500px;

                            height:300px;

                            left:31%;

                            top:180px;

                            border:4px solid #CCCCCC;

                            position:fixed;

                            z-index:100;

                            opacity:1;

                            background:white;

                   }

                  

                   #wenben{

                            width:400px;

                            height:140px;

                            font-size:18px;

                            margin-left:50px;

                            margin-top:20px;

                            resize:none;

                   }

                  

                   #tijiao{

                            width:400px;

                            height:50px;

                            margin-left:50px;

                            font-size:26px;

                            background:orange;

                            border:1px solid orange;

                            border-radius:10px;

                            color:white;

                   }

                  

                   #xianshi{

                            width:920px;

                            height:400px;

                            margin:0 auto;

                            border:1px solid blue;

                            margin-top:20px;

                   }

         </style>

 

         <body>

                   <divid="box">

                            <pid="p1">来说说吧你想做什么</p>

                            <inputtype="button" id="a1" value="我要写点什么"/>

 

                            <divid="xianshi">

 

                            </div>

                  </div>

                   <divid="ww" style="position: absolute;top: 0px; width: 100%;height:680px;background: #CCCCCC;opacity: 0.8;display: none;">

 

                            <divid="fabu">

                                     <spanid="guanbi" style="margin-left:480px;font-size:20px;">×</span>

                                     <pstyle="margin-left: 50px;">快把你遇到的趣事和大家分享下吧</p>

                                     <textareaid="wenben" rows="" cols=""></textarea>

                                     <pstyle="margin-left: 300px;"> 字数不得超过150字</p>

                                     <inputtype="button" id="tijiao" value="发布"/>

                            </div>

                   </div>

                   <scripttype="text/javascript">

                            vara1 = document.getElementById("a1");

                            varfabu = document.getElementById("fabu");

                            varguanbi = document.getElementById("guanbi");

                            varbox = document.getElementById("box");

                            vartijiao = document.getElementById("tijiao");

                            varwenben = document.getElementsByTagName("textarea")[0]

                            varxianshi = document.getElementById("xianshi");

                            varww = document.getElementById("ww");

                            a1.onclick= function() {

                                     ww.style.display= "block";

                                     wenben.value= ""

                            }

                            guanbi.onclick= function() {

                                     ww.style.display= "none"

 

                            }

                            vararr = ["用户:lanttoy", "用户:阿迪斯", "用户:APPLE", "用户:王云", "用户:李征","用户:万宗昊","用户:榴莲","用户:梁冬妮","用户:李氏川","用户:赵淳","用户:彬彬","用户:二蛋","用户:淘气"]

                                     //         arr[Math.random()]

                            varrad;

                            tijiao.onclick= function() {

                                      rad = Math.round(Math.random() *arr.length-1);

                                     if(wenben.value.length > 150) {

                                               alert("请输入150字内")

                                               p.innerHTML= ""

 

                                     }

 

                                     ww.style.display= "none"

                                     varp = document.createElement("p");

                                     xianshi.appendChild(p)

                                     for(var i = 0; i < arr.length; i++) {

                                               p.innerHTML= arr[rad] + "&nbsp;" + "<br/>" + wenben.value;

 

                                     }

                                     wenben.value= ""

 

                            }

                   </script>

         </body>

 

</html>

还有更多的学习案例和电子书,可以搜【web前端交流学习群018】,找君羊主哦!注册获取官网免费学习资源http://www.kgc.cn/?tuin=7145

 

本文转载自:

共有 人打赏支持
小婧大神
粉丝 0
博文 77
码字总数 3758
作品 0
私信 提问
GitHub 改版,重构页面移除了 jQuery 真的有必要吗?

GitHub 的前端团队还乘机移除了页面中的 jQuery: 值得一提的是,GitHub 前端团队并未使用其它框架来代替 jQuery,而是使用原生 JS: 用 querySelectorAll 来查询 DOM 节点; 使用 fetch 代替...

达尔文
07/27
10.2K
48
weex eros框架源码解析

weex eros是基于alibaba weex框架进行二次封装的客户端跨平台开发框架,主要是为前端开发者(可以不用熟悉客户端开发)提供的一站式客户端app开发解决方案。官网地址为:https://bmfe.github...

雅爸学技术
05/27
0
0
从零开始学 Web 之 JavaScript(一)JavaScript概述

大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间...

fengdaoting
06/03
0
0
从简书iOS客户端,来谈谈Hybrid方案细节设计

作为一位 iOS 开发人员,你应该已经敏感地发现,自己的工作涉及内容已经不止于 Native 的部分,因为 Hybrid App 和 ReactNative 等技术方案已经不仅仅是概念,越来越多的公司开始着手自己的 ...

halohily
10/29
0
0
JavaScript 最受行业雇主青睐, 2018 年要入前端的坑吗?

在1995年,JavaScript 由 Netscape 公司的 Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为 Netscape 与 Sun 合作,Netscape 管理层希望它外观看起来像 Java,因此取名为 JavaSc...

OSC源创君
03/21
4K
22

没有更多内容

加载失败,请刷新页面

加载更多

线下工坊|Blockchain Coding Day:零基础教你开发DAPP(北京)

我们的目标是通过编程学习让你更了解区块链技术。这将对区块链开发初学者一次很好的体验。这里需要强调一下,编程零基础也能学会。 我们将以小组的形式,由教练带领学员完成DAPP开发。每位学...

HiBlock
23分钟前
2
0
查看内存情况

jinfo:可以输出并修改运行时的java 进程的opts。 jps:与unix上的ps类似,用来显示本地的java进程,可以查看本地运行着几个java程序,并显示他们的进程号。 jstat:一个极强的监视VM内存工具。...

Canaan_
24分钟前
2
0
基于对象特征的推荐

(本实验选用数据为真实电商脱敏数据,仅用于学习,请勿商用) 在上一期基于协同过滤的的推荐场景中,我们介绍了如何通过PAI快速搭建一个基于协同过滤方案的推荐系统,这一节会介绍一些如何基...

阿里云官方博客
32分钟前
1
0
Ugly Number(leetcode263)

Write a program to check whether a given number is an ugly number. Ugly numbers are positive numbers whose prime factors only include 2, 3, 5. Example 1: Input: 6Output: true......

woshixin
55分钟前
2
0
深度模型从研者 眼里的 似然估计 & Hessain 海森矩阵 & Fisher Information (费雪信息)

深度模型的训练的基本依据是最小化模型拟合数据的误差。旨在不仅知其然(如何构建和训练一个深度模型),还应知其所以然(为什么这样训练,可以做哪些优化)。我们就会发现,有很多研究者,在...

刘小米_思聪
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部