我是新手,我正在开展一个简单的项目,但发现自己陷入困境。
我有一个文本字段,只显示时间和一些下拉列表,我想分别改变那个时间的颜色,背景和字体大小。我的代码配置如下,但选择时似乎没有任何内容。
知道我的活动没有被处理的原因吗?
这是背后的cs代码:
public partial class WebTime : System.Web.UI.Page
{
protected void Page_Init(object sender, EventArgs e)
{
timeLabel.Text = DateTime.Now.ToString("hh:mm:ss");
}
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
timeLabel.BackColor = Color.FromName(DropDownList1.SelectedValue);
}
protected void DropDownList2_SelectedIndexChanged(object sender, EventArgs e)
{
timeLabel.ForeColor = Color.FromName(DropDownList2.SelectedValue);
}
protected void DropDownList3_SelectedIndexChanged(object sender, EventArgs e)
{
timeLabel.Font.Size = Convert.ToInt32(DropDownList3.DataValueField);
}
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
{
timeLabel.BackColor = Color.FromName(DropDownList1.SelectedValue);
timeLabel.ForeColor = Color.FromName(DropDownList2.SelectedValue);
timeLabel.Font.Size = Convert.ToInt32(DropDownList3.DataValueField);
}
}
}
这是前端的asp:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="WebTime.aspx.cs" Inherits="WebTime" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title> Simple Web Form Example</title>
<style type="text/css">
.timeStyle {
color: #FFFF00;
font-size: xx-large;
background-color: #000000;
}
.listOption{
margin: 10px 30px 10px 30px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>Current time on the Web server:</h1>
<p>
<asp:Label ID="timeLabel" runat="server" CssClass="timeStyle"></asp:Label>
</p>
</div>
<asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" CssClass="listOption">
<asp:ListItem Text="Black" Value="black" Selected="True" />
<asp:ListItem Text="Red" Value="red" />
<asp:ListItem Text="Blue" Value="blue" />
<asp:ListItem Text="Green" Value="green" />
</asp:DropDownList>
<asp:DropDownList ID="DropDownList2" runat="server" OnSelectedIndexChanged="DropDownList2_SelectedIndexChanged" CssClass ="listOption">
<asp:ListItem Text="Yellow" Value="#FFFF00" Selected="True" />
<asp:ListItem Text="Red" Value="#FF0000" />
<asp:ListItem Text="Blue" Value="#0000FF" />
<asp:ListItem Text="Green" Value="#008000" />
</asp:DropDownList>
<asp:DropDownList ID="DropDownList3" runat="server" OnSelectedIndexChanged="DropDownList3_SelectedIndexChanged" CssClass="listOption">
<asp:ListItem Text="24" Value="24px" Selected="True" />
<asp:ListItem Text="32" Value="32px" />
<asp:ListItem Text="64" Value="64px" />
<asp:ListItem Text="128" Value="128px" />
</asp:DropDownList>
</form>
</body>
</html>
答案 0 :(得分:0)
我找到了自己的答案。需要为每个下拉列表设置简短版本 var mobileIndexShown = false;
var timerSet;
function showhide() {
if (timerSet) {
clearTimeout(timerSet);
}
if (!mobileIndexShown) {
timerSet = setTimeout(toggleMobileIndex, 1000);
} else {
toggleMobileIndex();
}
}
function toggleMobileIndex()
{
var mobileIndex = document.getElementById('mobile_index');
timerSet = false;
if (mobileIndex.className === 'DisplayBlock') {
mobileIndex.className = 'DisplayNone';
mobileIndexShown = false;
} else {
mobileIndex.className = 'DisplayBlock';
mobileIndexShown = true;
}
}
。
这里更好的解释更详细,因为这个问题应该是重复的