Home >Web Front-end >JS Tutorial >JS CSS article viewing system_javascript skills

JS CSS article viewing system_javascript skills

WBOYOriginal: 2016-05-16 18:56:571261browse

Make a connection: execute the JavaScript function after clicking;
Function: WindowsTextShow(Id div.id);
div.id is the ID of the div to display the text;
The code is as follows:

<title>Untitled Page</title>
<style type="text/css"> 
#divback 
{ 
width: 100%; 
height: expression(body.scrollHeight); 
background-color: #000; 
position: absolute; 
top: 0; 
left: 0; 
z-index: 49; 
display: none; 
filter: progid:DXImageTransform.Microsoft.Alphaopacity=25; 
filter: alpha(opacity=55); 
} 
.WindowsTextShow 
{ 
top: expression(documentElement.scrollTop   50); 
left: 50px; 
height: expression(documentElement.clientHeight - 50*2); 
width: expression(body.clientWidth-50*2); 
position: absolute; 
z-index: 50; 
color: Black; 
border: 3px solid #E5E5E5; 
background-color: #F0F0F0; 
} 
.WindowsTextShowFull 
{ 
top: expression(documentElement.scrollTop); 
left: 0px; 
height: 100%; 
width: 100%; 
position: absolute; 
z-index: 50; 
border: 3px solid #E5E5E5; 
background-color: #F0F0F0; 
} 
#textContent 
{ 
padding: 5px; 
height: 80%; 
overflow: auto; 
line-height: normal; 
font-size: 14px; 
color: Black; 
background-color: White; 
} 
#ctrlSet 
{ 
font-size: 12px; 
} 
.ctrlSetState 
{ 
display: block; 
} 
</style>

<div style=" width:900px; height:1400px; background-color:Gray; margin:0 auto;">
<div style=" height:100px; background-color:Red;">
</div>
<div style=" height:1200px; background-color:Black;">
<div style="width:75%; float:left;">
<div style="height:100px; background-color:Blue;">
<a href="javascript:WindowsTextShow('textBox')">
Domestic operators of "Kart Racing" laid off more than 30% of their staff
</a>Look at the text</div>
<script charset="GB2312" language="javascript" type="text/javascript"> 
var ocolorPopup = window.createPopup(); 
var ecolorPopup = null; 
var isfullScreen = false; 
var isRunning = false; 
var isCtrlSetShow = true; 
var div_box = document.createElement("DIV"); 
var div_back = document.createElement("DIV"); 
var textwindowtop = 50 + document.documentElement.scrollTop; 
var textwindowleft = 50; 
function colordialogmouseout(obj) { 
obj.style.borderColor = ""; 
obj.bgColor = ""; 
} 
function colordialogmouseover(obj) { 
obj.style.borderColor = "#0A66EE"; 
obj.bgColor = "#EEEEEE"; 
} 
function colordialogmousedown(color) { 
ecolorPopup.value = color; 
if (GetRadioValue("colorType") == "textColor") { 
textContent.style.color = color; 
} 
else if (GetRadioValue("colorType") == "textbackColor") { 
textContent.style.backgroundColor = color; 
} 
else { 
divback.style.backgroundColor = color; 
} 
ocolorPopup.document.body.blur(); 
} 
function colorset() { 
if (window.event.keyCode == 13) { 
if (iscolor()) { 
ecolorPopup.value = document.getElementById("setcolorbox").value; 
if (GetRadioValue("colorType") == "textColor") { 
textContent.style.color = ecolorPopup.value; 
} 
else if (GetRadioValue("colorType") == "textbackColor") { 
textContent.style.backgroundColor = ecolorPopup.value; 
} 
else { 
divback.style.backgroundColor = ecolorPopup.value; 
} 
} 
ocolorPopup.document.body.blur(); 
} 
} 
function iscolor() { 
var pattern = /^#[0-9a-fA-F]{6}$/ 
var objvalue = document.getElementById("setcolorbox").value; 
if (objvalue.match(pattern) != null) { 
return true; 
} 
else { 
return false; 
} 
} 
function colordialogmore() { 
var sColor = dlgHelper.ChooseColorDlg(ecolorPopup.value); 
sColor = sColor.toString(16); 
if (sColor.length < 6) { 
var sTempString = "000000".substring(0, 6 - sColor.length); 
sColor = sTempString.concat(sColor); 
} 
ecolorPopup.value = "#" + sColor.toUpperCase(); 
//document.body.bgColor="#"+sColor.toUpperCase(); 
ocolorPopup.document.body.blur(); 
} 
function colordialog() { 
var e = event.srcElement; 
e.onkeyup = colordialog; 
ecolorPopup = e; 
var ocbody; 
var oPopBody = ocolorPopup.document.body; 
var colorlist = new Array(40); 
var colordialogw = 158; 
var colordialogh = 147 
var colordialogx = e.offsetLeft + textwindowleft - 7; 
var colordialogy = e.offsetTop + textwindowtop - colordialogh - 10; 
oPopBody.style.backgroundColor = "#f9f8f7"; 
oPopBody.style.border = "solid #999999 1px"; 
oPopBody.style.fontSize = "12px"; 
colorlist[0] = "#000000"; colorlist[1] = "#993300"; colorlist[2] = "#333300"; colorlist[3] = "#003300"; 
colorlist[4] = "#003366"; colorlist[5] = "#000080"; colorlist[6] = "#333399"; colorlist[7] = "#333333"; 
colorlist[8] = "#800000"; colorlist[9] = "#FF6600"; colorlist[10] = "#808000"; colorlist[11] = "#008000"; 
colorlist[12] = "#008080"; colorlist[13] = "#0000FF"; colorlist[14] = "#666699"; colorlist[15] = "#808080"; 
colorlist[16] = "#FF0000"; colorlist[17] = "#FF9900"; colorlist[18] = "#99CC00"; colorlist[19] = "#339966"; 
colorlist[20] = "#33CCCC"; colorlist[21] = "#3366FF"; colorlist[22] = "#800080"; colorlist[23] = "#999999"; 
colorlist[24] = "#FF00FF"; colorlist[25] = "#FFCC00"; colorlist[26] = "#FFFF00"; colorlist[27] = "#00FF00"; 
colorlist[28] = "#00FFFF"; colorlist[29] = "#00CCFF"; colorlist[30] = "#993366"; colorlist[31] = "#CCCCCC"; 
colorlist[32] = "#FF99CC"; colorlist[33] = "#FFCC99"; colorlist[34] = "#FFFF99"; colorlist[35] = "#CCFFCC"; 
colorlist[36] = "#CCFFFF"; colorlist[37] = "#99CCFF"; colorlist[38] = "#CC99FF"; colorlist[39] = "#FFFFFF"; 
ocbody = ""; 
ocbody += "<table CELLPADDING=0 CELLSPACING=3>"; 
ocbody += "<tr height=\"20\" width=\"20\"><td align=\"center\"><table style=\"border:1px solid #808080;\" width=\"12\" height=\"12\" bgcolor=\"" + e.value + "\"><tr><td><td bgcolor=\"eeeeee\" colspan=\"7\" style=\"font-size:12px;\" align=\"center\">当前颜色"; 
for (var i = 0; i < colorlist.length; i++) { 
if (i % 8 == 0) 
ocbody += "<tr>"; 
ocbody += "<td width=\"14\" height=\"16\" style=\"border:1px solid;\" onMouseOut=\"parent.colordialogmouseout(this);\" onMouseOver=\"parent.colordialogmouseover(this);\" onMouseDown=\"parent.colordialogmousedown('" + colorlist[i] + "')\" align=\"center\" valign=\"middle\"><table style=\"border:1px solid #808080;\" width=\"12\" height=\"12\" bgcolor=\"" + colorlist[i] + "\"><tr><td>"; 
if (i % 8 == 7) 
ocbody += ""; 
} 
//ocbody += "<tr><td align=\"center\" height=\"22\" colspan=\"8\" onMouseOut=\"parent.colordialogmouseout(this);\" onMouseOver=\"parent.colordialogmouseover(this);\" style=\"border:1px solid;font-size:12px;cursor:default;\" onMouseDown=\"parent.colordialogmore()\">其它颜色..."; 
ocbody += ""; 
oPopBody.innerHTML = ocbody; 
ocolorPopup.show(colordialogx, colordialogy, colordialogw, colordialogh, document.body); 
} 
//--> 
function WindowsTextShow(divid) { 
if (!isRunning) { 
WindowsTextInit(divid); 
isRunning = true; 
} 
SetWindows(); 
} 
function SetWindows() { 
textwindowtop = 50 + document.documentElement.scrollTop; 
textwindowleft = 50; 
div_back.style.display = 'block'; 
div_back.style.visibility = 'visible'; 
div_box.style.display = 'block'; 
div_box.className = "WindowsTextShow"; 
} 
function RefreshWin() { 
textwindowtop = 50 + document.documentElement.scrollTop; 
textwindowleft = 50; 
} 
function WindowsTextInit(divid) { 
var div_ctrlSet = document.createElement("DIV"); 
var div_textContent = document.createElement("DIV"); 
div_ctrlSet.id = "ctrlSet"; 
div_textContent.id = "textContent"; 
div_box.id = "WindowsTextShow"; 
div_box.className = "WindowsTextShow"; 
div_back.id = "divback"; 
WindowsTextAddObj(div_box, div_textContent); 
WindowsTextAddObj(div_box, div_ctrlSet); 
SetObjContent(div_textContent, document.getElementById(divid).innerHTML); 
SetObjContent(div_ctrlSet, "<div id='typeSet'>选择更改项：<input checked='checked' name='colorType' type='radio' value='textColor' />文字<input name='colorType' type='radio' value='textbackColor' />背景<input name='colorType' type='radio' value='backGroundColor' />遮盖物</script>
</div>"); 
SetObjContent(div_ctrlSet, "<div id="colorSet">选择颜色：<input id="setcolorbox" name="sel1" type="text" onkeydown="colorset()" onfocus="colordialog()">
</div>"); 
SetObjContent(div_ctrlSet, "<div id="fontSizeSet">选择字体：<select name="select" id="fontslt" onchange="SetFont(textContent)"><option selected>选择阅读字体</option></select>
</div>"); 
SetObjContent(div_ctrlSet, "<div id="fullScreenSet">全屏切换：<input type="button" onclick="FullScreen()" id="fullScreen" name="fullScreen" value="FullScreen">
</div>"); 
SetObjContent(div_ctrlSet, "<div id="hiddenCtrSet">隐藏设置：<input type="button" onclick="HiddenCtrlSet()" name="HiddenCtrlSet" value="HiddenCtrlSet">
</div>"); 
SetObjContent(div_ctrlSet, "<div id="closeSet">关闭窗口：<input type="button" onclick="CloseWindows()" name="CloseWindows" value="CloseWindows">
</div>"); 
document.body.appendChild(div_back); 
document.body.appendChild(div_box); 
SelectAddObj(); 
} 
function HiddenCtrlSet() { 
if (isCtrlSetShow) { 
document.getElementById("typeSet").style.display = "none"; 
document.getElementById("colorSet").style.display = "none"; 
document.getElementById("fontSizeSet").style.display = "none"; 
document.getElementById("fullScreenSet").style.display = "none"; 
isCtrlSetShow = false; 
} 
else { 
document.getElementById("typeSet").style.display = "block"; 
document.getElementById("colorSet").style.display = "block"; 
document.getElementById("fontSizeSet").style.display = "block"; 
document.getElementById("fullScreenSet").style.display = "block"; 
isCtrlSetShow = true; 
} 
} 
function FullScreen() { 
if (isfullScreen) { 
isfullScreen = false; 
textwindowtop += 50; 
textwindowleft += 50; 
div_box.className = "WindowsTextShow"; 
document.getElementById("fullScreen").value = "FullScreen"; 
} 
else { 
isfullScreen = true; 
textwindowtop -= 50; 
textwindowleft -= 50; 
div_box.className = "WindowsTextShowFull"; 
document.getElementById("fullScreen").value = "DefaultScreen"; 
} 
} 
function GetIEHeight() //函数：获取尺寸 
{ 
var winHeight = 0; 
if (window.innerHeight) 
winHeight = window.innerHeight; 
else if ((document.body) && (document.body.clientHeight)) 
winHeight = document.body.clientHeight; 
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) { 
winHeight = document.documentElement.clientHeight; 
} 
return winHeight; 
} 
function GetRadioValue(ids) { 
var obj = document.getElementsByName(ids); 
for (var i = 0; i <div id="textBox" style="height:1100px; background-color:White;">
Go-kart stalls, online games become more wintery
Reporter Liu Fangyuan
Graduate Xiao Wang (pseudonym) has recently been caught up in the rush to find a job. Not long ago, he thought that joining the online gaming industry, which is known as "anti-economic cycle", would allow him to protect himself in this cold winter. 
"The company started to lay off employees at the beginning of this month, with more than 100 people in total in several batches, accounting for 30% to 40% of the company's total number of employees." Xiao Wang is a new employee recruited by Lexian Software Development (Shanghai) Co., Ltd. this year , this company is the Chinese branch of South Korean online game manufacturer Nexon, which owns well-known online games such as "Kart Run". 
It is reported that "Kart Runner" has always been among the best in the field of domestic casual games and has brought considerable revenue to operators. Since online games have a safe haven effect on the financial environment, domestic online game manufacturers have previously expressed optimism about the industry. Why did Lexian Software choose to significantly "downsize" at this moment? 
On December 24, the reporter asked LeXin Software for confirmation on this matter. A Korean person in charge of LeXin Software Management Center told the reporter that the company was currently unable to comment on this matter. 
Adjustment of battle lines? 
Nexon, the parent company of Lexin Software, is well-known in China. In the early years, the casual game "Bubble Hall" distributed by Shanda Network was produced by Nexon. After seeing the huge success of "Pao Pao Tang" in the Chinese market, Nexon subsequently gave up its cooperation with Shanda and independently established Lexin Software to operate casual games such as "Kart Runner" in China. 
According to insiders in the online game industry, the current operating platform of "Kart Racing" is called Century Tiancheng, which is jointly built by Shanghai Post and Lexian Software. "The actual control platform of 'Century Tiancheng' known to the outside world is Lexian Software." In addition to "Kart Racing", the games operated by Century Tiancheng include "Rocky", "New Tianyi Chain", "Tianguan War", "Counter-Strike Online", etc. 
"Rocky" was the first game launched in China, but the response was mediocre. However, since the official launch of "Kart Racing" in China in 2006, the company began to turn around. An insider in the online game industry told reporters that Kart Racing alone can bring in nearly RMB 10 million in revenue in a month. However, the market performance of Century Tiancheng's other games is still average. 
On December 12, Century Tiancheng issued a "termination of operation announcement" on the official websites of the two online games "Tianguan War Chronicles" and "New Tianyi Chain" at the same time, saying that all servers of these two games will be closed on December 30 Closes at 10:00 Sunday. 
In this regard, Xiao Wang told reporters that this may be the reason why the company has reduced its employees this time. Because the performance of some old games has declined, the company needs to transform, and there are new games to be launched, so large-scale adjustments have to be made. 
Another person familiar with the matter told reporters that Century Tiancheng’s personnel adjustments this time involve a large number of middle and high-level personnel. “Many of the first batch of people who worked on “Rocky” and “Kart” have left. It may be due to adjustments made by South Korea due to the economic crisis. "
It is reported that "Counter-Strike Online" is a new game recently launched and tested by Century Tiancheng. "Although this game does not perform well in South Korea, because there are more CS player bases in China than in South Korea, this game They have high hopes."
Is there winter in online games? 
In fact, some international game giants have also begun to "downsize." 
Beginning in December, EA (Electronic Arts), a well-known American game developer, announced that the company will lay off another 400 people. With the October layoff plan, the number of layoffs will reach 1,000, accounting for about 10% of the total number of employees. 
However, industry experts believe that because EA still mainly relies on the traditional stand-alone game model and faces mature Western markets, it is greatly affected by the economic environment. China's online game market is still in the growth stage, so it is affected by the economic environment. The impact is smaller. 
In this regard, Shanda, Giant, The9 and other parties have expressed similar views to reporters - online games are cheap entertainment, and the decline in income caused by the economic crisis is unlikely to affect low-consumption entertainment projects in the short term, so they have not seen The market shrank significantly. 
"For the large online game companies that have been listed, the impact of this round of economic situation is not big, firstly because the products are relatively mature, and secondly, they have sufficient funds." Chen Xiaowei, president of The9, told reporters that at present, The9 The focus of the city is to implement a diversified product strategy and improve the risk of diversifying reliance on a single product line for different needs. 
According to market research company iResearch, the total revenue of Chinese online game operators increased by more than 50% year-on-year in the third quarter of this year, reaching nearly US$800 million. At the same time, the growth momentum of the online game market in this quarter is still very strong. 
However, for small and medium-sized online game manufacturers that have not been listed on the market, life has indeed begun to become difficult, because it is difficult for small studios to obtain investment. After further R&D investment is cut off, the future of small studios will be unsustainable. The person in charge of a medium-sized online game company told reporters, "Some major expansion plans recently have been temporarily shelved, and we can only rely on existing games to maintain the status quo."
</div>
</div>
<div style="width:25%; float:left;"></div>
</div>
<div style=" height:100px; background-color:Red;"></div>

[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 ]
좋아요 블루이상 홈페이지 이 글을 활용하시면 아주 실용적입니다.
이제는 IE만 지원합니다. 관심이 있으시면 CSS 해킹을 통해 더 많은 브라우저를 지원하실 수 있습니다.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：javascript double-click text box to edit function code_form special effectsNext article：javascript double-click text box to edit function code_form special effects

See more

JS CSS article viewing system_javascript skills

Related articles