#761
展开↯#762
作者:广西南宁市
UC浏览器,手机中的IE无效。。 。。
jQuery消息提示框插件点击调用
message.css
message.js
#,广西南宁市,2017-11-30,17:18:25,
调用方式:
参数详解:
#,广西南宁市,2017-11-30,17:22:51,
演示完整代码
jQuery消息提示框插件点击调用
message.css
<link rel="stylesheet" href="css/message.css">
Run code
Cut to clipboard
/* c-message组件样式 */
.c-message{
position:fixed;
top:30px;
left:50%;
/* transform:translateX(-50%); */
padding-left:50px;
padding-right:20px;
height: 40px;
line-height: 40px;
background: #fff;
min-width:200px;
color:#666;
box-shadow: 0 2px 4px rgba(0,0,0,.12), 0 0 6px rgba(0,0,0,.04);
z-index:9999;
}
.c-message--icon{
color:#fff;
width: 40px;
height: 40px;
text-align: center;
position: absolute;
left: 0;
top: 0;
line-height: 40px;
}
.c-message--success{
background:#13CE66 url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjQwcHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMCAwIDQwIDQwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOS4xICgzMTcyMCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+aWNvbl9zdWNjZXNzPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IkVsZW1lbnQtZ3VpZGVsaW5lLXYwLjIuNCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ik1lc3NhZ2UiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02MC4wMDAwMDAsIC0yMTIuMDAwMDAwKSI+CiAgICAgICAgICAgIDxnIGlkPSLluKblgL7lkJFf5L+h5oGvIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2MC4wMDAwMDAsIDIxMi4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJSZWN0YW5nbGUtMiI+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Imljb25fc3VjY2VzcyI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMiIgZmlsbD0iIzEzQ0U2NiIgeD0iMCIgeT0iMCIgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIj48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yNy44MjU1ODE0LDE3LjE0ODQzNTcgTDE5LjAxNzQ0LDI1LjgyODEyMTMgQzE4LjkwMTE2MDksMjUuOTQyNzA4MyAxOC43NjU1MDMzLDI2IDE4LjYxMDQ2NywyNiBDMTguNDU1NDI3LDI2IDE4LjMxOTc2OTMsMjUuOTQyNzA4MyAxOC4yMDM0ODY1LDI1LjgyODEyMTMgTDE4LjAyOTA3MTYsMjUuNjU2MjUgTDEzLjE3NDQxODYsMjAuODQzNzUgQzEzLjA1ODEzOTUsMjAuNzI5MTYzIDEzLDIwLjU5NTQ4MzcgMTMsMjAuNDQyNzA0NyBDMTMsMjAuMjg5OTI5MyAxMy4wNTgxMzk1LDIwLjE1NjI1IDEzLjE3NDQxODYsMjAuMDQxNjY2NyBMMTQuMzY2Mjc3MiwxOC44NjcxODU3IEMxNC40ODI1NiwxOC43NTI2MDIzIDE0LjYxODIxNzcsMTguNjk1MzEwNyAxNC43NzMyNTc3LDE4LjY5NTMxMDcgQzE0LjkyODI5NCwxOC42OTUzMTA3IDE1LjA2Mzk1MTYsMTguNzUyNjAyMyAxNS4xODAyMzA3LDE4Ljg2NzE4NTcgTDE4LjYxMDQ2NywyMi4yNzYwMzggTDI1LjgxOTc2OTMsMTUuMTcxODcxMyBDMjUuOTM2MDQ4NCwxNS4wNTcyODggMjYuMDcxNzA2LDE1IDI2LjIyNjc0MjMsMTUgQzI2LjM4MTc4MjMsMTUgMjYuNTE3NDQsMTUuMDU3Mjg4IDI2LjYzMzcyMjgsMTUuMTcxODcxMyBMMjcuODI1NTgxNCwxNi4zNDYzNTIzIEMyNy45NDE4NjA1LDE2LjQ2MDkzNTcgMjgsMTYuNTk0NjE1IDI4LDE2Ljc0NzM5NCBDMjgsMTYuOTAwMTczIDI3Ljk0MTg2MDUsMTcuMDMzODUyMyAyNy44MjU1ODE0LDE3LjE0ODQzNTcgTDI3LjgyNTU4MTQsMTcuMTQ4NDM1NyBaIiBpZD0iUGF0aCIgZmlsbD0iI0ZGRkZGRiI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+) no-repeat 0 50%;
}
.c-message--error{
background:#FF4949 url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjQwcHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMCAwIDQwIDQwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOS4xICgzMTcyMCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+aWNvbl9kYW5nZXI8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iRWxlbWVudC1ndWlkZWxpbmUtdjAuMi40IiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iTWVzc2FnZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTYwLjAwMDAwMCwgLTMzMi4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9IuW4puWAvuWQkV/kv6Hmga8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYwLjAwMDAwMCwgMzMyLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9IlJlY3RhbmdsZS0yIj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iaWNvbl9kYW5nZXIiPgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIGZpbGw9IiNGRjQ5NDkiIHg9IjAiIHk9IjAiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMjUuODE3MjYyNywxNi4zNDUxNzk2IEMyNS45MzkwOTAyLDE2LjIyMzM0ODMgMjYsMTYuMDc2MTQxOCAyNiwxNS45MDM1NTIzIEMyNiwxNS43MzA5NjI4IDI1LjkzOTA5MDIsMTUuNTgzNzU2MyAyNS44MTcyNjI3LDE1LjQ2MTkyODkgTDI0LjUwNzYxNTcsMTQuMTgyNzQxMSBDMjQuMzg1Nzg4MiwxNC4wNjA5MTM3IDI0LjI0MzY1NzUsMTQgMjQuMDgxMjE5NiwxNCBDMjMuOTE4NzgxNywxNCAyMy43NzY2NTEsMTQuMDYwOTEzNyAyMy42NTQ4MjM1LDE0LjE4Mjc0MTEgTDIwLDE3LjgzNzU2MzUgTDE2LjMxNDcyMTYsMTQuMTgyNzQxMSBDMTYuMTkyODkwMiwxNC4wNjA5MTM3IDE2LjA1MDc1OTUsMTQgMTUuODg4MzIxNiwxNCBDMTUuNzI1ODg3NiwxNCAxNS41ODM3NTY5LDE0LjA2MDkxMzcgMTUuNDYxOTI5NCwxNC4xODI3NDExIEwxNC4xNTIyODI0LDE1LjQ2MTkyODkgQzE0LjA1MDc1ODIsMTUuNTgzNzU2MyAxNCwxNS43MzA5NjI4IDE0LDE1LjkwMzU1MjMgQzE0LDE2LjA3NjE0MTggMTQuMDUwNzU4MiwxNi4yMjMzNDgzIDE0LjE1MjI4MjQsMTYuMzQ1MTc5NiBMMTcuODM3NTYwOCwyMC4wMDAwMDE5IEwxNC4xNTIyODI0LDIzLjY1NDgyNDMgQzE0LjA1MDc1ODIsMjMuNzc2NjUxNyAxNCwyMy45MjM4NTgyIDE0LDI0LjA5NjQ0NzcgQzE0LDI0LjI2OTAzNzIgMTQuMDUwNzU4MiwyNC40MTYyNDM3IDE0LjE1MjI4MjQsMjQuNTM4MDcxMSBMMTUuNDYxOTI5NCwyNS44MTcyNTg5IEMxNS41ODM3NTY5LDI1LjkzOTA4NjMgMTUuNzI1ODg3NiwyNiAxNS44ODgzMjE2LDI2IEMxNi4wNTA3NTk1LDI2IDE2LjE5Mjg5MDIsMjUuOTM5MDg2MyAxNi4zMTQ3MjE2LDI1LjgxNzI1ODkgTDIwLDIyLjE2MjQzNjUgTDIzLjY1NDgyMzUsMjUuODE3MjU4OSBDMjMuNzc2NjUxLDI1LjkzOTA4NjMgMjMuOTE4NzgxNywyNiAyNC4wODEyMTk2LDI2IEMyNC4yNDM2NTc1LDI2IDI0LjM4NTc4ODIsMjUuOTM5MDg2MyAyNC41MDc2MTU3LDI1LjgxNzI1ODkgTDI1LjgxNzI2MjcsMjQuNTM4MDcxMSBDMjUuOTM5MDkwMiwyNC40MTYyNDM3IDI2LDI0LjI2OTAzNzIgMjYsMjQuMDk2NDQ3NyBDMjYsMjMuOTIzODU4MiAyNS45MzkwOTAyLDIzLjc3NjY1MTcgMjUuODE3MjYyNywyMy42NTQ4MjQzIEwyMi4xMzE5ODA0LDIwLjAwMDAwMTkgTDI1LjgxNzI2MjcsMTYuMzQ1MTc5NiBaIiBpZD0iUGF0aCIgZmlsbD0iI0ZGRkZGRiI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+) no-repeat 0 50%;
}
.c-message--info{
background:#20A0FF url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjQwcHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMCAwIDQwIDQwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOS4xICgzMTcyMCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+aWNvbl9pbmZvPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IkVsZW1lbnQtZ3VpZGVsaW5lLXYwLjIuNCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ik1lc3NhZ2UiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02MC4wMDAwMDAsIC0xNTIuMDAwMDAwKSI+CiAgICAgICAgICAgIDxnIGlkPSLluKblgL7lkJFf5L+h5oGvIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2MC4wMDAwMDAsIDE1Mi4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJSZWN0YW5nbGUtMiI+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Imljb25faW5mbyI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMiIgZmlsbD0iIzUwQkZGRiIgeD0iMCIgeT0iMCIgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIj48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMS42MTUzODQ2LDI2LjU0MzIwOTkgQzIxLjYxNTM4NDYsMjYuOTQ3ODc1MSAyMS40NTgzMzQ4LDI3LjI5MTgzNjggMjEuMTQ0MjMwOCwyNy41NzUxMDI5IEMyMC44MzAxMjY4LDI3Ljg1ODM2ODkgMjAuNDQ4NzE5NCwyOCAyMCwyOCBDMTkuNTUxMjgwNiwyOCAxOS4xNjk4NzMyLDI3Ljg1ODM2ODkgMTguODU1NzY5MiwyNy41NzUxMDI5IEMxOC41NDE2NjUyLDI3LjI5MTgzNjggMTguMzg0NjE1NCwyNi45NDc4NzUxIDE4LjM4NDYxNTQsMjYuNTQzMjA5OSBMMTguMzg0NjE1NCwxOS43NDQ4NTYgQzE4LjM4NDYxNTQsMTkuMzQwMTkwNyAxOC41NDE2NjUyLDE4Ljk5NjIyOSAxOC44NTU3NjkyLDE4LjcxMjk2MyBDMTkuMTY5ODczMiwxOC40Mjk2OTY5IDE5LjU1MTI4MDYsMTguMjg4MDY1OCAyMCwxOC4yODgwNjU4IEMyMC40NDg3MTk0LDE4LjI4ODA2NTggMjAuODMwMTI2OCwxOC40Mjk2OTY5IDIxLjE0NDIzMDgsMTguNzEyOTYzIEMyMS40NTgzMzQ4LDE4Ljk5NjIyOSAyMS42MTUzODQ2LDE5LjM0MDE5MDcgMjEuNjE1Mzg0NiwxOS43NDQ4NTYgTDIxLjYxNTM4NDYsMjYuNTQzMjA5OSBaIE0yMCwxNS44MDQyOTgxIEMxOS40NDQ0NDI3LDE1LjgwNDI5ODEgMTguOTcyMjI0LDE1LjYxOTM2ODcgMTguNTgzMzMzMywxNS4yNDk1MDQ2IEMxOC4xOTQ0NDI3LDE0Ljg3OTY0MDYgMTgsMTQuNDMwNTI1NSAxOCwxMy45MDIxNDkxIEMxOCwxMy4zNzM3NzI2IDE4LjE5NDQ0MjcsMTIuOTI0NjU3NSAxOC41ODMzMzMzLDEyLjU1NDc5MzUgQzE4Ljk3MjIyNCwxMi4xODQ5Mjk1IDE5LjQ0NDQ0MjcsMTIgMjAsMTIgQzIwLjU1NTU1NzMsMTIgMjEuMDI3Nzc2LDEyLjE4NDkyOTUgMjEuNDE2NjY2NywxMi41NTQ3OTM1IEMyMS44MDU1NTczLDEyLjkyNDY1NzUgMjIsMTMuMzczNzcyNiAyMiwxMy45MDIxNDkxIEMyMiwxNC40MzA1MjU1IDIxLjgwNTU1NzMsMTQuODc5NjQwNiAyMS40MTY2NjY3LDE1LjI0OTUwNDYgQzIxLjAyNzc3NiwxNS42MTkzNjg3IDIwLjU1NTU1NzMsMTUuODA0Mjk4MSAyMCwxNS44MDQyOTgxIFoiIGlkPSJDb21iaW5lZC1TaGFwZSIgZmlsbD0iI0ZGRkZGRiI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+) no-repeat 0 50%;
}
.c-message--warning{
background:#F7BA2A url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjQwcHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMCAwIDQwIDQwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOS4xICgzMTcyMCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+aWNvbl93YXJuaW5nPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ik1lc3NhZ2UiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02MC4wMDAwMDAsIC0yNzIuMDAwMDAwKSI+CiAgICAgICAgICAgIDxnIGlkPSLluKblgL7lkJFf5L+h5oGvLWNvcHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYwLjAwMDAwMCwgMjcyLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9IlJlY3RhbmdsZS0yIj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iaWNvbl93YXJuaW5nIj4KICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiBmaWxsPSIjRjdCQTJBIiB4PSIwIiB5PSIwIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTIxLjYxNTM4NDYsMjYuNTQzMjA5OSBDMjEuNjE1Mzg0NiwyNi45NDc4NzUxIDIxLjQ1ODMzNDgsMjcuMjkxODM2OCAyMS4xNDQyMzA4LDI3LjU3NTEwMjkgQzIwLjgzMDEyNjgsMjcuODU4MzY4OSAyMC40NDg3MTk0LDI4IDIwLDI4IEMxOS41NTEyODA2LDI4IDE5LjE2OTg3MzIsMjcuODU4MzY4OSAxOC44NTU3NjkyLDI3LjU3NTEwMjkgQzE4LjU0MTY2NTIsMjcuMjkxODM2OCAxOC4zODQ2MTU0LDI2Ljk0Nzg3NTEgMTguMzg0NjE1NCwyNi41NDMyMDk5IEwxOC4zODQ2MTU0LDE5Ljc0NDg1NiBDMTguMzg0NjE1NCwxOS4zNDAxOTA3IDE4LjU0MTY2NTIsMTguOTk2MjI5IDE4Ljg1NTc2OTIsMTguNzEyOTYzIEMxOS4xNjk4NzMyLDE4LjQyOTY5NjkgMTkuNTUxMjgwNiwxOC4yODgwNjU4IDIwLDE4LjI4ODA2NTggQzIwLjQ0ODcxOTQsMTguMjg4MDY1OCAyMC44MzAxMjY4LDE4LjQyOTY5NjkgMjEuMTQ0MjMwOCwxOC43MTI5NjMgQzIxLjQ1ODMzNDgsMTguOTk2MjI5IDIxLjYxNTM4NDYsMTkuMzQwMTkwNyAyMS42MTUzODQ2LDE5Ljc0NDg1NiBMMjEuNjE1Mzg0NiwyNi41NDMyMDk5IFogTTIwLDE1LjgwNDI5ODEgQzE5LjQ0NDQ0MjcsMTUuODA0Mjk4MSAxOC45NzIyMjQsMTUuNjE5MzY4NyAxOC41ODMzMzMzLDE1LjI0OTUwNDYgQzE4LjE5NDQ0MjcsMTQuODc5NjQwNiAxOCwxNC40MzA1MjU1IDE4LDEzLjkwMjE0OTEgQzE4LDEzLjM3Mzc3MjYgMTguMTk0NDQyNywxMi45MjQ2NTc1IDE4LjU4MzMzMzMsMTIuNTU0NzkzNSBDMTguOTcyMjI0LDEyLjE4NDkyOTUgMTkuNDQ0NDQyNywxMiAyMCwxMiBDMjAuNTU1NTU3MywxMiAyMS4wMjc3NzYsMTIuMTg0OTI5NSAyMS40MTY2NjY3LDEyLjU1NDc5MzUgQzIxLjgwNTU1NzMsMTIuOTI0NjU3NSAyMiwxMy4zNzM3NzI2IDIyLDEzLjkwMjE0OTEgQzIyLDE0LjQzMDUyNTUgMjEuODA1NTU3MywxNC44Nzk2NDA2IDIxLjQxNjY2NjcsMTUuMjQ5NTA0NiBDMjEuMDI3Nzc2LDE1LjYxOTM2ODcgMjAuNTU1NTU3MywxNS44MDQyOTgxIDIwLDE1LjgwNDI5ODEgWiIgaWQ9IkNvbWJpbmVkLVNoYXBlIiBmaWxsPSIjRkZGRkZGIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMC4wMDAwMDAsIDIwLjAwMDAwMCkgc2NhbGUoMSwgLTEpIHRyYW5zbGF0ZSgtMjAuMDAwMDAwLCAtMjAuMDAwMDAwKSAiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==) no-repeat 0 50%;
}
.c-message--close{
position: absolute;
right: 10px;
color: #999;
text-decoration: none;
cursor: pointer;
font-size: 30px;
top: 0;
line-height: 34px;
display: block;
height: 40px;
}
.c-message--close:hover{
color:#666;
}
@keyframes messageFadeInDown {
0% {
-webkit-transform: translate3d(0,-100%,0);
transform: translate3d(0,-100%,0)
}
100% {
-webkit-transform: none;
transform: none
}
}
.c-message.messageFadeInDown {
-webkit-animation-duration: .6s;
animation-duration: .6s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
-webkit-animation-name: messageFadeInDown;
animation-name: messageFadeInDown;
}
@keyframes messageFadeOutUp {
0% {
opacity: 1
}
100% {
opacity: 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%)
}
}
.c-message.messageFadeOutUp {
-webkit-animation-duration: .6s;
animation-duration: .6s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
-webkit-animation-name: messageFadeOutUp;
animation-name: messageFadeOutUp
}
/* .c-message--tip{
text-align: center;
} */
Run code
Cut to clipboard
message.js
<script src="js/message.js"></script>
Run code
Cut to clipboard
/**
* 消息提示组件
*
* 1.调用
* 字符串类型参数: $.message('成功');
* 对象型参数:$.message({});
*
* 2.参数详解
* message:' 操作成功', //提示信息
time:'2000', //显示时间(默认:2s)
type:'success', //显示类型,包括4种:success.error,info,warning
showClose:false, //显示关闭按钮(默认:否)
autoClose:true, //是否自动关闭(默认:是)
*
* type:success,error,info,warning
*/
$.extend({
message: function(options) {
var defaults={
message:' 操作成功',
time:'2000',
type:'success',
showClose:false,
autoClose:true,
onClose:function(){}
};
if(typeof options === 'string'){
defaults.message=options;
}
if(typeof options === 'object'){
defaults=$.extend({},defaults,options);
}
//message模版
var templateClose=defaults.showClose?'<a class="c-message--close">×</a>':'';
var template='<div class="c-message messageFadeInDown">'+
'<i class=" c-message--icon c-message--'+defaults.type+'"></i>'+
templateClose+
'<div class="c-message--tip">'+defaults.message+'</div>'+
'</div>';
var _this=this;
var $body=$('body');
var $message=$(template);
var timer;
var closeFn,removeFn;
//关闭
closeFn=function(){
$message.addClass('messageFadeOutUp');
$message.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){
removeFn();
})
};
//移除
removeFn=function(){
$message.remove();
defaults.onClose(defaults);
clearTimeout(timer);
};
//移除所有
$('.c-message').remove();
$body.append($message);
//居中
$message.css({
'margin-left':'-'+$message.width()/2+'px'
})
//去除动画类
$message.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){
$message.removeClass('messageFadeInDown');
});
//点击关闭
$body.on('click','.c-message--close',function(e){
closeFn();
});
//自动关闭
if(defaults.autoClose){
timer=setTimeout(function(){
closeFn();
},defaults.time)
}
}
});
Run code
Cut to clipboard
调用方式:
$('.btn-success').on('click',function(){
$.message('成功');
})
$('.btn-danger').on('click',function(){
$.message({
message:'失败提示',
type:'error'
});
})
$('.btn-warning').on('click',function(){
$.message({
message:'警告提示',
type:'warning'
});
})
$('.btn-info').on('click',function(){
$.message({
message:'信息提醒',
type:'info'
});
})
Run code
Cut to clipboard
参数详解:
message:' 操作成功', //提示信息
time:'2000', //显示时间(默认:2s)
type:'success', //显示类型,包括4种:success.error,info,warning
showClose:false, //显示关闭按钮(默认:否)
autoClose:true, //是否自动关闭(默认:是)
Run code
Cut to clipboard
演示完整代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="https://out.img.pan.lizhenqiu.com/f4064d8eb781b350f1ba7d8ecb509352">
<link rel="stylesheet" href="https://out.img.pan.lizhenqiu.com/2800e1fd28b3bd7b7e595f3c79c14a54">
<style>
/* 非组件样式 */
.btn{
margin-right:20px;
}
.p40{
padding:40px;
}
.mt20{
margin-top:20px;
}
</style>
</head>
<body>
<div class="p40">
<p>点击调用提示</p>
<button class="btn btn-success">成功提示</button>
<button class="btn btn-danger">失败提示</button>
<button class="btn btn-warning">警告提示</button>
<button class="btn btn-info">信息提醒</button>
</div>
<div class="p40">
<p>调用方式:</p>
<pre>
$('.btn-success').on('click',function(){
$.message('成功');
})
$('.btn-danger').on('click',function(){
$.message({
message:'失败提示',
type:'error'
});
})
$('.btn-warning').on('click',function(){
$.message({
message:'警告提示',
type:'warning'
});
})
$('.btn-info').on('click',function(){
$.message({
message:'信息提醒',
type:'info'
});
})
</pre>
<p class="mt20">参数详解:</p>
<pre>
message:' 操作成功', //提示信息
time:'2000', //显示时间(默认:2s)
type:'success', //显示类型,包括4种:success.error,info,warning
showClose:false, //显示关闭按钮(默认:否)
autoClose:true, //是否自动关闭(默认:是)
</pre>
</div>
<script src="https://lizhenqiu.com/templates/default/jquery.min.js"></script>
<script src="https://out.img.pan.lizhenqiu.com/622e86b9b1eee72c2a30fe3ba54df713"></script>
<script>
$(function(){
$('.btn-success').on('click',function(){
$.message('成功');
})
$('.btn-danger').on('click',function(){
$.message({
message:'失败提示',
type:'error'
});
})
$('.btn-warning').on('click',function(){
$.message({
message:'警告提示',
type:'warning'
});
})
$('.btn-info').on('click',function(){
$.message({
message:'信息提醒',
type:'info'
});
})
})
</script>
</body>
</html>
Run code
Cut to clipboard
文章:苹果手机alert弹框对话框自定义窗口去掉域名英文标题文字 发表时间:2017-11-30, 17:17:22
#763
作者:广西南宁市
问题: 系统默认的alert弹框的title会默认显示网页域名
解决办法:
(修改弹框样式)
(function() {
window.alert = function(name) {
$(".tip").css("display", "block")
$(".tip .content").html(name)
}
})()
调用:alert(name)
在页面中添加弹框元素,自定义其样式,默认隐藏
注:alert()方法重写,不能传多余参数
(仅去掉网址)
(function(){
window.alert = function(name){
var iframe = document.createElement("IFRAME");
iframe.style.display="none";
iframe.setAttribute("src", 'data:text/plain');
document.documentElement.appendChild(iframe);
window.frames[0].window.alert(name);
iframe.parentNode.removeChild(iframe);
}
})();
alert('试一试');
Run code
Cut to clipboard
文章:苹果手机alert弹框对话框自定义窗口去掉域名英文标题文字 发表时间:2017-11-30, 17:00:16
#764
作者:广西南宁市
相邻的边框线重叠问题可以用-1px
margin-right: -1px;
border: 1px solid #d5d5d5;
Run code
Cut to clipboard
文章:仿造携程旅游常见问题FAQ选项卡倒三角 发表时间:2017-11-30, 15:03:42
#765
作者:广西南宁市
在这个社会居然可以用“低端”来形容人,把人分为三六九等。 #,广西南宁市,2017-11-27,15:15:07, 所谓平等公平自由都只能是心态上面的 #,广西南宁市,2017-11-27,15:24:53, 抢过来坐久了,可能就想不起当初为啥抢座了,即使记得也不想起来,因为不想再站着了,还有极少数想让座,但抢座中已经丧失站着的能力了。这种事,靠谱的只能是每个人自己。 #,广西南宁市,2017-11-27,15:25:34, 搞生产力,人才贵在精;搞生产关系,人才贵在多 #,广西南宁市,2017-11-27,15:26:28, 希望我以后能做的,不只是写个评论发个牢骚。 #,广西南宁市,2017-11-27,15:26:41, “低端”爬进“高端”的通道狭窄而拥挤,“高端”滑向“低端”的坑道可到处都是。 #,广西南宁市,2017-11-27,15:28:08, 温室中的花朵,闷头倔屁股的鸵鸟,任人鱼肉的乡民。 #,广西南宁市,2017-11-27,15:28:19, 一层洋二层官三层回民四层汉。 #,广西南宁市,2017-11-27,15:32:07, 他们这代人一直生活在真实与玄幻之间,没钱的时候把世界想得很玄幻,有了钱之后又把世界看得很真实。 #,广西南宁市,2017-11-27,15:32:29, 真实的生活已经很粗糙了,“虐待”二字只能体现在诗歌中。 #,广西南宁市,2017-11-28,10:17:58, Youth is not a time of life; it is a state of mind. #,广西南宁市,2017-11-29,09:50:37, 当所有人冷漠,只能乞求厄运能天然的避开,所以必然会对正常生活感恩戴德。 #,广西南宁市,2017-11-29,09:51:22, 以前是政治绑架,你不入党就是异类;后来是道德绑架,你不同意就是人品有问题;如今已经是态度绑架,你不表态就是没人性。讲真,中国人真的很喜欢鼓动别人赴死然后看笑话,比如虐童幼儿园的事情,再次暴露一些人“不表态就是冷血就是不对”的强盗逻辑。这何必呢,我可以表态可以呐喊可以切齿诅咒,但我不会逼迫别人去表态。 #,广西南宁市,2017-11-29,09:51:45, 公民和居民不一样 #,广西南宁市,2017-11-29,09:52:55,@12 , 现在所有正面和负面'新闻',都是花钱的 #,广西南宁市,2017-11-29,09:57:05, 大众是最容易被上层引导的,大众对于这些引导的认识是对的还是错的,几乎没有条件分辨,因为信息太不对称。 #,广西南宁市,2017-11-29,09:58:57, 仓廪实而知礼节,衣食足而知荣辱, #,广西南宁市,2017-11-29,11:03:16, 全世界就陈冠希的硬盘修得好,你说巧不巧 #,广西南宁市,2017-11-29,11:27:43, 我也是个俗人,你说我视金钱如粪土,视功名如浮云?实话说,没这个境界,还是要多赚一点钱,追求一点江湖地位。 #,广西南宁市,2017-11-29,11:27:55,@18 , 嘲讽技能用完了还不是该咋样咋样,没啥实际意义 #,广西南宁市,2017-11-29,11:28:24,@19 , 沉浸在自以为是的自嘲当中不能自拔,洋洋得意抚摸自己的无知. #,广西南宁市,2017-11-29,11:29:14, 中国商人的悲哀,就是不能只是商人。 #,广西南宁市,2017-11-29,15:58:47, 硬盘老是坏 和 摄像头到底有没有用是现阶段社会主义的主要矛盾。 #,广西南宁市,2017-11-29,16:16:14, 这些年,临时工没干什么好事, #,广西南宁市,2017-11-29,16:16:43, 昨天一件沸沸扬扬的事,可以被今天另一件事掩盖,而今天的事,可以被明天的手段掩盖。 #,广西南宁市,2017-11-29,16:17:45,@22 , 自从冠西的硬盘修好之后,大家都知道硬盘这个东西是不能修的。 #,广西南宁市,2017-11-29,16:20:03, 我们知道他们在撒谎 ,他们也知道我们知道他们在撒谎 ,我们也知道其实他们知道我们知道他们在撒谎 ,他们也知道我们是假装他们没在撒谎 #,广西南宁市,2017-11-29,16:20:11,@26 , 但是他们还是在撒谎 #,广西南宁市,2017-11-29,16:20:28, 天黑了,想在这里借根火柴。 #,广西南宁市,2017-11-29,16:20:37,@28 , 这句扎铁了,老心。 #,广西南宁市,2017-11-29,16:21:13, 列宁说:意识到自己的奴隶地位而与之作斗争的奴隶,是革命家。没有意识到自己的奴隶地位而过着默默无言、浑浑噩噩、忍气吞声的奴隶生活的奴隶,是十足的奴隶。对奴隶生活的各种好处津津乐道并对和善的好主人感激不尽以至垂涎欲滴的奴隶是奴才,是无耻之徒。” #,广西南宁市,2017-11-29,16:21:40,@30 , ?,当哲学成为武器 #,广西南宁市,2017-11-29,16:21:50,@30 , 省省吧,你远远没有你的对手研究马列主义透彻 #,广西南宁市,2017-11-29,16:23:26, 我曾经总在想,每次有这种大事发生时,领导人那种级别的就算再忙,总也是有零星的几分钟了解知道的,他们就真的不晓得?还是不屑于这种民间的"小打小闹"?还是说非洲同胞真的只是看到了我们的那经不起丝毫人性考验的可怜的所谓的光明。是,领导人要 应对外国,国内的小打小闹无关痛痒的就睁一只眼闭一只眼,毕竟内部矛盾内部消化嘛,消化到最后就是各种硬盘坏了,临时工,……天太黑了 #,广西南宁市,2017-11-29,16:23:42, 人家硬盘可以坏,为什么我的不可以坏呢?人家都是临时工干坏事,我的临时工为什么不能干坏事呢? #,广西南宁市,2017-11-29,16:24:48, 让雾霾下的智商恢复正常。 #,广西南宁市,2017-11-29,16:25:36, 塔西佗陷阱, 得名于古罗马时代的历史学家塔西佗。这一概念最初来自塔西佗所著的《塔西佗历史》,是塔西佗在评价一位罗马皇帝时所说的话:“一旦皇帝成了人们憎恨的对象,他做的好事和坏事就同样会引起人们对他的厌恶。”之后被中国学者引申成为一种现社会现象,指当政府部门或某一组织失去公信力时,无论说真话还是假话,做好事还是坏事,都会被认为是说假话、做坏事。 #,广西南宁市,2017-11-29,16:26:02,@22 , 相关部门:我也很无辜啊,这理由我们可是第一次用,凭什么就怼我们了… #,广西南宁市,2017-11-29,16:27:46, 群众没有真正渴求过真理,面对那些不合口味的证据,他们会充耳不闻…凡是能向他们提供幻觉的,都可以很容易地成为他们的主人;凡是让他们幻灭的,都会成为他们的牺牲品。
——Gustave Le Bon 乌合之众 #,广西南宁市,2017-11-30,14:27:01, 大概是离钱近的地方,更容易赚钱。 #,广西南宁市,2017-11-30,14:27:56,@39 , 钱又是一个容易生是非的地方。
——Gustave Le Bon 乌合之众
文章:北京终于折叠 发表时间:2017-11-27, 15:13:51
#768
作者:广西南宁市
潮汕商会和江浙商会自成一派,其他商会很难跟他们匹敌,所以他们联合起来?马云是不是江浙商会的,我木知,但马云总部在杭州,说他不是很难说得通,小马哥在香港的家都是李嘉诚帮忙搞定的,离李嘉诚的房子非常近,说小马哥不是潮汕商会的我也不信, #,广西南宁市,2017-11-29,11:30:30, 东哥和雷哥对公司有绝对话语权,两马么...
文章:不知妻美二手东,悔创阿里杰克马,一无所有王健林,普通家庭马化腾,不熟运作假药停 发表时间:2017-11-29, 11:30:15
#769
作者:广西南宁市
迅雷的下载业务太多考虑如何赚钱。甚至为了追求利润损害下载体验,非会员的用户下载速度很一般,甚至限速。这不是互联网公司应有的做法,因为属于产品的核心的竞争力,应该作为一个基础服务提供给用户,然后在其他的地方赚得到钱。 #,广西南宁市,2017-11-29,10:22:53, 基因问题,迅雷更擅长做工具,而游戏是强运营。 #,广西南宁市,2017-11-29,10:27:49, CEO很多时候,应该关注大方向,不要过度抠细节。CEO需要关注的东西太多了。一个公司一般都会有几个甚至更多项目,如果他深入去参与这个项目的话,变成整个项目的阻碍,因为项目的所有人都在等着CEO做决定。最后,员工不敢负责,也不愿意主动承担,因为反正老板有他的想法和主意。 #,广西南宁市,2017-11-29,10:28:32, “抠抠搜搜”。放不开,凡事都精打细算,过于计较 #,广西南宁市,2017-11-29,10:28:49, 沉迷技术。由于创始人太沉迷于技术,而忽略了营销、公关、传播。在移动互联网时代,包括一向低调的马化腾、雷军都因为公司业务需要,纷纷站出来为公司代言,借助微博等社交媒体发声,但是从没有见过邹胜龙程浩雷为自己的产品代言。 #,广西南宁市,2017-11-29,10:29:46, 在互联网界,马化腾对产品的极致追求事出了名的。马化腾会自己会去体验很多小细节的功能,每个公司永远是老板发现最多的bug,但马化腾只把握在大的方向,提出需要修改的细节,但不会干预具体执行,更不会出现具体功能等着他来决定的局面。 #,广西南宁市,2017-11-29,10:30:29, 这么一个抠门、沉迷技术且过度注重细枝末节的老板,最终成为迅雷发展的天花板,并且竟然到2017年才卸任。 #,广西南宁市,2017-11-29,10:33:03, 但是,修复一座将倾的大厦,并不会比平地盖楼更简单,甚至要更费神。 #,广西南宁市,2017-11-29,10:41:38, 这让人想到了历史上著名的万历十五年。1587年,万历皇帝接管大明王朝,将张居正的势力清算完毕,满心抱负,准备励精图治,大干一番,重振大明王朝。但是万万没想到的是,抵制他的却是来自统治集团内部的人,一群道德婊,失去了斗志的文官们,对皇帝提出了各种要求,背地里却又个个是贪赃枉法、碌碌无为。尽管有武将戚继光,文官海瑞,都无力挽回明朝大厦倾覆。万历一气之下,只能消极抵抗,不理朝政。 #,广西南宁市,2017-11-29,10:41:49, 注定不甘心当第二个万历。 #,广西南宁市,2017-11-29,10:43:18,@8 , 感觉很多的事情好像没有说,岳飞直捣黄龙府,结果还是被12道金牌喊了回去。秦桧背了千年的锅,一门忠良……。 #,广西南宁市,2017-11-29,10:54:47, 加把锁,共享一切 #,广西南宁市,2017-11-29,10:54:59,@11 , 资本不创造价值,劳动创造价值,但资本启动了劳动。 #,广西南宁市,2017-11-29,10:57:31, 从O2O到共享,形式再怎么变化,都不过是经济活动组织形式的变化,成功的模式,根本是降低成本、提高效率、提升客户体验、加快资本周转率和加大利润时效,所以任何的模式手段,烧钱也罢,护城河也好,都不过是给投资人看的华丽外衣,关键是骨子里赚钱的逻辑,到底是否真的存在,资本,永远是那个喝血吃肉的资本,与狼共舞,不要伤了自己。 #,广西南宁市,2017-11-29,10:57:44,@13 , 资本吃肉喝血都正常,人家给钱总要图点什么。创业者想清楚自己的资源、能力和机会,最重要 #,广西南宁市,2017-11-29,10:59:25, 共享本质是弱化拥有权,强调使用权,无论是资源还是技能,都应该发挥它更广阔的价值,只是只有公司到达一定规模之后边际成本才会不断趋近于零,从而确保最少的劳动力挣到最多的钱的同时用户也能享受到最好的服务,这也是共享平台最大的吸引力。
文章:不知妻美二手东,悔创阿里杰克马,一无所有王健林,普通家庭马化腾,不熟运作假药停 发表时间:2017-11-29, 10:19:24
#770
作者:广西南宁市
让Chrome支持小于12px 的文字
针对谷歌浏览器内核,加webkit前缀,用transform:scale()这个属性进行缩放
#,广西南宁市,2017-11-28,16:19:02,
修改chrome记住密码后自动填充表单的黄色背景
#,广西南宁市,2017-11-28,16:19:52,
最简单的去重方式
1、es6的new Set()方式
或者直接 #,广西南宁市,2017-11-28,16:20:21,@2 ,
2、es5的Array filter()
#,广西南宁市,2017-11-28,16:20:49,
数组对象全等比较
#,广西南宁市,2017-11-28,16:21:12,@4 , 因为[1,2,3]和[1,2,3]是两个不同的数组,只是它们的元素碰巧相同。因此,不能简单的通过===来判断。 #,广西南宁市,2017-11-28,16:22:05,
经典面试题目
把 var 改成 let #,广西南宁市,2017-11-28,16:22:31,
Math.min()比Math.max()大
#,广西南宁市,2017-11-28,16:22:58,
点击文字,文字后面radio选中效果
#,广西南宁市,2017-11-28,16:24:03,
网站中,图片文件(jpg,png,gif),如何点击下载?而非点击预览?
我们点击下载按钮,只会预览“baidu.jpg”这张图片,并不会出现下载框,另存为那种?那么我们如何做呢?
我们只需要如下写:
针对谷歌浏览器内核,加webkit前缀,用transform:scale()这个属性进行缩放
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{
font-size: 12px;
display: inline-block;
-webkit-transform:scale(0.8);
}
</style>
</head>
<body>
<span>测试10px</span>
</body>
</html>
Run code
Cut to clipboard
修改chrome记住密码后自动填充表单的黄色背景
/*通过input : -webkit-autofill来进行修改!*/
input:-webkit-autofill {
background-color: #FAFFBD;
background-image: none;
color: #000;
}
Run code
Cut to clipboard
最简单的去重方式
1、es6的new Set()方式
let array=[0,3,4,5,3,4,7,8,2,2,5,4,6,7,8,0,2,0,90];
[...new Set(array)]
Run code
Cut to clipboard
[...new Set([1,3,4,5,1,2,3,3,4,8,90,3,0,5,4,0])]
Run code
Cut to clipboard
2、es5的Array filter()
[1,3,4,5,1,2,3,3,4,8,90,3,0,5,4,0].filter(function(elem,index,Array){
return index === Array.indexOf(elem);
})
Run code
Cut to clipboard
数组对象全等比较
// 这些可以
'abc' === 'abc' // true
1 === 1 // true
// 然而这些不行
[1,2,3] === [1,2,3] // false
{a: 1} === {a: 1} // false
{} === {} // false
Run code
Cut to clipboard
经典面试题目
const Greeters = []
for (var i = 0 ; i < 10 ; i++) {
Greeters.push(function () { return console.log(i) })
}
Greeters[0]() // 10
Greeters[1]() // 10
Greeters[2]() // 10
Run code
Cut to clipboard
const Greeters = []
for (let i = 0 ; i < 10 ; i++) {
Greeters.push(function () { return console.log(i) })
}
Greeters[0]() // 0
Greeters[1]() // 1
Greeters[2]() // 2
Run code
Cut to clipboard
Math.min()比Math.max()大
Math.min() < Math.max() // false
Math.min() > Math.max() // true
//因为Math.min() 返回 Infinity, 而 Math.max()返回 -Infinity。
Run code
Cut to clipboard
点击文字,文字后面radio选中效果
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
Run code
Cut to clipboard
网站中,图片文件(jpg,png,gif),如何点击下载?而非点击预览?
我们点击下载按钮,只会预览“baidu.jpg”这张图片,并不会出现下载框,另存为那种?那么我们如何做呢?
我们只需要如下写:
<a href="https://www.baidu.com/favicon.ico" download >下载</a>
<!-- 我们还可以指定文件名称,如下写法: -->
<a href="tupiandizhi.jpg" download="baidu" ></a>
Run code
Cut to clipboard
文章:CSS前端常用22个效果总结 发表时间:2017-11-28, 16:18:39
#772
作者:广西南宁市
换行(\n或\r\n和br)
浏览器识别不了\n或\r\n,这两个换行符是文本换行符,文本文件有效;
如果需要将结果输出到浏览器或打印到显示器,代码中使用br;
如果只是在源代码中换行,则使用\n或\r\n
hello
world!
helloworld!
分析:浏览器识别不了\n或\r\n,这两个换行符是文本换行符,文本文件有效;在网页中查看HTML源代码可以发现代码b成功实现了换行
总结:如果需要将结果输出到浏览器或打印到显示器,代码中使用</br>;如果只是在源代码中换行,则使用\n或\r\n #,广西南宁市,2017-11-28,09:34:41,
Windows、Unix、Mac不同操作系统的换行问题-剖析回车符\r和换行符\n
一、概念:
换行符‘\n’和回车符‘\r’
所以我们平时编写文件的回车符应该确切来说叫做回车换行符
二、应用:
三、影响:
(1)一个直接后果是,Unix/Mac系统下的文件在Windows里打开的话,所有文字会变成一行;
(2)而Windows里的文件在Unix/Mac下打开的话,在每行的结尾可能会多出一个^M符号。
(3)Linux保存的文件在windows上用记事本看的话会出现黑点。
四、可以相互转换:
在linux下,命令unix2dos 是把linux文件格式转换成windows文件格式,命令dos2unix 是把windows格式转换成linux文件格式。
在不同平台间使用FTP软件传送文件时, 在ascii文本模式传输模式下, 一些FTP客户端程序会自动对换行格式进行转换. 经过这种传输的文件字节数可能会发生变化.
如果你不想ftp修改原文件, 可以使用bin模式(二进制模式)传输文本。
一个程序在windows上运行就生成CR/LF换行格式的文本文件,而在Linux上运行就生成LF格式换行的文本文件。 #,广西南宁市,2017-11-28,09:36:34, 参考:http://vim.wikia.com/wiki/File_format #,广西南宁市,2017-11-28,09:37:02,
浏览器识别不了\n或\r\n,这两个换行符是文本换行符,文本文件有效;
如果需要将结果输出到浏览器或打印到显示器,代码中使用br;
如果只是在源代码中换行,则使用\n或\r\n
<?php
echo'hello</br>';
echo'world!';
?>
Run code
Cut to clipboard
world!
<?php
echo'hello\n';//unix系统使用\n;windows系统下\r\n
echo'world!';
?>
Run code
Cut to clipboard
分析:浏览器识别不了\n或\r\n,这两个换行符是文本换行符,文本文件有效;在网页中查看HTML源代码可以发现代码b成功实现了换行
总结:如果需要将结果输出到浏览器或打印到显示器,代码中使用</br>;如果只是在源代码中换行,则使用\n或\r\n
Windows、Unix、Mac不同操作系统的换行问题-剖析回车符\r和换行符\n
一、概念:
换行符‘\n’和回车符‘\r’
(1)换行符就是另起一行 --- '\n' 10 换行(newline)
(2)回车符就是回到一行的开头 --- '\r' 13 回车(return)
Run code
Cut to clipboard
所以我们平时编写文件的回车符应该确切来说叫做回车换行符
二、应用:
(1)在微软的MS-DOS和Windows中,使用“回车CR('\r')”和“换行LF('\n')”两个字符作为换行符;
(2)Windows系统里面,每行结尾是 回车+换行(CR+LF),即“\r\n”;
(3)Unix系统里,每行结尾只有 换行CR,即“\n”;
(4)Mac系统里,每行结尾是 回车CR 即'\r'。
Run code
Cut to clipboard
三、影响:
(1)一个直接后果是,Unix/Mac系统下的文件在Windows里打开的话,所有文字会变成一行;
(2)而Windows里的文件在Unix/Mac下打开的话,在每行的结尾可能会多出一个^M符号。
(3)Linux保存的文件在windows上用记事本看的话会出现黑点。
四、可以相互转换:
在linux下,命令unix2dos 是把linux文件格式转换成windows文件格式,命令dos2unix 是把windows格式转换成linux文件格式。
在不同平台间使用FTP软件传送文件时, 在ascii文本模式传输模式下, 一些FTP客户端程序会自动对换行格式进行转换. 经过这种传输的文件字节数可能会发生变化.
如果你不想ftp修改原文件, 可以使用bin模式(二进制模式)传输文本。
一个程序在windows上运行就生成CR/LF换行格式的文本文件,而在Linux上运行就生成LF格式换行的文本文件。
“Unix系统里,每行结尾只有 换行CR,即“\n””
应该修改为:
“Linux/Unix系统里,每行结尾只有 换行LF,即“\n””。
另外,其实很多人不知道 CR 和 LF 是什么的缩写:
CR: 回车(Carriage Return) \r
LF: 换行(Line Feed) \n
Run code
Cut to clipboard
文章:PHP分割txt纯文本小说格式章节 发表时间:2017-11-28, 09:32:38
#773
作者:广西南宁市
要不
$dsn = "HOST is {$conn['host']}";
要不
$dsn = "HOST is $conn[host]";
在双引号里面访问数组数据可以不加单引号。
$dsn = "HOST is {$conn['host']}";
要不
$dsn = "HOST is $conn[host]";
在双引号里面访问数组数据可以不加单引号。
文章:<?= 和<?php 的区别 发表时间:2017-11-28, 09:28:28
#774
作者:广西南宁市
PHP 双引号里用单引号会报错报错 #,广西南宁市,2017-11-28,09:15:58, 数组引用, 有无单引号$conn['host'] 和 $conn[host] 效率会差多少? #,广西南宁市,2017-11-28,09:17:08, 手册里写有
#,广西南宁市,2017-11-28,09:17:53,
- 用逗号连接,不拼接字符串,也不用双引号解析变量。省资源。 #,广西南宁市,2017-11-28,09:21:05, 用.是先拼接在echo,,逗号个数代表echo的调用次数(可以这么理解暂时)php编程中echo用逗号和用点号连接的区别 #,广西南宁市,2017-11-28,09:21:39, “点号”是一个字符串连接符,用来拼接字符串,把两个或多个字符串链接起来
“逗号”并不是一个连接符,他只是在使用 echo 输出一系列的变量、字符串、数字等等内容时使用,或者说通过 echo 输出多个东西时,用“逗号”分割开。
所以,“逗号”和“点号”没有什么联系,也没有什么可对比的。
省去了字符串拼接的步骤,理论上在 echo 的时候用“逗号”性能会高一点。 #,广西南宁市,2017-11-28,09:22:39,@1 , $conn['host'] 和 $conn[host]根本不是同一个东西
不带引号,host 表示一个常量,PHP 会先去找这个常量,如果有就用其值作为键值,如果没有就把 host 看作字符串直接作为键值,并报出一个 Notice
`Notice: Use of undefined constant host - assumed 'host'....` #,广西南宁市,2017-11-28,09:22:51, 用单引号不会出错,但是在双引号里使用下标引用数组元素必须加{}来区分,不然会产生解析出错 #,广西南宁市,2017-11-28,09:23:20, 这涉及到的是 PHP 中的变量解析 参见变量解析,复杂语法
$conn['host'] = '127';
$dsn = "HOST is $conn['host']";
echo $dsn;
Run code
Cut to clipboard
Parse error: syntax error, unexpected '' (T_ENCAPSED_AND_WHITESPACE), expecting identifier (T_STRING) or variable (T_VARIABLE) or number (T_NUM_STRING)
Run code
Cut to clipboard
<?php
$conn['host'] = '127';
$t0 = microtime(1);
for ($i=0; $i < 9999999; $i++) {
$dsn = "HOST is {$conn['host']}";
}
$t1 = microtime(1);
echo ($t1 - $t0); //1.0226299762726 秒
echo "\n";
for ($i=0; $i < 9999999; $i++) {
$dsn = "HOST is $conn[host]";
}
$t2 = microtime(1);
echo ($t2 - $t1); //1.0196290016174 秒
Run code
Cut to clipboard
// With one exception: braces surrounding arrays within strings allows constants
// to be interpreted
print "Hello {$arr[fruit]}"; // Hello carrot
print "Hello {$arr['fruit']}"; // Hello apple
// This will not work, and will result in a parse error, such as:
// Parse error: parse error, expecting T_STRING' or T_VARIABLE' or T_NUM_STRING'
// This of course applies to using superglobals in strings as well
print "Hello $arr['fruit']";
print "Hello $_GET['foo']";
Run code
Cut to clipboard
echo 'HOST is ', $conn['host'];
Run code
Cut to clipboard
- 用逗号连接,不拼接字符串,也不用双引号解析变量。省资源。
echo (int)'abc1'; //输出0
echo (int)'1abc'; //输出1
echo (int)'2abc'; //输出2
echo (int)'22abc'; //输出22
Run code
Cut to clipboard
“逗号”并不是一个连接符,他只是在使用 echo 输出一系列的变量、字符串、数字等等内容时使用,或者说通过 echo 输出多个东西时,用“逗号”分割开。
所以,“逗号”和“点号”没有什么联系,也没有什么可对比的。
echo 'a' . 'b'. 'c'; 是将三个字符串拼接之后输出
echo 'a', 'b', 'c'; 是依次输出三个字符串
Run code
Cut to clipboard
省去了字符串拼接的步骤,理论上在 echo 的时候用“逗号”性能会高一点。
不带引号,host 表示一个常量,PHP 会先去找这个常量,如果有就用其值作为键值,如果没有就把 host 看作字符串直接作为键值,并报出一个 Notice
`Notice: Use of undefined constant host - assumed 'host'....`
文章:<?= 和<?php 的区别 发表时间:2017-11-28, 09:14:41
#775
作者:广西南宁市
远程桌面长时间不用会自动断开连接,设置可以一直保持连接状态
#,广西南宁市,2017-11-27,14:30:30, 也有可能是屏幕保护。。。
【 组策略 】开始-->运行-->gpedit.msc->计算机配置->管理模板->Windows组件->终端服务->会话
为断开的会话设置时间限制 已启用
到达时间限制时终止会话 已启用
为活动终端服务会话设置时间限制 未被配置
为活动但空闲的终端服务会话设置时间限制 未被配置
允许仅从原始客户端重新连接 未被配置
【 终端服务配置 】开始-->运行-->tscc.msc 连接-->RDP-Tcp右键属性-->会话
把这里面的替代用户设置的设置都改为从不,并且把从不勾选。
【 本地安全策略 】开始-->运行-->secpol.msc 本地安全策略-->本地策略-->安全选项:
Microsoft 网络服务器: 当登录时间用完时自动注销用户 已启用
Microsoft 网络服务器: 在挂起会话之前所需的空闲时间 0
Microsoft 网络客户端: 数字签名的通信(若服务器同意) 已启用
Microsoft 网络服务器: 数字签名的通信(若客户端同意) 已禁用
Microsoft 网络服务器: 数字签名的通信(总是) 已禁用
Microsoft 网络客户端: 数字签名的通信(总是) 已禁用
Microsoft 网络客户端: 发送未加密的密码到第三方 SMB 服务器 已禁用
Run code
Cut to clipboard
文章:阿里云服务器FTP链接目录错误 发表时间:2017-11-27, 14:25:54
#776
作者:广西南宁市
命好才是核心竞争力 #,广西南宁市,2017-11-26,00:38:20, 这体现了当前制度的优越,有钱没钱都看命,人人平等。 #,广西南宁市,2017-11-26,00:40:23, 总有命运的手够不到的地方可以努力
文章:程序员编程常用网页工具集[游戏] 发表时间:2017-11-26, 00:37:16
#777
作者:广西南宁市
error_reporting(E_ALL); //E_ALL
function cache_shutdown_error() {
$_error = error_get_last();
if ($_error && in_array($_error['type'], array(1, 4, 16, 64, 256, 4096, E_ALL))) {
echo '<font color=red>你的代码出错了:</font></br>';
echo '致命错误:' . $_error['message'] . '</br>';
echo '文件:' . $_error['file'] . '</br>';
echo '在第' . $_error['line'] . '行</br>';
}
}
register_shutdown_function("cache_shutdown_error");
Run code
Cut to clipboard
程序发生致命错误的时候页面空白,想获取错误信息也不难!
可以利用两个函数:
error_get_last() 获取最后一次发生错误信息
register_shutdown_function()在脚本停止执行时注册一个回调函数
error_get_last()返回值结构:
Array
(
[type] => 8
[message] => Undefined variable: http://www.111cn.net
[file] => C:WWWindex.php
[line] => 2
)
Run code
Cut to clipboard
文章:PHP error_reporting() 错误控制函数功能详解 发表时间:2017-11-25, 17:53:56
#779
展开↯
<!DOCTYPE html> <html> <head> <title>网站正在建设中... </title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="format-detection" content="telephone=no" /> </head> <body> 网站正在建设中... </body> </html>
↑↓←→