文档章节

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

小婧大神
 小婧大神
发布于 2017/04/25 11:26
字数 448
阅读 3
收藏 0
点赞 0
评论 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
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
零基础的网站开发初学者如何系统的学习?

A.学习背景 开始网站开发,起先是从手机网站的UBB语法开始的,也因此有了深入学习的兴趣。为了让学习的热情膨胀,我有意的培养这一爱好 ,定位了自己要成为一名优秀的网站开发员的目标。 作为...

李佳顺
2012/12/25
0
3
javascript统一世界?

[到微信关注我][1]今天facebook将react native框架的源码开源,瞬间火得一塌糊涂,目前github上的star已经快7000了。javascript作为这个框架的开发使用语言又一次出现在人们面前。这几年jav...

卢勇福
2015/03/28
0
0
Web后端工程师应该拥抱前端了

前言 大数据部发展到一定的阶段,无论是内部体系的完善,还是服务能力对外的暴露,对web端交互能力都有极大的需求,所以对web研发的诉求其实也是非常大的。 现在不少web后端工程师还是基于传...

祝威廉
07/05
0
0
结合个人经历总结的前端入门方法

作者:qiu deqing 链接:https://github.com/qiu-deqing/FE-learning 结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限,不能保证面面...

SomaLihq
06/27
0
0
使用node-webkit开发exe窗口程序

首发:个人博客,更新&纠错&回复 ====关于原生程序与壳中程序的议论begin==== 在所有用户windows机器上都能直接跑的程序,如果不采用微软系的语言,如VB,C++,C#等,而采用Java,Python,R...

祁达方
2015/11/20
0
0
学java还是javascript好?哪个更有前途?

  对于哪种语言好这种问题,其实并没有固定的答案,最重要的还是 兴趣!兴趣!兴趣!重要的事情说三遍。无论做什么开发,永远要以兴趣来驱动自己学习。 先大致的说一下,Java学习是一个需要...

W3Cschool小编
04/23
0
0
给Web前端初学者的一些建议和学习方法路线

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰
05/24
0
0
从零开始学 Web 之 jQuery(一)jQuery的概念,页面加载事件

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

fengdaoting
07/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Android 复制和粘贴功能

做了一回搬运工,原文地址:https://blog.csdn.net/kennethyo/article/details/76602765 Android 复制和粘贴功能,需要调用系统服务ClipboardManager来实现。 ClipboardManager mClipboardM...

她叫我小渝
25分钟前
0
0
拦截SQLSERVER的SSL加密通道替换传输过程中的用户名密码实现运维审计(一)

工作准备 •一台SQLSERVER 2005/SQLSERVER 2008服务 •SQLSERVER jdbc驱动程序 •Java开发环境eclipse + jdk1.8 •java反编译工具JD-Core 反编译JDBC分析SQLSERVER客户端与服务器通信原理 SQ...

紅顏為君笑
42分钟前
4
0
jQuery零基础入门——(六)修改DOM结构

《jQuery零基础入门》系列博文是在廖雪峰老师的博文基础上,可能补充了个人的理解和日常遇到的点,用我的理解表述出来,主干出处来自廖雪峰老师的技术分享。 在《零基础入门JavaScript》的时...

JandenMa
59分钟前
0
0
linux mint 1.9 qq 安装

转: https://www.jianshu.com/p/cdc3d03c144d 1. 下载 qq 轻聊版,可在百度搜索后下载 QQ7.9Light.exe 2. 去wine的官网(https://wiki.winehq.org/Ubuntu) 安装 wine . 提醒网页可以切换成中...

Canaan_
今天
0
0
PHP后台运行命令并管理运行程序

php后台运行命令并管理后台运行程序 class ProcessModel{ private $pid; private $command; private $resultToFile = ''; public function __construct($cl=false){......

colin_86
今天
1
0
数据结构与算法4

在此程序中,HighArray类中的find()方法用数据项的值作为参数传递,它的返回值决定是否找到此数据项。 insert()方法向数组下一个空位置放置一个新的数据项。一个名为nElems的字段跟踪记录着...

沉迷于编程的小菜菜
今天
1
1
fiddler安装和基本使用以及代理设置

项目需求 由于开发过程中客户端和服务器数据交互非常频繁,有时候服务端需要知道客户端调用接口传了哪些参数过来,这个时候就需要一个工具可以监听这些接口请求参数,已经接口的响应的数据,这种...

银装素裹
今天
0
0
Python分析《我不是药神》豆瓣评论

读取 Mongo 中的短评数据,进行中文分词 对分词结果取 Top50 生成词云 生成词云效果 看来网上关于 我不是药神 vs 达拉斯 的争论很热啊。关于词频统计就这些,代码中也会完成一些其它的分析任...

猫咪编程
今天
0
0
虚拟机怎么安装vmware tools

https://blog.csdn.net/tjcwt2011/article/details/72638977

AndyZhouX
昨天
1
0
There is no session with id[xxx]

参考网页 https://blog.csdn.net/caimengyuan/article/details/52526765 报错 2018-07-19 23:04:35,330 [http-nio-1008-exec-8] DEBUG [org.apache.shiro.web.servlet.SimpleCookie] - Found......

karma123
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部