Weibo 게시 패널을 생성하는 기본 JavaScript
- WBOY원래의
- 2016-05-16 15:11:081276검색
JavaScript는 Weibo 게시 패널의 효과를 구현합니다. 사용된 js 지식은 다음과 같습니다.
- 정규식은 중국어와 영어 바이트 구분, 난수 생성 및 기타 기능
- 페이드 인 및 페이드 아웃, 버퍼 모션. 플래싱 및 기타 애니메이션 기능
- onfocus, onblur, oninput, onpropertychange 및 기타 이벤트
- 요소를 동적으로 추가하고 동적 속성을 가져오고 설정합니다
기본 아이디어:
콘텐츠가 비어 있으면 게시 버튼이 회색으로 표시됩니다. 텍스트를 입력하면 텍스트를 얼마나 더 입력할 수 있는지 묻는 메시지가 표시되며 제한을 초과할 수 없습니다. 영문은 1바이트, 중국어는 2바이트를 차지하기 때문에 텍스트 박스의 내용은 직접적으로 판단할 수 없다는 점에 유의하세요!
모든 아바타의 src를 구한 뒤 변수에 저장합니다. 아바타를 클릭하면 추가된 요소의 img에 아바타의 src가 할당되고, 날짜 객체, 휴대폰 모델, 이름이 할당됩니다. 동적으로 생성되어 배열에 저장되며, 텍스트 상자에 내용이 있고 아바타를 선택하면 성공적으로 게시할 수 있습니다. 게시할 때 효과가 사라지고 li가 생성됩니다. AppendChild는 직접 사용할 수 없으며, 이번에는 기존 요소의 뒤에 직접 추가하는 반면, Bo 효과는 요소가 있는 경우에는 insertBefore 메소드를 사용하여 판단해야 합니다. 사용하며, 요소가 없는 경우에는appendChild 메소드를 사용합니다.
html 코드는 당일 제작된 것이 아니고 나중에 추가되어 js 코드의 가독성이 별로 좋지 않으니 양해 부탁드립니다. 하지만 질문이 있으시면 메시지를 남겨주세요.
소스코드 다운로드 주소는 아래 첨부해두었습니다!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>微博发布</title>
<link rel="stylesheet" href="style.css">
<script>
window.onload = function(){
var text = document.getElementsByTagName('textarea')[0];
var p = document.getElementsByTagName('p')[0];
var btn = document.getElementsByTagName('span')[0];
var conUl = document.getElementById('con-ul');
var aLi = conUl.getElementsByTagName('li');
var icon = document.getElementById('icon');
var iconUl = icon.getElementsByTagName('ul')[0];
var iconLi = iconUl.getElementsByTagName('li');
var prevBtn = document.getElementById('prev');
var nextBtn = document.getElementById('next');
var imgs = icon.getElementsByTagName('img');
var btnNow = 0;
var timer2 = null; //头像区无缝滚动
var num = 0;
var timer1 = null; //当输入内容为空或者输入字符超过，文本框闪动
var iNow = 0;
var selectIcon = ''; //用于保存所选择图片的路径
var date = new Date();
var str = toDou(date.getHours())+':'+toDou(date.getMinutes()); //获取当前时间
var str2 = toDou(date.getMonth()+1)+'-'+date.getDate(); //获取当前日期
var userName = ['周杰伦','哆啦A梦','牛尔','郭德纲','孙燕姿','柴碧云','冯昆鹏','奥巴马','赵本山'];
var userPhone = ['Xperia Z3','iPhone7s','一加one plus','小米5s','8848钛金','三星s8','锤子T3'];
iconUl.style.width = iconLi.length*iconLi[0].offsetWidth+'px';
timer2 = setInterval(iconPlay,3000); //头像区块无缝滚动
text.onfocus = function(){
p.innerHTML = '还可以输入<em>'+(num-140)+'</em> 个字';
p.className = 'dis';
change();
text.oninput = text.onpropertychange = change;
}
text.onblur = function(){
if(text.value == ''){
p.innerHTML = '把你交给我牵手秀恩爱！你要来虐狗还是进来被虐？(图) 热门微博';
p.className = '';
}
}
//点击发布按钮
btn.onclick = function(){
var randomNum = Math.floor(Math.random()*userName.length);
var randomNum2 = Math.floor(Math.random()*userPhone.length);
if(text.value==''||num>140){
clearInterval(timer1);
timer1 = setInterval(function(){
if(iNow==5){
clearInterval(timer1);
iNow=0;
}else {
iNow++;
}
if(iNow%2){
text.style.background = '#ff9797';
}else{
text.style.background = '';
}
},100);
}else {
//判断是否选择头像
if(selectIcon==''){
alert('请先选择头像');
}else {
//动态添加li
var newLi = document.createElement('li');
newLi.innerHTML += '<div class="icon"><img src="'+selectIcon+'" alt=""></div><h2>'+userName[randomNum]+'</h2><p class="text">'+text.value+'</p><div class="li-footer"><span>'+str2+'</span><span> '+str+' </span>来自 <span>'+userPhone[randomNum2]+'</span></div>';
if(aLi.length){
conUl.insertBefore(newLi,aLi[0]);
}else {
conUl.appendChild(newLi);
}
newLi.style.opacity = 0;
fadeOut(newLi,100);
}
change();
}
text.value = '';
}
//判断输入字符的多少
function change(){
var mark = document.getElementsByTagName('em')[0];
var tValue = text.value;
num = Math.ceil(getLength(tValue)/2);
if(num<140){
mark.innerHTML = 140-num;
mark.style.color = 'green';
}else {
p.innerHTML = '已超出<em style="color:red">'+(num-140)+'</em> 个字';
}
if(text.value == ''||num>140){
btn.className = 'con-go';
}else {
btn.className = 'con-go active';
}
}
for(var i=0; i<iconLi.length; i++){
iconLi[i].index = i;
iconLi[i].onclick = function(){
for(var i=0; i<iconLi.length; i++){
iconLi[i].style.borderRadius = 0;
}
this.style.borderRadius = '140px';
selectIcon = imgs[this.index].getAttribute('src');
}
}
nextBtn.onclick = iconPlay;
prevBtn.onclick = function(){
if(btnNow > 0){
btnNow--;
startMove(iconUl,-iconLi[0].offsetWidth*btnNow);
}
}
function iconPlay(){
if(btnNow < iconLi.length-6){
btnNow++;
startMove(iconUl,-iconLi[0].offsetWidth*btnNow);
}
if(btnNow > iconLi.length-7){
btnNow = 0;
startMove(iconUl,-iconLi[0].offsetWidth*btnNow);
}
}
iconUl.onmouseover = function(){
clearInterval(timer2);
}
iconUl.onmouseout = function(){
timer2 = setInterval(iconPlay,3000);
}
}
//正则：用于区分中文为两个字节
function getLength(str){
return String(str).replace(/[^\x00-\xff]/g,'aa').length;
}
//头像区滚动动画
function startMove(obj,tarrget){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var speed = (tarrget-obj.offsetLeft)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(obj.offsetLeft == tarrget){
clearInterval(obj.timer);
}else {
obj.style.left = obj.offsetLeft+speed+'px';
}
},30);
}
//淡入淡出
function fadeOut(obj,tarrget){
obj.alpha = 0;
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var current = parseInt(current*100);
var speed = (tarrget-obj.alpha)/30;
if(obj.alpha==tarrget){
clearInterval(timer);
}else {
obj.alpha+=speed;
obj.style.opacity=obj.alpha/100;
}
},30);
}
//补0函数
function toDou(n){
if(n<10){
return '0'+n;
}else {
return ''+n;
}
}
</script>
</head>
<body style="overflow: scroll;">
<div id="container">
<div id="header">
<h1>有什么新鲜事想告诉大家？</h1>
<p>把你交给我牵手秀恩爱！你要来虐狗还是进来被虐？(图) 热门微博</p>
</div>
<textarea placeholder="说点儿什么吧"></textarea>
<div>
<i>小提示:请先选择头像 再进行发布</i>
<span class="con-go">发布</span>
</div>
</div>
<div id="icon">
<span id="prev" class="icon-btn"><</span>
<div class="wrap-ul">
<ul>
<li><img src="img/3.jpg" alt=""></li>
<li><img src="img/2.jpg" alt=""></li>
<li><img src="img/10.jpg" alt=""></li>
<li><img src="img/4.jpg" alt=""></li>
<li><img src="img/5.jpg" alt=""></li>
<li><img src="img/6.jpg" alt=""></li>
<li><img src="img/7.jpg" alt=""></li>
<li><img src="img/8.jpg" alt=""></li>
<li><img src="img/9.jpg" alt=""></li>
<li><img src="img/1.jpg" alt=""></li>
<li><img src="img/12.jpg" alt=""></li>
<li><img src="img/13.jpg" alt=""></li>
<li><img src="img/14.jpg" alt=""></li>
</ul>
</div>
<span id="next" class="icon-btn">></span>
</div>
<div id="content">
<ul id="con-ul">
<li>
<div class="icon">
<img src="img/12.jpg" alt="">
</div>
<h2>白超华</h2>
<p class="text">今天又过去了，今天过得怎么样？梦想是不是越远了？</p>
<div class="li-footer">
<span>03-10</span><span> 20:30 </span>来自 <span>Xperia Z6</span>
</div>
</li>
<li>
<div class="icon">
<img src="img/6.jpg" alt="">
</div>
<h2>金庸</h2>
<p class="text">飞雪连天射白鹿，笑书神侠倚碧鸳。金庸小说中涌现出无数金句，九阳真经写到：他强由他强，清风拂山岗；他横由他横，明月照大江。他自狠来他自恶，我自一口真气足。当你想到金庸时，你会想到哪句话呢？转发，祝金老福如东海，寿比南山！</p>
<div class="li-footer">
<span>03-10</span><span> 20:24 </span>来自 <span>iPhone 6s plus</span>
</div>
</li>
<li>
<div class="icon">
<img src="img/8.jpg" alt="">
</div>
<h2>财经网</h2>
<p class="text">【李克强来到新疆团：我要和每位代表握握手】10日上午，李克强参加十二届全国人大四次会议新疆维吾尔自治区代表团审议。？</p>
<div class="li-footer">
<span>03-10</span><span> 20:10 </span>来自 <span>8848 钛金手机</span>
</div>
</li>
</ul>
</div>
</body>
</html>
소스코드 다운로드: Weibo 게시 패널
이 기사가 JavaScript 프로그래밍을 배우는 모든 사람에게 도움이 되기를 바랍니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.