QQ登陆框实现状态文字变换的问题
html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>拖动</title>
<link href="css/main.css" rel="stylesheet" /><meta charset="utf-8">
</head>
<body>
<div class="loginPanel" id="loginPanel">
<div style="position: relative; z-index: 1;">
<div class="ui_boxyClose" id="ui_boxyClose"></div>
</div>
<div class="login_logo_webqq"></div>
<div class="inputs">
<div class="sign-input"><span>帐 号：</span><span><input autocomplete="on" name="u" id="u" type="text" style="ime-mode: disabled" class="input01" tabindex="1" value="QQ号码或Email帐号" onFocus="if (value =='QQ号码或Email帐号'){value =''}" onBlur="if (value ==''){value='QQ号码或Email帐号';}" /></span></div>
<div class="sign-input"><span>密 码：</span><span><input name="p" id="p" maxlength="16" type="password" class="input01" tabindex="2" /></span></div>
</div>
<div class="bottomDiv">
<div class="btn" style="float: left"></div>
<div>
<div id="loginState" class="login-state-trigger login-state-trigger2 login-state" title="选择在线状态">
<div id="loginStateShow" class="login-state-show online">状态</div>
<div class="login-state-down">下</div>
<div class="login-state-txt" id="login2qq_state_txt">在线</div>
<ul id="loginStatePanel" class="statePanel login-state" style="display: none">
<li id="online" class="statePanel_li">
<div class="stateSelect_icon online"></div>
<div id="stateSelect_textonline">我在线上</div>
</li>
<li id="callme" class="statePanel_li">
<div class="stateSelect_icon callme"></div>
<div id="stateSelect_textcall me">Q我吧</div>
</li>
<li id="away" class="statePanel_li">
<div class="stateSelect_icon away"></div>
<div id="stateSelect_textaway">离开</div>
</li>
<li id="busy" class="statePanel_li">
<div class="stateSelect_icon busy"></div>
<div id="stateSelect_textbusy">忙碌</div>
</li>
<li id="silent" class="statePanel_li">
<div class="stateSelect_icon silent"></div>
<div id="stateSelect_textsilent">请勿打扰</div>
</li>
<li id="hidden" class="statePanel_li">
<div class="stateSelect_icon hidden"></div>
<div id="stateSelect_texthidden">隐身</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<script src="js/drag1.js"></script>
</body>
</html>
--------------------------------------------------分割线--------------------------------------------------------------
js：
window.onload = drag;
function drag() { //实现拖拽的函数
var title = document.getElementsByClassName("loginPanel")[0]; //取出框的元素
title.onmousedown = follow;
//松开不跟随
document.onmouseup = function() {
document.onmousemove = null;
document.onmousemup = null;
}
//关闭
oClose = document.getElementById("ui_boxyClose");
oClose.onclick = function() {
loginPanel.style.display = "none";
} //切换状态
var loginState = document.getElementById("loginState"),
loginStatePanel = document.getElementById("loginStatePanel"),
state = document.getElementsByClassName("statePanel_li"),
info = document.getElementById("loginStateShow"),
text = document.getElementById('login2qq_state_txt'),
stateSelect = document.getElementById("stateSelect_text"),
callme = document.getElementById("stateSelect_icon callme");
loginState.onclick = function() {
loginStatePanel.style.display = "block";
}
for (var i = 0; i < state.length; i++) {
state[i].onmouseover = function() {
this.style.background = "#567";
}
state[i].onmouseout = function() {
this.style.background = "#FFF";
}
state[i].onclick = function() {
event.stopPropagation();
loginStatePanel.style.display = "none";
----------------------------------------------这里错误的分割线------------------------------
//切换状态文字
text.innerHtml=document.getElementById(''stateSelect_text'+this.id').innerHtml;
-----------------------------------------------------------------------------------------------------
//切换小图标
info.className='login-state-show '+this.id;
}
}
}
//让鼠标按下后可以拖动
function follow(event) {
var loginPanel = document.getElementsByClassName("loginPanel")[0];
//获取边框和鼠标按下位置的差
var l = event.clientX - loginPanel.offsetLeft,
t = event.clientY - loginPanel.offsetTop,
MaxW = document.documentElement.clientWidth - loginPanel.offsetWidth + 10,
MaxH = document.documentElement.clientHeight - loginPanel.offsetHeight;
//使box跟随鼠标移动
document.onmousemove = function(event) {
pox = event.clientX - l;
poy = event.clientY - t;
//限制移动范围
if (pox < 0) {
pox = 0;
} else if (pox > MaxW) {
pox = MaxW
}
if (poy < 0) {
poy = 10;
} else if (poy > MaxH) {
poy = MaxH
}
//j将求出的值赋给box
loginPanel.style.left = pox + "px";
loginPanel.style.top = poy + "px";
}
}
--------------------------------------提问的分割线------------------------------------------------
是这样的
我想在点击状态栏的时候可以实现文字变换
但是不知道怎么取出class组中的文字
慕粉39002061回答
随时随地看视频慕课网APP
Html/CSS
Html5
JavaScript