One line of JavaScript code to easily create floating quick messages - V2 upgraded version_javascript skills

I stayed up most of the night before yesterday and posted an article [One line of code to easily implement the quick message function]. At the same time, I released the V1.0 beta version of the quick message function and source code. The reason why it is beta version, I felt that although the basic functions were available, they were not perfect enough and the features were not necessarily reasonable. Today I unknowingly made it again. This time I made great improvements to the previous version:
First of all, it turns out that When the message information is automatically submitted, recommendations will be automatically made. The large number of recommendations directly affects the recommendation ranking mechanism of the blog park, so it was later modified to an interactive mode of asking if you want to recommend!
Secondly, although the shortcut function is available and easy to use, the "Great post! I support you!" that fills the screen is indeed a bit tired and has no practical meaning. The message still needs to generate interaction to be valuable. , so this version of V2 focuses on improving the original form in the interactive mode. The new version of quick message is equivalent to floating the original message box and recommendations in the blog park and displaying them in the vertical center on the right side of the screen. The purpose is to allow users to Very convenient to leave messages quickly.
Finally, the new version of the quick message function fully supports transparent upgrades for users of the previous version, which means that users who originally used the previous version should now see the latest version of the interface and functions in their blogs. ! Here again, the usage of jMsg is exactly the same as before:
In fact, the usage is really simple, you only need to enter the text box of [Backstage Management]->[Settings]->[Top Html Code] , just fill in the following sentence:

Copy code The code is as follows:

//Put it in the text box of [Backend Management]->[Settings]->[Top Html Code]

The specifics are as shown below:

The new version of jMsg is specific The functional details have been described in detail in the picture above, so I won’t repeat them. The following is the source code of the new version. There are also many functional features to be improved. For example, the interface effect can be beautified. Now only the simplest style is provided. , whether it is code or functional design, you are welcome to criticize and correct me. The organization of the code has been greatly changed compared to the previous version. The source code of the previous version is available here.
The source code of the new version is as follows:

Copy the code The code is as follows:

//Author: Justin
//Source: http://justinw.cnblogs.com/
//Copyright: Please keep the source when reprinting.
//Version: V2.0
//Last update: 201004020037
//Remarks: If you have any questions, please go to http://www.cnblogs.com/justinw/archive/2010/03 /30/1700190.html Leave a message to ask questions.
//Update:
//1.v2 has made great improvements on the basis of V1beta, and the interaction mode and functional rationality have been substantially improved.

//--begin--jMsg---
jMsg = function() {
var chkRecomend = false;
}

jMsg.prototype = {
//Initialization action
initialize: function() {
jMsg.loadEvent(this.combat);
this.msgDIV();
},
dispose: function() {
//todoSomething...
},
//Submit message information
post: function(msg) {
//Here, the HaveUp flag is judged to prevent repeated submission of the same message .
if (window.top.HaveUp) {
alert('You have liked it! Thank you friend:)');
return false;
}
if (msg.trim( ).length == 0) {
alert('You have to leave a word anyway!');
return false;
}
else if (msg.trim().length > 1000) {
alert('This classmate, the quick message supports up to 1000 characters!');
return false;
}

var txt = document.getElementById('tbCommentBody' );
if (txt != null) {
txt.style.backgroundColor = "#E4F5FF";
var date = new Date();
txt.value = msg;
txt.focus();
//If a quick message has been submitted once, HaveUp will be set to true
//Every time you re-enter the page, HaveUp will be initialized.
window.top.HaveUp = true;
//This is the method used in the blog park to submit messages. This is where you submit messages.
//If you call this method directly on the client without logging in, an error will be thrown internally. (Blog park code problem, no empty test)
var rlt = PostComment();
this.setMsgText("");
return true;
}
else {
/ /Currently, the blog park function restricts the ability to submit comments only after logging in.
//If the tbCommentBody element cannot be found, it can be considered that the current user is not logged in.
alert("You need to log in first to use the blog message function!");
return false;
}
},
//Recommend
recommend: function() {
var diggit = jMsg.getElementsByClassName('diggit');
if ((diggit) && (diggit[0])) {
diggit[0].onclick();
}
else {
alert("Debug: The ClassName of the recommendation button has been renamed!");
}
},
//Oppose
combat: function() {
var buryitMsg = function() {
//Currently, the recommendation and disapproval of the Blog Park are anonymous. Of course, if you are disapproved, you would like to know the reason.
//This function can only protect against gentlemen but not villains, it just gives a reminder.
var txt = document.getElementById('tbCommentBody');
if (txt != null) {
alert('This student, I really hope to hear your valuable opinions, please enlighten me... .');
txt.style.backgroundColor = "#fe9ab3";
txt.focus();
}
}
var buryit = jMsg.getElementsByClassName('buryit');
if ((buryit) && (buryit[0])) {
jMsg.addEvent(buryit[0], "click", buryitMsg);
}
},
// Recommend while submitting a message
superPost: function(msg) {
if (this.post(msg)) {
//A query function is added here, automatic direct recommendation is not supported
if (this. chkRecomend) {
this.recommend();
}
else {
if (confirm("Do you also want to recommend this article?")) {
this.recommend( );
}
}
}
},
//Floating navigation bar for quick messages
msgDIV: function() {
//Whether the floating bar appears.
if (!(window.location.href.indexOf(".html") > -1)) return;

//动态计算浮动滚动条的位置
lastScrollY = 0;
var beat = function() {
var diffY;
if (document.documentElement && document.documentElement.scrollTop)
diffY = document.documentElement.scrollTop;
else if (document.body)
diffY = document.body.scrollTop
else
{ /*Netscape stuff*/ }

percent = .1 * (diffY - lastScrollY);
if (percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
document.getElementById("msgDiv").style.top = parseInt(document.getElementById("msgDiv").style.top) percent "px";

lastScrollY = lastScrollY percent;
}

document.write(this.getMsgBoxHTML());

window.setInterval(beat, 120);
},
getMsgBoxHTML: function() {
var _HTML = "";
_HTML = "

";
_HTML = "";
_HTML = "";
_HTML = "";
_HTML = "";
_HTML = "

文章不错，支持！
"; _HTML = " 路过 "; _HTML = "推荐	2010©Justin

";
_HTML = "

";
return _HTML;
},
setMsgText: function(txt) {
var area = document.getElementById("jmsg");
area.value = txt;
},
getMsgText: function() {
var area = document.getElementById("jmsg");
return area.value;
},
setChkRecomend: function(val) {
this.chkRecomend = val;
}
}

//附加onload事件
jMsg.loadEvent = function(fn) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = fn;
} else {
window.onload = function() {
oldonload();
fn();
}
}
}

//附加事件
jMsg.addEvent = function(obj, type, fn) {
if (obj.addEventListener)
obj.addEventListener(type, fn, true);
else if (obj.attachEvent) {
obj.attachEvent("on" type, function() {
fn();
});
}
}

//通过ClassName找到DOM元素
jMsg.getElementsByClassName = function(n) {
var el = [],
_el = document.getElementsByTagName('*');
for (var i = 0; i < _el.length; i ) {
if (_el[i].className == n) {
el[el.length] = _el[i];
}
}
return el;
}

String.prototype.trim = function() {
return this.replace(/(^s*)|(s*$)/g, "");
}

//--end--jMsg---
//todo:提供设置是否显示浮动条的接口
//todo:提供完全自定义浮动条内容的接口
//todo:提供浮动以外的交互模式接口
var $jMsg = new jMsg();
$jMsg.initialize();

作者：Justin
出处：http://justinw.cnblogs.com/