aili1947

CSS3表单input输入框美化

HTML:

DOCTYPE html>
<html lang="zh" class="no-js">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>表单input输入框title>
<style>
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
    display: block;
}

audio, canvas, video {
    display: inline-block;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

[hidden] {
    display: none;
}

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
}

a:focus {
    outline: thin dotted;
}

a:active, a:hover {
    outline: 0;
}

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

abbr[title] {
    border-bottom: 1px dotted;
}

b, strong {
    font-weight: bold;
}

dfn {
    font-style: italic;
}

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

mark {
    background: #ff0;
    color: #000;
}

code, kbd, pre, samp {
    font-family: monospace, serif;
    font-size: 1em;
}

pre {
    white-space: pre-wrap;
}

q {
    quotes: "\201C" "\201D" "\2018" "\2019";
}

small {
    font-size: 80%;
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

img {
    border: 0;
}

svg:not(:root) {
    overflow: hidden;
}

figure {
    margin: 0;
}

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

legend {
    border: 0;
    padding: 0;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: 100%;
    margin: 0;
}

button, input {
    line-height: normal;
}

button, select {
    text-transform: none;
}

button, html input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}

button[disabled], html input[disabled] {
    cursor: default;
}

input[type="checkbox"], input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

input[type="search"] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

textarea {
    overflow: auto;
    vertical-align: top;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

@import url(http://fonts.useso.com/css?family=Raleway:200,500,700,800);

@font-face {
    font-weight: normal;
    font-style: normal;
    font-family: 'codropsicons';
    src: url('../fonts/codropsicons/codropsicons.eot');
    src: url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
    url('../fonts/codropsicons/codropsicons.woff') format('woff'),
    url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
    url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
}

*, *:after, *:before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.clearfix:before, .clearfix:after {
    content: '';
    display: table;
}

.clearfix:after {
    clear: both;
}

body {
    background: #f9f7f6;
    color: #404d5b;
    font-weight: 500;
    font-size: 1.05em;
    font-family: 'Raleway', Arial, sans-serif;
}

a {
    color: #2fa0ec;
    text-decoration: none;
    outline: none;
}

a:hover, a:focus {
    color: #74777b;
}

.container {
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
}

.content {
    font-size: 150%;
    padding: 3em 0;
}

.content h2 {
    margin: 0 0 2em;
    opacity: 0.1;
}

.content p {
    margin: 1em 0;
    padding: 5em 0 0 0;
    font-size: 0.65em;
}

.bgcolor-1 {
    background: #f0efee;
}

.bgcolor-2 {
    background: #f9f9f9;
}

.bgcolor-3 {
    background: #e8e8e8;
}

.bgcolor-4 {
    background: #2f3238;
    color: #fff;
}

.bgcolor-5 {
    background: #df6659;
    color: #521e18;
}

.bgcolor-6 {
    background: #2fa8ec;
}

.bgcolor-7 {
    background: #d0d6d6;
}

.bgcolor-8 {
    background: #3d4444;
    color: #fff;
}

body .nomargin-bottom {
    margin-bottom: 0;
}

/* Header */
.codrops-header {
    padding: 3em 190px 4em;
    letter-spacing: -1px;
}

.codrops-header h1 {
    font-weight: 800;
    font-size: 4em;
    line-height: 1;
    margin-bottom: 0;
}

.codrops-header h1 span {
    display: block;
    font-size: 50%;
    font-weight: 400;
    padding: 0.325em 0 0.5em 0;
    color: #c3c8cd;
}

/* Top Navigation Style */
.codrops-links {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    font-size: 1.25em;
    text-align: center;
}

.codrops-links::after {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -1px;
    width: 2px;
    height: 100%;
    background: #dbdbdb;
    content: '';
    -webkit-transform: rotate3d(0, 0, 1, 22.5deg);
    transform: rotate3d(0, 0, 1, 22.5deg);
}

.codrops-icon {
    display: inline-block;
    margin: 0.5em;
    padding: 0em 0;
    width: 1.5em;
    text-decoration: none;
}

.codrops-icon span {
    display: none;
}

.codrops-icon:before {
    margin: 0 5px;
    text-transform: none;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    font-family: 'codropsicons';
    line-height: 1;
    speak: none;
    -webkit-font-smoothing: antialiased;
}

.codrops-icon--drop:before {
    content: "\e001";
}

.codrops-icon--prev:before {
    content: "\e004";
}

/* Related demos */
.content--related {
    text-align: center;
    color: #D8DADB;
    font-weight: bold;
}

.media-item {
    display: inline-block;
    padding: 1em;
    vertical-align: top;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
}

.media-item__img {
    opacity: 0.8;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

.media-item:hover .media-item__img,
.media-item:focus .media-item__img {
    opacity: 1;
}

.media-item__title {
    font-size: 0.75em;
    margin: 0;
    padding: 0.5em;
}

@media screen and (max-width: 50em) {
    .codrops-header {
        padding: 3em 10% 4em;
    }
}

@media screen and (max-width: 40em) {
    .codrops-header h1 {
        font-size: 2.8em;
    }
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
    display: block;
}

audio, canvas, video {
    display: inline-block;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

[hidden] {
    display: none;
}

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
}

a:focus {
    outline: thin dotted;
}

a:active, a:hover {
    outline: 0;
}

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

abbr[title] {
    border-bottom: 1px dotted;
}

b, strong {
    font-weight: bold;
}

dfn {
    font-style: italic;
}

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

mark {
    background: #ff0;
    color: #000;
}

code, kbd, pre, samp {
    font-family: monospace, serif;
    font-size: 1em;
}

pre {
    white-space: pre-wrap;
}

q {
    quotes: "\201C" "\201D" "\2018" "\2019";
}

small {
    font-size: 80%;
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

img {
    border: 0;
}

svg:not(:root) {
    overflow: hidden;
}

figure {
    margin: 0;
}

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

legend {
    border: 0;
    padding: 0;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: 100%;
    margin: 0;
}

button, input {
    line-height: normal;
}

button, select {
    text-transform: none;
}

button, html input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}

button[disabled], html input[disabled] {
    cursor: default;
}

input[type="checkbox"], input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

input[type="search"] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

textarea {
    overflow: auto;
    vertical-align: top;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}
style>

head>
<body>
<div class="container">
<section class="content bgcolor-1">
    <h2 class="nomargin-bottom">Harukih2>
                <span class="input input--haruki">
                    <input class="input__field input__field--haruki" type="text" id="input-1"/>
                    <label class="input__label input__label--haruki" for="input-1">
                        <span class="input__label-content input__label-content--haruki">First Namespan>
                    label>
                span>
                <span class="input input--haruki">
                    <input class="input__field input__field--haruki" type="text" id="input-2"/>
                    <label class="input__label input__label--haruki" for="input-2">
                        <span class="input__label-content input__label-content--haruki">Last Namespan>
                    label>
                span>
                <span class="input input--haruki">
                    <input class="input__field input__field--haruki" type="text" id="input-3"/>
                    <label class="input__label input__label--haruki" for="input-3">
                        <span class="input__label-content input__label-content--haruki">Emailspan>
                    label>
                span>
section>
<section class="content">
    <h2>Hoshih2>
                <span class="input input--hoshi">
                    <input class="input__field input__field--hoshi" type="text" id="input-4"/>
                    <label class="input__label input__label--hoshi input__label--hoshi-color-1" for="input-4">
                        <span class="input__label-content input__label-content--hoshi">Namespan>
                    label>
                span>
                <span class="input input--hoshi">
                    <input class="input__field input__field--hoshi" type="text" id="input-5"/>
                    <label class="input__label input__label--hoshi input__label--hoshi-color-2" for="input-5">
                        <span class="input__label-content input__label-content--hoshi">Streetspan>
                    label>
                span>
                <span class="input input--hoshi">
                    <input class="input__field input__field--hoshi" type="text" id="input-6"/>
                    <label class="input__label input__label--hoshi input__label--hoshi-color-3" for="input-6">
                        <span class="input__label-content input__label-content--hoshi">Townspan>
                    label>
                span>

    <p>Inspired by Andrej Radisic's <a href="https://dribbble.com/shots/1785176-Jawbreaker-input-field">Jawbreaker input
        fielda>p>
section>
<section class="content bgcolor-4">
    <h2>Kuroh2>
                <span class="input input--kuro">
                    <input class="input__field input__field--kuro" type="text" id="input-7"/>
                    <label class="input__label input__label--kuro" for="input-7">
                        <span class="input__label-content input__label-content--kuro">Usernamespan>
                    label>
                span>
                <span class="input input--kuro">
                    <input class="input__field input__field--kuro" type="text" id="input-8"/>
                    <label class="input__label input__label--kuro" for="input-8">
                        <span class="input__label-content input__label-content--kuro">Websitespan>
                    label>
                span>
                <span class="input input--kuro">
                    <input class="input__field input__field--kuro" type="text" id="input-9"/>
                    <label class="input__label input__label--kuro" for="input-9">
                        <span class="input__label-content input__label-content--kuro">Invitation Codespan>
                    label>
                span>
section>
<section class="content bgcolor-7">
    <h2>Jiroh2>
                <span class="input input--jiro">
                    <input class="input__field input__field--jiro" type="text" id="input-10"/>
                    <label class="input__label input__label--jiro" for="input-10">
                        <span class="input__label-content input__label-content--jiro">Cat's Namespan>
                    label>
                span>
                <span class="input input--jiro">
                    <input class="input__field input__field--jiro" type="text" id="input-11"/>
                    <label class="input__label input__label--jiro" for="input-11">
                        <span class="input__label-content input__label-content--jiro">Dog's Namespan>
                    label>
                span>
                <span class="input input--jiro">
                    <input class="input__field input__field--jiro" type="text" id="input-12"/>
                    <label class="input__label input__label--jiro" for="input-12">
                        <span class="input__label-content input__label-content--jiro">Hamster's Namespan>
                    label>
                span>
section>
<section class="content">
    <h2>Minoruh2>
                <span class="input input--minoru">
                    <input class="input__field input__field--minoru" type="text" id="input-13"/>
                    <label class="input__label input__label--minoru" for="input-13">
                        <span class="input__label-content input__label-content--minoru">First Namespan>
                    label>
                span>
                <span class="input input--minoru">
                    <input class="input__field input__field--minoru" type="text" id="input-14"/>
                    <label class="input__label input__label--minoru" for="input-14">
                        <span class="input__label-content input__label-content--minoru">Middle Namespan>
                    label>
                span>
                <span class="input input--minoru">
                    <input class="input__field input__field--minoru" type="text" id="input-15"/>
                    <label class="input__label input__label--minoru" for="input-15">
                        <span class="input__label-content input__label-content--minoru">Last Namespan>
                    label>
                span>
section>
<section class="content bgcolor-5">
    <h2>Yokoh2>
                <span class="input input--minoru">
                    <input class="input__field input__field--yoko" type="text" id="input-16"/>
                    <label class="input__label input__label--yoko" for="input-16">
                        <span class="input__label-content input__label-content--yoko">Streetspan>
                    label>
                span>
                <span class="input input--minoru">
                    <input class="input__field input__field--yoko" type="text" id="input-17"/>
                    <label class="input__label input__label--yoko" for="input-17">
                        <span class="input__label-content input__label-content--yoko">Cityspan>
                    label>
                span>
                <span class="input input--minoru">
                    <input class="input__field input__field--yoko" type="text" id="input-18"/>
                    <label class="input__label input__label--yoko" for="input-18">
                        <span class="input__label-content input__label-content--yoko">Regionspan>
                    label>
                span>
section>
<section class="content">
    <h2>Hideoh2>
                <span class="input input--hideo">
                    <input class="input__field input__field--hideo" type="text" id="input-41"/>
                    <label class="input__label input__label--hideo" for="input-41">
                        <i class="fa fa-fw fa-user icon icon--hideo">i>
                        <span class="input__label-content input__label-content--hideo">Usernamespan>
                    label>
                span>
                <span class="input input--hideo">
                    <input class="input__field input__field--hideo" type="text" id="input-42"/>
                    <label class="input__label input__label--hideo" for="input-42">
                        <i class="fa fa-fw fa-envelope icon icon--hideo">i>
                        <span class="input__label-content input__label-content--hideo">Emailspan>
                    label>
                span>
                <span class="input input--hideo">
                    <input class="input__field input__field--hideo" type="text" id="input-43"/>
                    <label class="input__label input__label--hideo" for="input-43">
                        <i class="fa fa-fw fa-lock icon icon--hideo">i>
                        <span class="input__label-content input__label-content--hideo">Passwordspan>
                    label>
                span>
section>
<section class="content bgcolor-3">
    <h2>Kyoh2>
                <span class="input input--kyo">
                    <input class="input__field input__field--kyo" type="text" id="input-19"/>
                    <label class="input__label input__label--kyo" for="input-19">
                        <span class="input__label-content input__label-content--kyo">What's your email?span>
                    label>
                span>
section>
<section class="content bgcolor-4">
    <h2>Akirah2>
                <span class="input input--akira">
                    <input class="input__field input__field--akira" type="text" id="input-22"/>
                    <label class="input__label input__label--akira" for="input-22">
                        <span class="input__label-content input__label-content--akira">First Namespan>
                    label>
                span>
                <span class="input input--akira">
                    <input class="input__field input__field--akira" type="text" id="input-23"/>
                    <label class="input__label input__label--akira" for="input-23">
                        <span class="input__label-content input__label-content--akira">Last Namespan>
                    label>
                span>
                <span class="input input--akira">
                    <input class="input__field input__field--akira" type="text" id="input-24"/>
                    <label class="input__label input__label--akira" for="input-24">
                        <span class="input__label-content input__label-content--akira">Maiden Namespan>
                    label>
                span>
section>
<section class="content">
    <h2>Ichiroh2>
                <span class="input input--ichiro">
                    <input class="input__field input__field--ichiro" type="text" id="input-25"/>
                    <label class="input__label input__label--ichiro" for="input-25">
                        <span class="input__label-content input__label-content--ichiro">Bird's Colorspan>
                    label>
                span>
                <span class="input input--ichiro">
                    <input class="input__field input__field--ichiro" type="text" id="input-26"/>
                    <label class="input__label input__label--ichiro" for="input-26">
                        <span class="input__label-content input__label-content--ichiro">Wing Spanspan>
                    label>
                span>
                <span class="input input--ichiro">
                    <input class="input__field input__field--ichiro" type="text" id="input-27"/>
                    <label class="input__label input__label--ichiro" for="input-27">
                        <span class="input__label-content input__label-content--ichiro">Beak Lengthspan>
                    label>
                span>
section>
<section class="content bgcolor-6">
    <h2>Juroh2>
                <span class="input input--juro">
                    <input class="input__field input__field--juro" type="text" id="input-28"/>
                    <label class="input__label input__label--juro" for="input-28">
                        <span class="input__label-content input__label-content--juro">First Namespan>
                    label>
                span>
                <span class="input input--juro">
                    <input class="input__field input__field--juro" type="text" id="input-29"/>
                    <label class="input__label input__label--juro" for="input-29">
                        <span class="input__label-content input__label-content--juro">Last Namespan>
                    label>
                span>
                <span class="input input--juro">
                    <input class="input__field input__field--juro" type="text" id="input-30"/>
                    <label class="input__label input__label--juro" for="input-30">
                        <span class="input__label-content input__label-content--juro">Maiden Namespan>
                    label>
                span>
section>
<section class="content bgcolor-4">
    <h2>Madokah2>
                <span class="input input--madoka">
                    <input class="input__field input__field--madoka" type="text" id="input-31"/>
                    <label class="input__label input__label--madoka" for="input-31">
                        <svg class="graphic graphic--madoka" width="100%" height="100%" viewBox="0 0 404 77"
                             preserveAspectRatio="none">
                            <path d="m0,0l404,0l0,77l-404,0l0,-77z"/>
                        svg>
                        <span class="input__label-content input__label-content--madoka">Frequencyspan>
                    label>
                span>
                <span class="input input--madoka">
                    <input class="input__field input__field--madoka" type="text" id="input-32"/>
                    <label class="input__label input__label--madoka" for="input-32">
                        <svg class="graphic graphic--madoka" width="100%" height="100%" viewBox="0 0 404 77"
                             preserveAspectRatio="none">
                            <path d="m0,0l404,0l0,77l-404,0l0,-77z"/>
                        svg>
                        <span class="input__label-content input__label-content--madoka">Weightspan>
                    label>
                span>
                <span class="input input--madoka">
                    <input class="input__field input__field--madoka" type="text" id="input-33"/>
                    <label class="input__label input__label--madoka" for="input-33">
                        <svg class="graphic graphic--madoka" width="100%" height="100%" viewBox="0 0 404 77"
                             preserveAspectRatio="none">
                            <path d="m0,0l404,0l0,77l-404,0l0,-77z"/>
                        svg>
                        <span class="input__label-content input__label-content--madoka">Strengthspan>
                    label>
                span>
section>
<section class="content">
    <h2>Kaedeh2>
                <span class="input input--kaede">
                    <input class="input__field input__field--kaede" type="text" id="input-35"/>
                    <label class="input__label input__label--kaede" for="input-35">
                        <span class="input__label-content input__label-content--kaede">First Namespan>
                    label>
                span>
                <span class="input input--kaede">
                    <input class="input__field input__field--kaede" type="text" id="input-36"/>
                    <label class="input__label input__label--kaede" for="input-36">
                        <span class="input__label-content input__label-content--kaede">Last Namespan>
                    label>
                span>
                <span class="input input--kaede">
                    <input class="input__field input__field--kaede" type="text" id="input-37"/>
                    <label class="input__label input__label--kaede" for="input-37">
                        <span class="input__label-content input__label-content--kaede">Websitespan>
                    label>
                span>
section>
<section class="content bgcolor-8">
    <h2>Isaoh2>
                <span class="input input--isao">
                    <input class="input__field input__field--isao" type="text" id="input-38"/>
                    <label class="input__label input__label--isao" for="input-38" data-content="First Name">
                        <span class="input__label-content input__label-content--isao">First Namespan>
                    label>
                span>
                <span class="input input--isao">
                    <input class="input__field input__field--isao" type="text" id="input-39"/>
                    <label class="input__label input__label--isao" for="input-39" data-content="Middle Name">
                        <span class="input__label-content input__label-content--isao">Middle Namespan>
                    label>
                span>
                <span class="input input--isao">
                    <input class="input__field input__field--isao" type="text" id="input-40"/>
                    <label class="input__label input__label--isao" for="input-40" data-content="Last Name">
                        <span class="input__label-content input__label-content--isao">Last Namespan>
                    label>
                span>
section>
div>

<script>
    /*!
     * classie - class helper functions 封装js
     * from bonzo https://github.com/ded/bonzo
     * 
     * classie.has( elem, 'my-class' ) -> true/false
     * classie.add( elem, 'my-new-class' )
     * classie.remove( elem, 'my-unwanted-class' )
     * classie.toggle( elem, 'my-class' )
     */

    /*jshint browser: true, strict: true, undef: true */
    /*global define: false */

    (function (window) {

        'use strict';

// class helper functions from bonzo https://github.com/ded/bonzo

        function classReg(className) {
            return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
        }

// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
        var hasClass, addClass, removeClass;

        if ('classList' in document.documentElement) {
            hasClass = function (elem, c) {
                return elem.classList.contains(c);
            };
            addClass = function (elem, c) {
                elem.classList.add(c);
            };
            removeClass = function (elem, c) {
                elem.classList.remove(c);
            };
        }
        else {
            hasClass = function (elem, c) {
                return classReg(c).test(elem.className);
            };
            addClass = function (elem, c) {
                if (!hasClass(elem, c)) {
                    elem.className = elem.className + ' ' + c;
                }
            };
            removeClass = function (elem, c) {
                elem.className = elem.className.replace(classReg(c), ' ');
            };
        }

        function toggleClass(elem, c) {
            var fn = hasClass(elem, c) ? removeClass : addClass;
            fn(elem, c);
        }

        var classie = {
            // full names
            hasClass: hasClass,
            addClass: addClass,
            removeClass: removeClass,
            toggleClass: toggleClass,
            // short names
            has: hasClass,
            add: addClass,
            remove: removeClass,
            toggle: toggleClass
        };

// transport
        if (typeof define === 'function' && define.amd) {
            // AMD
            define(classie);
        } else {
            // browser global
            window.classie = classie;
        }

    })(window);

script>
<script>
    (function () {
        // trim polyfill : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
        if (!String.prototype.trim) {
            (function () {
                // Make sure we trim BOM and NBSP
                var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
                String.prototype.trim = function () {
                    return this.replace(rtrim, '');
                };
            })();
        }

        [].slice.call(document.querySelectorAll('input.input__field')).forEach(function (inputEl) {
            // in case the input is already filled..
            if (inputEl.value.trim() !== '') {
                classie.add(inputEl.parentNode, 'input--filled');
            }

            // events:
            inputEl.addEventListener('focus', onInputFocus);
            inputEl.addEventListener('blur', onInputBlur);
        });

        function onInputFocus(ev) {
            classie.add(ev.target.parentNode, 'input--filled');
        }

        function onInputBlur(ev) {
            if (ev.target.value.trim() === '') {
                classie.remove(ev.target.parentNode, 'input--filled');
            }
        }
    })();
script>
body>
html>

转载于:https://www.cnblogs.com/wzzl/p/4933013.html

每日一题——第八十四题互联网打工人no1 C语言程序设计每日一练 c语言
题目：编写函数1、输入10个职工的姓名和职工号2、按照职工由大到小顺序排列，姓名顺序也随之调整3、要求输入一个职工号，用折半查找法找出该职工的姓名#define_CRT_SECURE_NO_WARNINGS#include#include#defineMAX_EMPLOYEES10typedefstruct{intid;charname[50];}Empolyee;voidinputEmploye
每日一题——第八十二题互联网打工人no1 C语言程序设计每日一练 c语言
题目：将一个控制台输入的字符串中的所有元音字母复制到另一字符串中#include#include#include#include#defineMAX_INPUT1024boolisVowel(charp);intmain(){charinput[MAX_INPUT];charoutput[MAX_INPUT];printf("请输入一串字符串：\n");fgets(input,sizeof(inp
每日一题——第八十三题互联网打工人no1 C语言程序设计每日一练 c语言
题目：将输入的整形数字输出,输出1990，输出"1990"#include#defineMAX_INPUT1024intmain(){intarrr_num[MAX_INPUT];intnum,i=0;printf("请输入一个数字：");scanf_s("%d",&num);while(num!=0){arrr_num[i++]=num%10;num/=10;}printf("\"");for(
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
推荐算法_隐语义-梯度下降 _feivirus_ 算法机器学习和数学推荐算法机器学习隐语义
importnumpyasnp1.模型实现"""inputrate_matrix:M行N列的评分矩阵，值为P*Q.P:初始化用户特征矩阵M*K.Q:初始化物品特征矩阵K*N.latent_feature_cnt:隐特征的向量个数max_iteration:最大迭代次数alpha:步长lamda:正则化系数output分解之后的P和Q"""defLFM_grad_desc(rate_matrix,l
用Python实现简单的猜数字游戏程序媛了了 python 游戏 java
猜数字游戏代码：importrandomdefpythonit():a=random.randint(1,100)n=int(input("输入你猜想的数字："))whilen!=a:ifn>a:print("很遗憾，猜大了")n=int(input("请再次输入你猜想的数字："))elifna::如果玩家猜的数字n大于随机数字a，则输出"很遗憾，猜大了"，并提示玩家再次输入。elifn
Table列表复现框实现【勾选-搜索-再勾选】～四时春～ java 开发语言 elementui vue
Table列表复现框实现【勾选-搜索-再勾选】概要整体架构流程代码实现技术细节注意参考文献概要最近在开发时遇到一个问题，在进行表单渲染时，正常选中没有问题，单如果需要搜索选中时，一个是已选中的不会回填，二是在搜索的结果中进行选中，没有实现，经过排查，查找资料后实现。例如：整体架构流程具体的实现效果如下：代码实现{{scope.row.userName}}已选区{{userItem.userName
vue+el-table 可输入表格使用上下键进行input框切换以对_ vue学习记录 vue.js javascript 前端
使用上下键进行完工数量这一列的切换-->//键盘触发事件show(ev,index){letnewIndex;letinputAll=document.querySelectorAll('.table_inputinput');//向上=38if(ev.keyCode==38){if(index==0){//如果是第一行,回到最后一个newIndex=inputAll.length-1}elsei
HarmonyOS开发实战（ Beta5.0）搜索框热搜词自动切换让开，我要吃人了 OpenHarmony HarmonyOS 鸿蒙开发 harmonyos 华为鸿蒙移动开发鸿蒙系统前端开发语言
鸿蒙HarmonyOS开发往期必看：HarmonyOSNEXT应用开发性能实践总结最新版！“非常详细的”鸿蒙HarmonyOSNext应用开发学习路线！（从零基础入门到精通）介绍本示例介绍使用TextInput组件与Swiper组件实现搜索框内热搜词自动切换。效果图预览使用说明页面顶部搜索框内热搜词条自动切换，编辑搜索框时自动隐藏。实现思路使用TextInput实现搜索框TextInput({te
uniapp使用内置地图选择插件，实现地址选择并在地图上标点神夜大侠 Uniapp vue.js uniapp
uniapp使用内置地图选择插件，实现地址选择并在地图上标点代码如下：page{background:#F4F5F6;}::-webkit-scrollbar{width:0;height:0;color:transparent;}page{height:100%;width:100%;font-size:24rpx;}image,view,input,textarea,label,text,na
LeetCode 673. Number of Longest Increasing Subsequence (Java版; Meidum) littlehaes 字符串动态规划算法 leetcode 数据结构
welcometomyblogLeetCode673.NumberofLongestIncreasingSubsequence(Java版;Meidum)题目描述Givenanunsortedarrayofintegers,findthenumberoflongestincreasingsubsequence.Example1:Input:[1,3,5,4,7]Output:2Explanatio
el-table实现全选整表，单元一页复选框功能周bro vue.js elementui javascript 前端
全选整表单选一页0":popper-append-to-body="false":total="tableData.length":page-size="pageObj.pagesize":page-sizes="[10,50,100]"layout="total,sizes,prev,pager,next"@size-change="handleSizeChange"@current-chang
Vue + Express实现一个表单提交九旬大爷的梦
最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
使用input[type=file]遇上的一些问题刘圣凯
项目遇到一个需要，如下image.png功能大致就是添加图片，展示出来，然后在用户点击提交的时候把图片传给后台，在和后台交涉之后，决定在用户选择图片之后转成formdata传给后台，后台返回一个url，提交的时候将url返回给后台/**转formdata*/varformdata=newFormData();formdata.append("file1",$("#pic")[0].files[0]
神经网络传递函数sigmoid,神经网络传递函数作用快乐的小荣荣神经网络机器学习深度学习人工智能
神经网络传递函数选取不同会有特别大差别嘛？只是最后一层，但前面层是非线性，那么可能存在区别不大的情况。线性函数f(a*input)=af(input),一般来说，input为向量，最简化情况下，可以假设input的各个维度，a1=a2=a3。。。意味着你线性层只是简单的对输入做了scale~而神经网络能起作用的原因，在于通过足够复杂的非线性函数，来模拟任何的分布。所以，神经网络必须要用非线性函数。
Python实现mysql命令行 xu-jssy python mysql adb
一、源码importosimportpymysqldefsql_shell():password=input("EnterPassword:")#访问密码ifpassword.strip()!="yyds":print("Bye")return#清空控制台输出os.system("cls"ifos.name=="nt"else"clear")try:#连接到MySQL数据库conn=pymysql
如何在Flask中处理表单数据 ac-er8888 flask python 后端
在Flask中处理表单数据是一个常见的任务，它涉及从客户端接收数据并在服务器端进行解析和处理。Flask本身不直接提供表单验证的功能，但它可以与WTForms等库结合使用来简化表单处理过程。不过，即使没有WTForms，你仍然可以直接通过Flask的request对象来处理表单数据。以下是在Flask中处理表单数据的基本步骤：1.创建HTML表单首先，你需要在HTML中创建一个表单，并将其meth
新媒体人#自媒体魂！新手到入门|一篇足矣 ph萝卜
最近已学习《新媒体写作平台策划与运营》课程，先梳理梳理学习感悟，后上满满的干货！希望阅读文章的你可以带来一丝想法，目的就达到了！想干成一件事，最靠谱的就是去认识一个已经做成了这件事情的人，或是认识与这件事情相关的人。做到不耻下问，足或有所长，你找他们聊天一小时，足以比你看多少书来的实际，就打个比方，我想利用我的空余时间做微信公众平台，我想到的是学习相关知识，包括编辑，美化，排版，运营，与其同时，我
自己看---华为od--构成正方形的数量我狠狠地刷刷刷刷刷华为od 算法
题目描述输入N个互不相同的二维整数坐标，求这N个坐标可以构成的正方形数量。[内积为零的的两个向量垂直]输入描述第一行输入为N，N代表坐标数量，N为正整数。N<=100之后的N行输入为坐标xy以空格分隔，x，y为整数，-10<=x,y<=10输出描述输出可以构成的正方形数量。用例1输入3132431输出0用例2输入40012312-1输出1N=int(input())coords=[input()f
bat批处理循环执行adb命令 erhtre 程序员 adb
ping-n2127.0>nul等待2s:one::adbshellinputswipe90010007001000adbshellinputkeyevent25%KEYCODE_VOLUME_DOWN%ping-n2127.0>nulgototwo:twoadbshellinputkeyevent25%KEYCODE_VOLUME_DOWN%ping-n3127.0>nulgotoone附：An
虚幻引擎VR游戏开发03| 键位映射 charon8778 虚幻引擎游戏开发虚幻 vr 游戏引擎
Enhancedinputmapping按键映射在虚幻引擎（UnrealEngine）中，EnhancedInputMapping是一个用于管理和处理输入（例如键盘、鼠标、手柄等）的系统。它提供了一种更灵活、更强大的方式来定义和响应用户输入，相比传统的输入系统有多项改进。以下是它的主要功能和用途：更灵活的输入映射：EnhancedInputMapping支持基本的按键绑定，也能处理组合输入（例如按
Java中将 File对象转MultipartFile对象 File ＞＞＞ MultipartFile 奔腾的隔壁老王 java spring 开发语言
Java中将File类型的对象转换为MultipartFile类型的对象所需要的包：importjava.io.FileInputStream;importorg.springframework.web.multipart.MultipartFile;实现代码：//传入一个File对象，获得一个转换后的MultipartFile对象publicMultipartFilegetMultipartFi
Java url转MultipartFile inputStream转File file转multipartFile Abel_JiaWei java
Javaurl转MultipartFileinputStream转Filefile转multipartFile/***url转MultipartFile*@paramurl*@return*@throwsException*/publicstaticMultipartFileurlToMultipartFile(Stringurl)throwsException{Filefile=null;Mul
PIPE Interface解析之SerDes/Original架构（专有）信号解析芯芯之火，可以燎原 PIPE Interface 硬件工程信息与通信
SerDes架构专有信号PHY的Input信号RxWidth[1:0]该信号用于控制接收数据的位宽，具体如下：PHY的output信号RxCLK该信号用于RxData的时钟同步。Original架构专有信号PHY的Input信号TxDataK[7:0]/[3:0]/[1:0]/[0:0]TxDataK[7:0]用于64bitinterface；TxDataK[3:0]用于32bitinterfac
Error - cannot open input file /postproc/nlscfg.inf 错误解决技术无疆 Windows CE input file command windows
执行makeimg命令的时候出现一下错误：makeimg:Creatingnlscfg.outbecausenlscfg.infdoesn'texist.makeimg:runcommand:fmerge-nlsnlscfg.outnlscfg.infError-cannotopeninputfile/postproc/nlscfg.inffmergeforWindowsCE(Release)(B
QT 自定义组件界面跳转子座 qt 数据库开发语言
一、引用组件需要的类（头文件）1、按钮类QPushButton:普通按钮;QToolButton:工具按钮;QRadioButton:单选按钮;QCheckBox:复选按钮;QCommandLinkButton:命令连接按钮;2、布局类QHBoxLayout水平QVBoxLayout垂直QGridLayout网格QFormLayout表单QSrackedLayout.堆栈3、输出类QLabel:标
【QT教程】QT6硬件图形界面编程 QT硬件编程 QT性能优化QT原理源码QT界面美化 qt qt6.3 qt5 c++QT教程
QT6硬件图形界面编程使用AI技术辅助生成QT界面美化视频课程QT性能优化视频课程QT原理与源码分析视频课程QTQMLC++扩展开发视频课程免费QT视频课程您可以看免费1000+个QT技术视频免费QT视频课程QT统计图和QT数据可视化视频免费看免费QT视频课程QT性能优化视频免费看免费QT视频课程QT界面美化视频免费看1QT6硬件图形界面编程概述1.1QT6硬件图形界面编程简介1.1.1QT6硬件
css鼠标移上去向上移动,css3鼠标移动图片上移效果 yo xiba css鼠标移上去向上移动
css3的功能真是很强大，学无止境，不多说，直接上代码css部分：*{margin:;padding:;}.text-center{text-align:center}.col_cont{width:300px;height:300px;margin:auto}.thumbnail{cursor:pointer;text-decoration:none;display:block;padding:
css3实现鼠标放到图标上自动切换图标黄丫丫07 css css3 html
作业div{font-family:'icomoon';width:1217px;height:1217px;background:url(images/1.jpg)no-repeat00;transition:all.2s;}div:hover{background:url(images/1.jpg)no-repeat-1200px0;}
log4j对象改变日志级别 3213213333332132 java log4j level log4j对象名称日志级别
log4j对象改变日志级别可批量的改变所有级别，或是根据条件改变日志级别。 log4j配置文件： log4j.rootLogger=ERROR,FILE,CONSOLE,EXECPTION #log4j.appender.FILE=org.apache.log4j.RollingFileAppender log4j.appender.FILE=org.apache.l
elk+redis 搭建nginx日志分析平台 ronin47 elasticsearch kibana logstash
elk+redis 搭建nginx日志分析平台 logstash,elasticsearch,kibana 怎么进行nginx的日志分析呢？首先，架构方面，nginx是有日志文件的，它的每个请求的状态等都有日志文件进行记录。其次，需要有个队列，redis的l
Yii2设置时区 dcj3sjt126com PHP timezone yii2
时区这东西，在开发的时候，你说重要吧，也还好，毕竟没它也能正常运行，你说不重要吧，那就纠结了。特别是linux系统，都TMD差上几小时，你能不痛苦吗？win还好一点。有一些常规方法，是大家目前都在采用的1、php.ini中的设置，这个就不谈了，2、程序中公用文件里设置，date_default_timezone_set一下时区3、或者。。。自己写时间处理函数，在遇到时间的时候，用这个函数处理（比较
js实现前台动态添加文本框，后台获取文本框内容 171815164 文本框
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w
持续集成工具 g21121 持续集成
持续集成是什么？我们为什么需要持续集成？持续集成带来的好处是什么？什么样的项目需要持续集成？... 持续集成(Continuous integration ,简称CI)，所谓集成可以理解为将互相依赖的工程或模块合并成一个能单独运行
数据结构哈希表(hash)总结永夜-极光数据结构
1.什么是hash 来源于百度百科: Hash，一般翻译做“散列”，也有直接音译为“哈希”的，就是把任意长度的输入，通过散列算法，变换成固定长度的输出，该输出就是散列值。这种转换是一种压缩映射，也就是，散列值的空间通常远小于输入的空间，不同的输入可能会散列成相同的输出，所以不可能从散列值来唯一的确定输入值。简单的说就是一种将任意长度的消息压缩到某一固定长度的消息摘要的函数。
乱七八糟程序员是怎么炼成的
eclipse中的jvm字节码查看插件地址： http://andrei.gmxhome.de/eclipse/ 安装该地址的outline 插件后重启，打开window下的view下的bytecode视图 http://andrei.gmxhome.de/eclipse/ jvm博客： http://yunshen0909.iteye.com/blog/2
职场人伤害了“上司” 怎样弥补 aijuans 职场
由于工作中的失误，或者平时不注意自己的言行“伤害”、“得罪”了自己的上司，怎么办呢？　　在职业生涯中这种问题尽量不要发生。下面提供了一些解决问题的建议：　　一、利用一些轻松的场合表示对他的尊重　　即使是开明的上司也很注重自己的权威，都希望得到下属的尊重，所以当你与上司冲突后，最好让不愉快成为过去，你不妨在一些轻松的场合，比如会餐、联谊活动等，向上司问个好，敬下酒，表示你对对方的尊重，
深入浅出url编码 antonyup_2006 应用服务器浏览器 servlet weblogic IE
出处：http://blog.csdn.net/yzhz 杨争 http://blog.csdn.net/yzhz/archive/2007/07/03/1676796.aspx 一、问题：编码问题是JAVA初学者在web开发过程中经常会遇到问题，网上也有大量相关的
建表后创建表的约束关系和增加表的字段百合不是茶标的约束关系增加表的字段
下面所有的操作都是在表建立后操作的,主要目的就是熟悉sql的约束,约束语句的万能公式 1,增加字段(student表中增加姓名字段) alter table 增加字段的表名 add 增加的字段名增加字段的数据类型 alter table student add name varchar2(10); &nb
Uploadify 3.2 参数属性、事件、方法函数详解 bijian1013 JavaScript uploadify
一.属性属性名称默认值说明 auto true 设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传。 buttonClass ” 按钮样式 buttonCursor ‘hand’ 鼠标指针悬停在按钮上的样子 buttonImage null 浏览按钮的图片的路
精通Oracle10编程SQL(16)使用LOB对象 bijian1013 oracle 数据库 plsql
/* *使用LOB对象 */ --LOB(Large Object)是专门用于处理大对象的一种数据类型，其所存放的数据长度可以达到4G字节 --CLOB/NCLOB用于存储大批量字符数据，BLOB用于存储大批量二进制数据，而BFILE则存储着指向OS文件的指针 /* *综合实例 */ --建立表空间 --#指定区尺寸为128k,如不指定，区尺寸默认为64k CR
【Resin一】Resin服务器部署web应用 bit1129 resin
工作中，在Resin服务器上部署web应用，通常有如下三种方式：配置多个web-app 配置多个http id 为每个应用配置一个propeties、xml以及sh脚本文件配置多个web-app 在resin.xml中,可以为一个host配置多个web-app <cluster id="app&q
red5简介及基础知识白糖_ 基础
简介 Red5的主要功能和Macromedia公司的FMS类似，提供基于Flash的流媒体服务的一款基于Java的开源流媒体服务器。它由Java语言编写，使用RTMP作为流媒体传输协议，这与FMS完全兼容。它具有流化FLV、MP3文件，实时录制客户端流为FLV文件，共享对象，实时视频播放、Remoting等功能。用Red5替换FMS后,客户端不用更改可正
angular.fromJson boyitech AngularJS AngularJS 官方API AngularJS API
angular.fromJson 描述: 把Json字符串转为对象使用方法: angular.fromJson(json); 参数详解: Param Type Details json string JSON 字符串返回值: 对象, 数组, 字符串或者是一个数字示例: <!DOCTYPE HTML> <h
java-颠倒一个句子中的词的顺序。比如： I am a student颠倒后变成：student a am I bylijinnan java
public class ReverseWords { /** * 题目：颠倒一个句子中的词的顺序。比如： I am a student颠倒后变成：student a am I.词以空格分隔。 * 要求： * 1.实现速度最快,移动最少 * 2.不能使用String的方法如split,indexOf等等。 * 解答：两次翻转。 */ publ
web实时通讯 Chen.H Web 浏览器 socket 脚本
关于web实时通讯，做一些监控软件。由web服务器组件从消息服务器订阅实时数据，并建立消息服务器到所述web服务器之间的连接，web浏览器利用从所述web服务器下载到web页面的客户端代理与web服务器组件之间的socket连接，建立web浏览器与web服务器之间的持久连接；利用所述客户端代理与web浏览器页面之间的信息交互实现页面本地更新，建立一条从消息服务器到web浏览器页面之间的消息通路
[基因与生物]远古生物的基因可以嫁接到现代生物基因组中吗? comsci 生物
大家仅仅把我说的事情当作一个IT行业的笑话来听吧..没有其它更多的意思如果我们把大自然看成是一位伟大的程序员,专门为地球上的生态系统编制基因代码,并创造出各种不同的生物来,那么6500万年前的程序员开发的代码,是否兼容现代派的程序员的代码和架构呢?
oracle 外部表 daizj oracle 外部表 external tables
oracle外部表是只允许只读访问，不能进行DML操作，不能创建索引，可以对外部表进行的查询，连接，排序，创建视图和创建同义词操作。 you can select, join, or sort external table data. You can also create views and synonyms for external tables. Ho
aop相关的概念及配置 daysinsun AOP
切面(Aspect): 通常在目标方法执行前后需要执行的方法（如事务、日志、权限），这些方法我们封装到一个类里面，这个类就叫切面。连接点（joinpoint） spring里面的连接点指需要切入的方法，通常这个joinpoint可以作为一个参数传入到切面的方法里面（非常有用的一个东西）。通知（Advice）通知就是切面里面方法的具体实现，分为前置、后置、最终、异常环
初一上学期难记忆单词背诵第二课 dcj3sjt126com english word
middle 中间的，中级的 well 喔，那么；好吧 phone 电话，电话机 policeman 警察 ask 问 take 拿到；带到 address 地址 glad 高兴的，乐意的 why 为什么 China 中国 family 家庭 grandmother (外)祖母 grandfather (外)祖父 wife 妻子 husband 丈夫 da
Linux日志分析常用命令 dcj3sjt126com linux log
1.查看文件内容 cat -n 显示行号 2.分页显示 more Enter 显示下一行空格显示下一页 F 显示下一屏 B 显示上一屏 less /get 查询"get"字符串并高亮显示 3.显示文件尾 tail -f 不退出持续显示 -n 显示文件最后n行 4.显示头文件 head -n 显示文件开始n行 5.内容排序 sort -n 按照
JSONP 原理分析 fantasy2005 JavaScript jsonp jsonp 跨域
转自 http://www.nowamagic.net/librarys/veda/detail/224 JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略）。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制，即JavaScript只能访问与包含它的
使用connect by进行级联查询 234390216 oracle 查询父子 Connect by 级联
使用connect by进行级联查询 connect by可以用于级联查询，常用于对具有树状结构的记录查询某一节点的所有子孙节点或所有祖辈节点。来看一个示例，现假设我们拥有一个菜单表t_menu，其中只有三个字段：
一个不错的能将HTML表格导出为excel,pdf等的jquery插件 jackyrong jquery插件
发现一个老外写的不错的jquery插件，可以实现将HTML 表格导出为excel,pdf等格式，地址在： https://github.com/kayalshri/ 下面看个例子，实现导出表格到excel,pdf <html> <head> <title>Export html table to excel an
UI设计中我们为什么需要设计动效 lampcy UI UI设计
关于Unity3D中的Shader的知识首先先解释下Unity3D的Shader，Unity里面的Shaders是使用一种叫ShaderLab的语言编写的，它同微软的FX文件或者NVIDIA的CgFX有些类似。传统意义上的vertex shader和pixel shader还是使用标准的Cg/HLSL 编程语言编写的。因此Unity文档里面的Shader，都是指用ShaderLab编写的代码，
如何禁止页面缓存 nannan408 html jsp cache
禁止页面使用缓存~ ------------------------------------------------ jsp:页面no cache： response.setHeader("Pragma","No-cache"); response.setHeader("Cache-Control","no-cach
以代码的方式管理quartz定时任务的暂停、重启、删除、添加等 Everyday都不同定时任务管理 spring-quartz
【前言】在项目的管理功能中，对定时任务的管理有时会很常见。因为我们不能指望只在配置文件中配置好定时任务就行了，因为如果要控制定时任务的 “暂停” 呢？暂停之后又要在某个时间点 “重启” 该定时任务呢？或者说直接 “删除” 该定时任务呢？要改变某定时任务的触发时间呢？ “添加” 一个定时任务对于系统的使用者而言，是不太现实的，因为一个定时任务的处理逻辑他是不
EXT实例 tntxia ext
（1）增加一个按钮 JSP: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); Stri
数学学习在计算机研究领域的作用和重要性 xjnine Math
最近一直有师弟师妹和朋友问我数学和研究的关系，研一要去学什么数学课。毕竟在清华，衡量一个研究生最重要的指标之一就是paper,而没有数学，是肯定上不了世界顶级的期刊和会议的，这在计算机学界尤其重要！你会发现，不论哪个领域有价值的东西，都一定离不开数学！在这样一个信息时代，当google已经让世界没有秘密的时候，一种卓越的数学思维，绝对可以成为你的核心竞争力. 无奈本人实在见地

CSS3表单input输入框美化

你可能感兴趣的:(CSS3表单input输入框美化)