带倒数计时器的通知栏
Notification bar with countdown timer
我正在尝试使用 bootstrap 构建一个响应式通知栏,但是我的媒体查询行为不正常,
我有一些带有标签的文本,我想在较小的屏幕上减小尺寸,但只有我的计时器文本在改变尺寸。我还想在小屏幕上的文本和按钮之间添加一些边距,但它不起作用。
请查看我的代码并提出一些更改建议:|
$(function() {
var endDate = new Date();
endDate = new Date(2016, 12 - 1, 31);
$('#dcountdown').countdown({
until: endDate
});
$('#dclose').click(function() {
$(this).parent().slideUp();
});
});
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,700italic);
@media only screen and (max-width: 700px){.dcontent strong{font-size: 50%;}.countdown-section{font-size: 80%;padding-bottom: 10%;} .mybutton{padding: 2px;}}
#dbanner {
position: top;
bottom: 0px;
height: auto;
width: 100%;
padding: 10px 0 10px 0;
color: #fff;
text-align: center;
font-family: "Open Sans";
text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.8);
}
.dcontent {
padding: 0px 30px 0px 30px;
font-size: 16px;
}
.dcontent strong {
font-size: 20px;
color: #fff;
white-space: nowrap;
margin-right: 30%;
text-align: center;
}
#dclose {
position: absolute;
font-size: 8px;
height: 20px;
line-height: 10px;
top: 5px;
right: 10px;
color: #fff;
}
#dclose:hover {
cursor: pointer;
}
.change-color {
background-color: #000000;
color: #FFF;
text-align: center;
}
.mybutton{
padding: 5px;
background: #006622;
background-size: 100%;
border-radius: 0px;
color: #fff;
}
.countdown-section {
padding: 0 5px 0 5px;
text-align: center;
}
.countdown-amount {
padding: 0 5px 0 0;
}
.countdown-period {
text-transform: none;
}
.countdown-descr {
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
<div id="dbanner" class="change-color">
<div class="dcontent">
<strong>Some Text Here Some Text Here Some </strong> <span id="dcountdown"></span> <a href="http://www.google.com" target="_blank" role="button" class="mybutton">Apply Now</a>
</div>
<div id="dclose">close me!</div>
</div>
<script src="https://lizatom.com/wp-content/themes/lizatom2015/banner/jquery.countdown.min.js"></script>
<script src="https://lizatom.com/wp-content/themes/lizatom2015/banner/jquery.plugin.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
谢谢
Mobile View
之前的问题现在已经解决了,但是在移动端视图中右侧有一些白色space,我该如何解决
Mobile View new
将整个语句@media only screen and (max-width: 700px) {... ...} 移到您的规则下方。那么它应该可以正常工作。
$(function() {
var endDate = new Date();
endDate = new Date(2016, 12 - 1, 31);
$('#dcountdown').countdown({
until: endDate
});
$('#dclose').click(function() {
$(this).parent().slideUp();
});
});
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,700italic);
#dbanner {
position: top;
bottom: 0px;
height: auto;
width: 100%;
padding: 10px 0 10px 0;
color: #fff;
text-align: center;
font-family: "Open Sans";
text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.8);
}
.dcontent {
padding: 0px 30px 0px 30px;
font-size: 16px;
}
.dcontent strong {
font-size: 20px;
color: #fff;
white-space: nowrap;
margin-right: 30%;
text-align: center;
}
#dclose {
position: absolute;
font-size: 8px;
height: 20px;
line-height: 10px;
top: 5px;
right: 10px;
color: #fff;
}
#dclose:hover {
cursor: pointer;
}
.change-color {
background-color: #000000;
color: #FFF;
text-align: center;
}
.mybutton{
padding: 5px;
background: #006622;
background-size: 100%;
border-radius: 0px;
color: #fff;
}
.countdown-section {
padding: 0 5px 0 5px;
text-align: center;
}
.countdown-amount {
padding: 0 5px 0 0;
}
.countdown-period {
text-transform: none;
}
.countdown-descr {
}
@media only screen and (max-width: 700px){
.dcontent strong {
font-size: 50%;
}
.countdown-section {
font-size: 80%;
padding-bottom: 10%;
}
.mybutton {
padding: 2px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
<div id="dbanner" class="change-color">
<div class="dcontent">
<strong>Some Text Here Some Text Here Some </strong> <span id="dcountdown"></span> <a href="http://www.google.com" target="_blank" role="button" class="mybutton">Apply Now</a>
</div>
<div id="dclose">close me!</div>
</div>
<script src="https://lizatom.com/wp-content/themes/lizatom2015/banner/jquery.countdown.min.js"></script>
<script src="https://lizatom.com/wp-content/themes/lizatom2015/banner/jquery.plugin.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
我正在尝试使用 bootstrap 构建一个响应式通知栏,但是我的媒体查询行为不正常,
我有一些带有标签的文本,我想在较小的屏幕上减小尺寸,但只有我的计时器文本在改变尺寸。我还想在小屏幕上的文本和按钮之间添加一些边距,但它不起作用。
请查看我的代码并提出一些更改建议:|
$(function() {
var endDate = new Date();
endDate = new Date(2016, 12 - 1, 31);
$('#dcountdown').countdown({
until: endDate
});
$('#dclose').click(function() {
$(this).parent().slideUp();
});
});
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,700italic);
@media only screen and (max-width: 700px){.dcontent strong{font-size: 50%;}.countdown-section{font-size: 80%;padding-bottom: 10%;} .mybutton{padding: 2px;}}
#dbanner {
position: top;
bottom: 0px;
height: auto;
width: 100%;
padding: 10px 0 10px 0;
color: #fff;
text-align: center;
font-family: "Open Sans";
text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.8);
}
.dcontent {
padding: 0px 30px 0px 30px;
font-size: 16px;
}
.dcontent strong {
font-size: 20px;
color: #fff;
white-space: nowrap;
margin-right: 30%;
text-align: center;
}
#dclose {
position: absolute;
font-size: 8px;
height: 20px;
line-height: 10px;
top: 5px;
right: 10px;
color: #fff;
}
#dclose:hover {
cursor: pointer;
}
.change-color {
background-color: #000000;
color: #FFF;
text-align: center;
}
.mybutton{
padding: 5px;
background: #006622;
background-size: 100%;
border-radius: 0px;
color: #fff;
}
.countdown-section {
padding: 0 5px 0 5px;
text-align: center;
}
.countdown-amount {
padding: 0 5px 0 0;
}
.countdown-period {
text-transform: none;
}
.countdown-descr {
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
<div id="dbanner" class="change-color">
<div class="dcontent">
<strong>Some Text Here Some Text Here Some </strong> <span id="dcountdown"></span> <a href="http://www.google.com" target="_blank" role="button" class="mybutton">Apply Now</a>
</div>
<div id="dclose">close me!</div>
</div>
<script src="https://lizatom.com/wp-content/themes/lizatom2015/banner/jquery.countdown.min.js"></script>
<script src="https://lizatom.com/wp-content/themes/lizatom2015/banner/jquery.plugin.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
谢谢
Mobile View
之前的问题现在已经解决了,但是在移动端视图中右侧有一些白色space,我该如何解决
Mobile View new
将整个语句@media only screen and (max-width: 700px) {... ...} 移到您的规则下方。那么它应该可以正常工作。
$(function() {
var endDate = new Date();
endDate = new Date(2016, 12 - 1, 31);
$('#dcountdown').countdown({
until: endDate
});
$('#dclose').click(function() {
$(this).parent().slideUp();
});
});
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,700italic);
#dbanner {
position: top;
bottom: 0px;
height: auto;
width: 100%;
padding: 10px 0 10px 0;
color: #fff;
text-align: center;
font-family: "Open Sans";
text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.8);
}
.dcontent {
padding: 0px 30px 0px 30px;
font-size: 16px;
}
.dcontent strong {
font-size: 20px;
color: #fff;
white-space: nowrap;
margin-right: 30%;
text-align: center;
}
#dclose {
position: absolute;
font-size: 8px;
height: 20px;
line-height: 10px;
top: 5px;
right: 10px;
color: #fff;
}
#dclose:hover {
cursor: pointer;
}
.change-color {
background-color: #000000;
color: #FFF;
text-align: center;
}
.mybutton{
padding: 5px;
background: #006622;
background-size: 100%;
border-radius: 0px;
color: #fff;
}
.countdown-section {
padding: 0 5px 0 5px;
text-align: center;
}
.countdown-amount {
padding: 0 5px 0 0;
}
.countdown-period {
text-transform: none;
}
.countdown-descr {
}
@media only screen and (max-width: 700px){
.dcontent strong {
font-size: 50%;
}
.countdown-section {
font-size: 80%;
padding-bottom: 10%;
}
.mybutton {
padding: 2px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
<div id="dbanner" class="change-color">
<div class="dcontent">
<strong>Some Text Here Some Text Here Some </strong> <span id="dcountdown"></span> <a href="http://www.google.com" target="_blank" role="button" class="mybutton">Apply Now</a>
</div>
<div id="dclose">close me!</div>
</div>
<script src="https://lizatom.com/wp-content/themes/lizatom2015/banner/jquery.countdown.min.js"></script>
<script src="https://lizatom.com/wp-content/themes/lizatom2015/banner/jquery.plugin.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>