以下是效果图，最后面po了源代码！
<style type="text/css">
/*把整个网页都设置成灰色,素色*/
/*
html {
-webkit-filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(graysale=1);
}
*/
.allGray {
-webkit-filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(graysale=1);
}
</style>
整个页面都变为灰色、素色了
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>整个网页都设置成灰色，素色</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/body.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/mark.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/console.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/console.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/loading.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/toTop.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/weChatQRCode.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/test.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/testVar.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/xml.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/ueditor/lang/zh-cn/zh-cn.js"></script>
<style type="text/css">
body {
padding: 0;
margin: 0;
}
input[type=text], input[type=password], input[type=file] {
height: 38px;
}
/*把整个网页都设置成灰色,素色*/
/*
html {
-webkit-filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(graysale=1);
}
*/
.allGray {
-webkit-filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(graysale=1);
}
.editor {
/* border: 2px solid #8E388E; */
border: 3px solid blue;
border-radius: 6px; /*把边框做成圆角*/
/*color: red;*/
}
*{
/*不把边框，padding(内边距)计算进去*/
/*
box-sizing:border-box; 是CSS3新增属性，了解这个属性，我们先从块级元素的盒子大小说起，通常一个块级元素实
际所占宽高度=外边距（margin）+ 边界宽度(border-width) + 内边距（padding）+ 高度（height） / 宽度（width）
如果设置了border-box，实际所占宽高度 = 设置的高度（height）/ 设置的宽度（width）+ 外边距（margin）
*/
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.myHrTag {
height:5px;
border:5px solid black;
}
.myHrTag2 {
height:5px;
border:5px solid #CD0000;
}
</style>
</head>
<body>
<center id="myCenter">
<h1>整个网页都设置成灰色，素色</h1>
<a href="https://www.jb51.net/article/34863.htm" target="_blank">
getComputedStyle与currentStyle获取外部样式(style/class)
</a>
<h3>
<span style="color: #CD0000;font-size: 30px;">
获取外部样式兼容写法:
</span>
var finalStyle = 元素对象.currentStyle ? 元素对象.currentStyle
: document.defaultView.getComputedStyle(元素对象, null);
</h3>
<h2>百度的ueditor富文本编辑器js报错(console控制台可以看到报错信息)，导致回到顶部功能不能正常使用</h2>
<input id="setAllGrayButton" type="button" value="点击我，把整个网页置为灰色" onclick="setAllGray(this)">
<br><br>
<form id="testForm" action="" method="get">
<h2>企业信息</h2>
企业名称:<input type="text" value="于都县雪豹软件工作室"><br><br>
企业性质:
<select>
<option id="1">民企(有限责任公司)</option>
<option id="2">国企</option>
<option id="3">外企</option>
<option id="4">民企(股份有限公司)</option>
</select><br><br>
成立日期:<input type="text" value="2018-06-17" onfocus="WdatePicker({readOnly:true, lang:'zh-cn', dateFmt:'yyyy-MM-dd'})"><br><br>
注册资本:<input type="text" value="8000">万元人民币<br><br>
公司网址:<input type="text" value="https://blog.csdn.net/czh500"><br><br>
营业执照、企业资质证明:<input type="file"><br><br>
法人代表:<input type="text" value="令狐冲"><br><br>
<h2>招聘信息(这里用到了富文本编辑器,百度的ueditor富文本编辑器)</h2>
职位类型:
<select>
<option id="0">经纪人</option>
<option id="1">演员</option>
<option id="2">艺人助理</option>
<option id="3">道具</option>
<option id="4">灯光</option>
<option id="5">化装</option>
<option id="6">编剧</option>
<option id="7">武术指导</option>
<option id="8">宣传</option>
<option id="9">出纳</option>
<option id="10">会计</option>
<option id="11">网络营销</option>
<option id="12">编导</option>
<option id="13">保镖</option>
<option id="14">客服</option>
<option id="15">摄像师</option>
<option id="16">策划</option>
<option id="17">文案</option>
<option id="18">导演</option>
<option id="19">特效制作</option>
<option id="20">剪辑师</option>
<option id="21">制片</option>
<option id="22">监制</option>
<option id="23">艺术指导</option>
<option id="24">统筹</option>
<option id="25">场务</option>
<option id="26">美术</option>
<option id="27">服装</option>
<option id="28">录音</option>
<option id="29">剧务</option>
<option id="30">作词</option>
<option id="31">作曲</option>
<option id="32">演唱</option>
<option id="33">其他</option>
</select><br><br>
职位:<input type="text" value="会计"><br><br>
职位性质:
<select>
<option id="1">签合同</option>
<option id="2">临时雇佣</option>
<option id="3">合作</option>
<option id="4">实习</option>
<option id="5">学徒</option>
</select><br><br>
福利待遇:
<select>
<option id="1">五险和公积金</option>
<option id="2">只有五险，没有公积金</option>
<option id="3">只有公积金，没有五险</option>
<option id="4">不提供五险和公积金</option>
<option id="5">其他</option>
</select><br><br>
办公地点类型:
<select>
<option id="1">室内(录影棚等)</option>
<option id="2">固定户外(只在固定一个城市或地区内，如只在横店拍摄)</option>
<option id="3">户外跟组(跟随剧组的需要，全国各地甚至国外，剧组在哪，你就在哪)</option>
<option id="4">公司办公室</option>
<option id="5">其他</option>
</select><br><br>
工作城市:<input type="text" value="横店"><br><br>
薪酬方式:
<select>
<option id="1">按/天</option>
<option id="2">按/月</option>
<option id="3">按/场</option>
<option id="4">按/集</option>
<option id="5">按/小时</option>
<option id="6">其他</option>
</select><br><br>
薪酬:<input type="text" value="5000" style="width: 100px;">到
<input type="text" value="12000" style="width: 100px;">元
<span style="color: #CD0000;">(*必填项)写面议的都是耍流氓</span><br><br>
学历:<select>
<option id="0">不限</option>
<option id="1">初中</option>
<option id="2">高中</option>
<option id="3">大专</option>
<option id="4">本科</option>
<option id="5">研究生</option>
</select><br><br>
工作经验:<select>
<option id="0">不限</option>
<option id="1">1年</option>
<option id="2">2年</option>
<option id="3">3年</option>
<option id="4">5年</option>
<option id="5">5年以上</option>
</select><br>
职位描述和技能要求:
<textarea id="content" name="content" class="editor"
style="width: 100%; height: 100%;border:5px solid #0000AA;">
请在此填写职位描述、职位要求、技能要求
</textarea>
<br>
<textarea id="myTextarea" onfocus="cleanTextarea(this)" onblur="setValue(this)" style="width: 100%;height: 100%;">
请在此填写职位描述、职位要求、技能要求!
</textarea>
文本域(多行文本框)测试<br><br>
发言:<input id="inputBox" type="text" value="自古评论出英雄!留个言，评论一下吧!">
<br><br>
账号:<input id="inputBox2" type="text" value="手机号/邮箱/用户名"><br><br>
薪水:<input id="payMoney" onfocus="cleanTextareaValue(this)" onblur="setTextareaValue(this)" type="text" value="凡是写面议的都是耍流氓"><br><br>
擅长语言:<input id="language" onfocus="cleanTextareaValue(this)" onblur="setTextareaValue(this)" type="text" value="可写英语/德语/法语，方言也可，如粤语/上海话/天津话"><br><br>
</form>
<input type="text" value="(点击我获取变量hello的值)" onclick="getVarHello(this)" style="background-color: #ea9393; border: 4px solid #CD0000;border-radius: 8px;">
<input id="tempVar" type="hidden">
</center>
</body>
<script type="text/javascript">
UE.getEditor("content");
</script>
<script type="text/javascript">
var flag = false;
var currentObjectID = "";
//清除文本域中的值(通用方法,该函数这种思路有很大的问题，该函数作废)
function cleanTextareaValue(currentObject) {
console.log("***获取焦点***" + "元素id=" + currentObject.id + " / 元素值=" + currentObject.value);
debug("***获取焦点***" + "元素id=" + currentObject.id + " / 元素值=" + currentObject.value);
debug("flag=" + flag + " / 临时变量currentObjectID=" + currentObjectID);
if (!flag) {
currentObjectID = currentObject.id;
document.getElementById("tempVar").value = currentObject.value;
debug("flag等于false" + " /currentObject.id=" + currentObject.id);
flag = true;
}
if (currentObjectID != currentObject.id) {
// currentObjectID = currentObject.id;
document.getElementById("tempVar").value = currentObject.value;
flag = false;
debug("currentObjectID变量和当前节点的id不相等");
}
// console.log(currentObjectID);
//获得焦点时，如果值为默认值，则设置为空
if (currentObject.value == document.getElementById("tempVar").value) {
currentObject.value = "";
}
debug("临时变量currentObjectID=" + currentObjectID + " / 临时变量tempVar=" + document.getElementById("tempVar").value + "<hr class='myHrTag'>");
getConsole().style.height = "auto";
}
//设置文本域的值(通用方法,该函数这种思路有很大的问题，该函数作废)
function setTextareaValue(currentObject) {
console.log("***失去焦点***" + "元素id=" + currentObject.id + " / 元素值=" + currentObject.value);
//失去焦点时，如果值为空，则设置为默认值
if (currentObject.value == "") {
currentObject.value = document.getElementById("tempVar").value;
}
debug("***失去焦点***" + "元素id=" + currentObject.id + " / 元素值=" + currentObject.value + "<hr class='myHrTag2'>");
}
//通用函数(经过测试，该函数可以正确无误的执行,没有逻辑错误)
function cleanTextareaValue(currentObject) {
if (!document.getElementById("hidden" + currentObject.id)) {
var inputNode = document.createElement("input");
inputNode.type = "hidden";
inputNode.id = "hidden" + currentObject.id;
inputNode.value = currentObject.value;
document.body.appendChild(inputNode);
}
if (currentObject.value == document.getElementById("hidden"
+ currentObject.id).value) {
currentObject.value = "";
}
}
//通用函数(经过测试，该函数可以正确无误的执行,没有逻辑错误)
function setTextareaValue(currentObject) {
if (currentObject.value == "") {
currentObject.value = document.getElementById("hidden"
+ currentObject.id).value;
}
}
var centerNode = document.getElementById("myCenter");
var setAllGrayButtonValue = document.getElementById("setAllGrayButton").value;
//把整个网页设置为灰色、素色
function setAllGray(currentObject) {
debug(document.body + " / " + document.body.nodeName + " / "
+ document.body.className);
debug("body标签的class属性是否有值:" + (!document.body.className == ""));
// document.body.insertBefore(getConsole(), document.body.firstChild);
centerNode.insertBefore(getConsole(), currentObject);
if (document.body.className == "") {
document.body.className = "allGray";
currentObject.value = "点击我，把整个网页还原回彩色";
} else {
document.body.className = "";
currentObject.value = setAllGrayButtonValue;
}
}
// var modified = false;
var inputBoxValue = document.getElementById("inputBox").value;
debug("发言文本框中的值=" + inputBoxValue);
document.getElementById("inputBox").onfocus = function() {
// if (!modified)
// document.getElementById("inputBox").value = "";
if (document.getElementById("inputBox").value == inputBoxValue) {
document.getElementById("inputBox").value = "";
}
};
document.getElementById("inputBox").onblur = function() {
// if (!modified)
// document.getElementById("inputBox").value = inputBoxValue;
if (document.getElementById("inputBox").value == "") {
document.getElementById("inputBox").value = inputBoxValue;
}
};
//如下这样写，火狐浏览器和谷歌浏览器不兼容，除了不兼容，代码还有逻辑上的bug
// document.getElementById("inputBox").onkeydown = function() {
// modified = true;
// };
// var modified2 = false;
var inputBox2Value = document.getElementById("inputBox2").value;
debug("账号文本框中的值=" + inputBox2Value);
document.getElementById("inputBox2").onfocus = function() {
// if (!modified2)
// document.getElementById("inputBox2").value = "";
if (document.getElementById("inputBox2").value == inputBox2Value) {
document.getElementById("inputBox2").value = "";
}
};
document.getElementById("inputBox2").onblur = function() {
// if (!modified2)
// document.getElementById("inputBox2").value = inputBox2Value;
if (document.getElementById("inputBox2").value == "") {
document.getElementById("inputBox2").value = inputBox2Value;
}
};
//如下这样写，火狐浏览器和谷歌浏览器不兼容，除了不兼容，代码还有逻辑上的bug
// document.getElementById("inputBox2").onkeydown = function() {
// modified2 = true;
// };
// window.onload = function(){
// debug("页面加载完了!");
// }
//获取文本域中的值(保存文本域的值)
var textareaValue = document.getElementById("myTextarea").value;
debug("<span style='color:#CD0000;font-size:20px;'>文本域中的值=</span><span style='color:#0000AA;font-size:20px;'>"
+ textareaValue + "</span>");
//清除文本域中的值
function cleanTextarea(currentObject) {
debug("<span style='color:#CD0000;'>文本域获得焦点，文本域中的值=</span>"
+ currentObject.value);
document.getElementById("testForm").insertBefore(getConsole(),
currentObject);
// debug(currentObject.value == textareaValue);
//获得焦点时，如果值为默认值，则设置为空
if (currentObject.value == textareaValue) {
currentObject.value = "";
}
console.log(getConsole());
console.log("自定义的console控制台层=" + getConsole());
}
//设置文本域的值
function setValue(currentObject) {
debug("<span style='color:#0000AA;'>文本域失去焦点，文本域中的值=</span>"
+ currentObject.value);
//失去焦点时，如果值为空，则设置为默认值
if (currentObject.value == "") {
currentObject.value = textareaValue;
}
}
window.onload = function() {
createFollowWeChatQRCodeElement();
var bodyTag = document.body;
var finalStyle = bodyTag.currentStyle ? bodyTag.currentStyle
: document.defaultView.getComputedStyle(bodyTag, null);
var spanStartTag = "<span style='color: #CD0000;font-size: 16px;'>"
var spanEndTag = "</span>"
debug(spanStartTag + bodyTag.nodeName + "外部css样式margin-top="
+ finalStyle.getPropertyValue("margin-top") + spanEndTag);
debug(spanStartTag + bodyTag.nodeName + "外部css样式margin-bottom="
+ finalStyle.getPropertyValue("margin-bottom") + spanEndTag);
debug(spanStartTag + bodyTag.nodeName + "外部css样式margin-left="
+ finalStyle.getPropertyValue("margin-left") + spanEndTag);
debug(spanStartTag + bodyTag.nodeName + "外部css样式margin-right="
+ finalStyle.getPropertyValue("margin-right") + spanEndTag);
}
// if (getConsole() != null) {
// document.body.insertBefore(getConsole(), document.body.firstChild);
// }
//把控制台div层元素追加在页面的最后一个元素的后面(即放在页面的最下面)
if (getConsole() != null) {
getConsole().style.height = "280px";
document.body.appendChild(getConsole());
}
// 当网页向下滑动 20px 出现"返回顶部" 按钮
// window.onscroll = function() {scrollFunction()};//不起效果
function getVarHello(obj) {
console.log("hello=" + hello);
obj.value = hello;
}
console.log("hello=" + hello);
debug("hello=" + hello);
var hello = "一万年太久只争朝夕";
</script>
</html>
扫一扫
1324
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
