最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

原生JavaScript制作微博发布面板效果_javascript技巧

来源:动视网 责编:小采 时间:2020-11-27 20:52:05
文档

原生JavaScript制作微博发布面板效果_javascript技巧

原生JavaScript制作微博发布面板效果_javascript技巧:javaScript实现微博发布面板效果.采用的js知识有: 正则表达式区分中英文字节、随机数生成等函数 淡入淡出、缓冲运动。闪动等动画函数 onfocus、onblur、oninput、onpropertychange等事件 动态添加元素,获取设置动态属性 基本思路: 当内容为空时,发
推荐度:
导读原生JavaScript制作微博发布面板效果_javascript技巧:javaScript实现微博发布面板效果.采用的js知识有: 正则表达式区分中英文字节、随机数生成等函数 淡入淡出、缓冲运动。闪动等动画函数 onfocus、onblur、oninput、onpropertychange等事件 动态添加元素,获取设置动态属性 基本思路: 当内容为空时,发
 javaScript实现微博发布面板效果.采用的js知识有:

  1. 正则表达式区分中英文字节、随机数生成等函数
  2. 淡入淡出、缓冲运动。闪动等动画函数
  3. onfocus、onblur、oninput、onpropertychange等事件
  4. 动态添加元素,获取设置动态属性

基本思路:

当内容为空时,发布按钮为灰色,点击时候文本框会闪动,输入文字会提示还可以输入多少文字,超出会提示,且不能发布,要注意的是,判断文本框内容的长度,不能直接来,因为英文属于一个字节,中文占两个,要用正则处理一下!

获取到所有头像的src之后,存入到一个变量中,当点击头像时候,将头像的src赋予添加元素的img,动态创建日期对象,手机型号,姓名存到数组,采用生成随机数的方式获取,当文本框有了内容并且选取头像后,可以发布成功,发布时候淡出效果,创建一个li,添加li的时候 不能直接采用 appendChild,这回直接添加到已有元素的后边,而微博效果是插入到前头,这是需要判断一下,当有元素时候采用 insertBefore方法,当没有元素时候采取appendChild。

html代码,因为不是同一天做的,后续的后头添加的,所以js代码的可读性不是很好,请谅解。不过尽量注释的很明白了,如有疑问请留言!

下面附源码下载地址!




 
 微博发布
 
 

源码下载:微博发布面板

希望本文所述对大家学习javascript程序设计有所帮助。

文档

原生JavaScript制作微博发布面板效果_javascript技巧

原生JavaScript制作微博发布面板效果_javascript技巧:javaScript实现微博发布面板效果.采用的js知识有: 正则表达式区分中英文字节、随机数生成等函数 淡入淡出、缓冲运动。闪动等动画函数 onfocus、onblur、oninput、onpropertychange等事件 动态添加元素,获取设置动态属性 基本思路: 当内容为空时,发
推荐度:
标签: js 效果 javascript
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top