关于input的一个效果的问题。

2014-12-15 05:03:49 206 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

IE8下input光标位置垂直不居中问题 IE8：光标高度与font-size一致； Chrome：光标高度与font-size一致，且自动垂直居中。如下是IE8的效果，此框是在input上加的border：暂未找到更高级的方法解决此问题，若有更简洁方式，请大神评论指点~ 我的解决方案如下：在input外层加div，div设置height和line-height，input设置高度（高度为font-size的高度加高一点，阅读详情

不好意思，又发了一个差不多的帖。晚上交作品现在成烤蚂蚁了。想实现类似双色球胆拖选号的JS。
大概意思是：当选择胆码区的号码后号码变红，请选择胆码的地方显示该球的值，再点击一次变灰色，请选择胆码的地方该值删掉。拖码区也一样。
但是，胆码和拖码的号码不能一样，例如当选择胆码的号码1后，在拖码区如果还选择1，则胆码区的1由红变灰，请选择胆码的地方删去1。拖码上的1由灰变红，请选择拖码的地方加上一个1。效果就类似与数字号码1由胆码区变到拖码去了一样。
胆码和拖码的个数可能有很多个。

<tr>
<td width="14%" height="40" align="right" nowrap=""><span lang="zh-cn">请选择胆码：</span></td>
<td width="100%" height="40"><input type="text" style="width:100%" name="dan" ></td>
</tr>
<tr>
<td width="14%" height="40" align="right" nowrap=""><span lang="zh-cn">请选择拖码：</span></td>
<td width="100%" height="40"><input type="text" style="width:100%" name="tuo" ></td>
</tr>
<tr>
<td height="40" colspan="5" align="center" class="shuzi"><span class="red" ><strong>胆码选择区：</strong></span></td>
</tr>
<tr>
<td height="40" class="shuzi"> </td>
<td height="40" colspan="4" class="shuzi">
<input type="button" value="01" name="num">
<input type="button" value="02" name="num">
<input type="button" value="03" name="num">
<input type="button" value="04" name="num">
<input type="button" value="05" name="num">
<input type="button" value="06" name="num">
<input type="button" value="07" name="num">
<input type="button" value="08" name="num">
<input type="button" value="09" name="num">
<input type="button" value="10" name="num">
<input type="button" value="11" name="num">
<input type="button" value="12" name="num">
<input type="button" value="13" name="num">
<input type="button" value="14" name="num">
<input type="button" value="15" name="num"></td>
</tr>

<tr>
<td height="40" colspan="5" align="center" class="shuzi"><span class="red" ><strong>拖码选择区：</strong></span></td>
<tr>
<td height="40" class="shuzi"> </td>
<td height="40" colspan="4" class="shuzi">
<input type="button" value="01" name="num1">
<input type="button" value="02" name="num1">
<input type="button" value="03" name="num1">
<input type="button" value="04" name="num1">
<input type="button" value="05" name="num1">
<input type="button" value="06" name="num1">
<input type="button" value="07" name="num1">
<input type="button" value="08" name="num1">
<input type="button" value="09" name="num1">
<input type="button" value="10" name="num1">
<input type="button" value="11" name="num1">
<input type="button" value="12" name="num1">
<input type="button" value="13" name="num1">
<input type="button" value="14" name="num1">
<input type="button" value="15" name="num1"></td>
</tr>

...全文

英飞凌AURIX 2G 系列MCU关于外设模块EVADC的实现原理及对应MCAL(EB Tresos)配置项详细讲解本文章讲述了英飞凌AURIX 2G系列MCU关于外设模块EVADC的实现原理及对应MCAL配置工具（EB）的配置项。阅读详情

莱杰

JavaScript 87,983 成员 224,681 内容

+ 关注 + 加入社区

切换为时间正序

slwsss 2014-12-15

打赏
举报

<script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
<style>
  input[type=button]{background:#ccc;}
input.sel{background:red;}
</style>
<tr>
    <td width="14%" height="40" align="right" nowrap=""><span lang="zh-cn">请选择胆码：</span></td>
    <td width="100%" height="40"><input type="text" style="width:100%" name="dan"  ></td>
  </tr>
   <tr>
    <td width="14%" height="40" align="right" nowrap=""><span lang="zh-cn">请选择拖码：</span></td>
    <td width="100%" height="40"><input type="text" style="width:100%" name="tuo"  ></td>
  </tr>
  <tr>
    <td height="40" colspan="5" align="center" class="shuzi"><span class="red" ><strong>胆码选择区：</strong></span></td>
  </tr>
  <tr>
    <td height="40" class="shuzi"> </td>
    <td height="40" colspan="4" class="shuzi">
      <input type="button" value="01" name="num">
      <input type="button" value="02" name="num">
      <input type="button" value="03" name="num">
      <input type="button" value="04" name="num">
      <input type="button" value="05" name="num">
      <input type="button" value="06" name="num">
      <input type="button" value="07" name="num">
      <input type="button" value="08" name="num">
      <input type="button" value="09" name="num">
      <input type="button" value="10" name="num">
      <input type="button" value="11" name="num">
      <input type="button" value="12" name="num">
      <input type="button" value="13" name="num">
      <input type="button" value="14" name="num">
      <input type="button" value="15" name="num"></td>
  </tr>
  
 <tr>
    <td height="40" colspan="5" align="center" class="shuzi"><span class="red" ><strong>拖码选择区：</strong></span></td>
  <tr>
    <td height="40" class="shuzi"> </td>
    <td height="40" colspan="4" class="shuzi">
      <input type="button" value="01" name="num1">
      <input type="button" value="02" name="num1">
      <input type="button" value="03" name="num1">
      <input type="button" value="04" name="num1">
      <input type="button" value="05" name="num1">
      <input type="button" value="06" name="num1">
      <input type="button" value="07" name="num1">
      <input type="button" value="08" name="num1">
      <input type="button" value="09" name="num1">
      <input type="button" value="10" name="num1">
      <input type="button" value="11" name="num1">
      <input type="button" value="12" name="num1">
      <input type="button" value="13" name="num1">
      <input type="button" value="14" name="num1">
      <input type="button" value="15" name="num1"></td>
  </tr>
  
 
 
<script>
  function f(){
    $('input[name=dan]').val($('input[name=num].sel').map(function(){return this.value}).get().join(','));
    $('input[name=tuo]').val($('input[name=num1].sel').map(function(){return this.value}).get().join(','))
  }
  $('input[name=num]').click(function(){
  var t=  $(this);
    if(t.hasClass('sel'))t.removeClass('sel');
    else if($('input[name=num].sel').length<5){
      t.addClass('sel');
       $('input[name=num1][value='+this.value+']').removeClass('sel');
    }
    f();
});
  $('input[name=num1]').click(function(){
  var t=  $(this);
    if(t.hasClass('sel'))t.removeClass('sel');
    else if($('input[name=num1].sel').length<20){
      t.addClass('sel');
       $('input[name=num][value='+this.value+']').removeClass('sel');
    }
    f();
});
</script>

莱杰 2014-12-15

打赏
举报

刚才老师说了句胆码最多5个，就不知道咋改了。。

莱杰 2014-12-15

打赏
举报

引用 2 楼 Monster7Joker 的回复:

[quote=引用 1 楼 slwsss 的回复:]

<script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
<style>
.sel{background:red;}
</style>
<tr>
    <td width="14%" height="40" align="right" nowrap=""><span lang="zh-cn">请选择胆码：</span></td>
    <td width="100%" height="40"><input type="text" style="width:100%" name="dan"  ></td>
  </tr>
   <tr>
    <td width="14%" height="40" align="right" nowrap=""><span lang="zh-cn">请选择拖码：</span></td>
    <td width="100%" height="40"><input type="text" style="width:100%" name="tuo"  ></td>
  </tr>
  <tr>
    <td height="40" colspan="5" align="center" class="shuzi"><span class="red" ><strong>胆码选择区：</strong></span></td>
  </tr>
  <tr>
    <td height="40" class="shuzi"> </td>
    <td height="40" colspan="4" class="shuzi">
      <input type="button" value="01" name="num">
      <input type="button" value="02" name="num">
      <input type="button" value="03" name="num">
      <input type="button" value="04" name="num">
      <input type="button" value="05" name="num">
      <input type="button" value="06" name="num">
      <input type="button" value="07" name="num">
      <input type="button" value="08" name="num">
      <input type="button" value="09" name="num">
      <input type="button" value="10" name="num">
      <input type="button" value="11" name="num">
      <input type="button" value="12" name="num">
      <input type="button" value="13" name="num">
      <input type="button" value="14" name="num">
      <input type="button" value="15" name="num"></td>
  </tr>
 
 <tr>
    <td height="40" colspan="5" align="center" class="shuzi"><span class="red" ><strong>拖码选择区：</strong></span></td>
  <tr>
    <td height="40" class="shuzi"> </td>
    <td height="40" colspan="4" class="shuzi">
      <input type="button" value="01" name="num1">
      <input type="button" value="02" name="num1">
      <input type="button" value="03" name="num1">
      <input type="button" value="04" name="num1">
      <input type="button" value="05" name="num1">
      <input type="button" value="06" name="num1">
      <input type="button" value="07" name="num1">
      <input type="button" value="08" name="num1">
      <input type="button" value="09" name="num1">
      <input type="button" value="10" name="num1">
      <input type="button" value="11" name="num1">
      <input type="button" value="12" name="num1">
      <input type="button" value="13" name="num1">
      <input type="button" value="14" name="num1">
      <input type="button" value="15" name="num1"></td>
  </tr>
 


<script>
  function f(){
    $('input[name=dan]').val($('input[name=num].sel').map(function(){return this.value}).get().join(','));
    $('input[name=tuo]').val($('input[name=num1].sel').map(function(){return this.value}).get().join(','))
  }
  $('input[name=num]').click(function(){
  var t=  $(this);
    if(t.hasClass('sel'))t.removeClass('sel');
    else{
      t.addClass('sel');
       $('input[name=num1][value='+this.value+']').removeClass('sel');
    }
    f();
});
  $('input[name=num1]').click(function(){
  var t=  $(this);
    if(t.hasClass('sel'))t.removeClass('sel');
    else{
      t.addClass('sel');
       $('input[name=num][value='+this.value+']').removeClass('sel');
    }
    f();
});
</script>

大神，问一下这样的话如何定义一开始按钮的样式呢，我加上样式.shuzi input { background-color: #D3DBC4; border-radius: 12px; border: 0; padding: 0;｝后改变颜色的效果就没有了。去掉这个样式那按钮就太难看了。 [/quote] 自己把一开始定义的颜色删掉了竟然就可以了。但是，如何限制胆码的个数呢？

莱杰 2014-12-15

打赏
举报

引用 1 楼 slwsss 的回复:

<script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
<style>
.sel{background:red;}
</style>
<tr>
    <td width="14%" height="40" align="right" nowrap=""><span lang="zh-cn">请选择胆码：</span></td>
    <td width="100%" height="40"><input type="text" style="width:100%" name="dan"  ></td>
  </tr>
   <tr>
    <td width="14%" height="40" align="right" nowrap=""><span lang="zh-cn">请选择拖码：</span></td>
    <td width="100%" height="40"><input type="text" style="width:100%" name="tuo"  ></td>
  </tr>
  <tr>
    <td height="40" colspan="5" align="center" class="shuzi"><span class="red" ><strong>胆码选择区：</strong></span></td>
  </tr>
  <tr>
    <td height="40" class="shuzi"> </td>
    <td height="40" colspan="4" class="shuzi">
      <input type="button" value="01" name="num">
      <input type="button" value="02" name="num">
      <input type="button" value="03" name="num">
      <input type="button" value="04" name="num">
      <input type="button" value="05" name="num">
      <input type="button" value="06" name="num">
      <input type="button" value="07" name="num">
      <input type="button" value="08" name="num">
      <input type="button" value="09" name="num">
      <input type="button" value="10" name="num">
      <input type="button" value="11" name="num">
      <input type="button" value="12" name="num">
      <input type="button" value="13" name="num">
      <input type="button" value="14" name="num">
      <input type="button" value="15" name="num"></td>
  </tr>
 
 <tr>
    <td height="40" colspan="5" align="center" class="shuzi"><span class="red" ><strong>拖码选择区：</strong></span></td>
  <tr>
    <td height="40" class="shuzi"> </td>
    <td height="40" colspan="4" class="shuzi">
      <input type="button" value="01" name="num1">
      <input type="button" value="02" name="num1">
      <input type="button" value="03" name="num1">
      <input type="button" value="04" name="num1">
      <input type="button" value="05" name="num1">
      <input type="button" value="06" name="num1">
      <input type="button" value="07" name="num1">
      <input type="button" value="08" name="num1">
      <input type="button" value="09" name="num1">
      <input type="button" value="10" name="num1">
      <input type="button" value="11" name="num1">
      <input type="button" value="12" name="num1">
      <input type="button" value="13" name="num1">
      <input type="button" value="14" name="num1">
      <input type="button" value="15" name="num1"></td>
  </tr>
 


<script>
  function f(){
    $('input[name=dan]').val($('input[name=num].sel').map(function(){return this.value}).get().join(','));
    $('input[name=tuo]').val($('input[name=num1].sel').map(function(){return this.value}).get().join(','))
  }
  $('input[name=num]').click(function(){
  var t=  $(this);
    if(t.hasClass('sel'))t.removeClass('sel');
    else{
      t.addClass('sel');
       $('input[name=num1][value='+this.value+']').removeClass('sel');
    }
    f();
});
  $('input[name=num1]').click(function(){
  var t=  $(this);
    if(t.hasClass('sel'))t.removeClass('sel');
    else{
      t.addClass('sel');
       $('input[name=num][value='+this.value+']').removeClass('sel');
    }
    f();
});
</script>

大神，问一下这样的话如何定义一开始按钮的样式呢，我加上样式.shuzi input { background-color: #D3DBC4; border-radius: 12px; border: 0; padding: 0;｝后改变颜色的效果就没有了。去掉这个样式那按钮就太难看了。

slwsss 2014-12-15

打赏
举报

<script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
<style>
.sel{background:red;}
</style>
<tr>
    <td width="14%" height="40" align="right" nowrap=""><span lang="zh-cn">请选择胆码：</span></td>
    <td width="100%" height="40"><input type="text" style="width:100%" name="dan"  ></td>
  </tr>
   <tr>
    <td width="14%" height="40" align="right" nowrap=""><span lang="zh-cn">请选择拖码：</span></td>
    <td width="100%" height="40"><input type="text" style="width:100%" name="tuo"  ></td>
  </tr>
  <tr>
    <td height="40" colspan="5" align="center" class="shuzi"><span class="red" ><strong>胆码选择区：</strong></span></td>
  </tr>
  <tr>
    <td height="40" class="shuzi"> </td>
    <td height="40" colspan="4" class="shuzi">
      <input type="button" value="01" name="num">
      <input type="button" value="02" name="num">
      <input type="button" value="03" name="num">
      <input type="button" value="04" name="num">
      <input type="button" value="05" name="num">
      <input type="button" value="06" name="num">
      <input type="button" value="07" name="num">
      <input type="button" value="08" name="num">
      <input type="button" value="09" name="num">
      <input type="button" value="10" name="num">
      <input type="button" value="11" name="num">
      <input type="button" value="12" name="num">
      <input type="button" value="13" name="num">
      <input type="button" value="14" name="num">
      <input type="button" value="15" name="num"></td>
  </tr>
 
 <tr>
    <td height="40" colspan="5" align="center" class="shuzi"><span class="red" ><strong>拖码选择区：</strong></span></td>
  <tr>
    <td height="40" class="shuzi"> </td>
    <td height="40" colspan="4" class="shuzi">
      <input type="button" value="01" name="num1">
      <input type="button" value="02" name="num1">
      <input type="button" value="03" name="num1">
      <input type="button" value="04" name="num1">
      <input type="button" value="05" name="num1">
      <input type="button" value="06" name="num1">
      <input type="button" value="07" name="num1">
      <input type="button" value="08" name="num1">
      <input type="button" value="09" name="num1">
      <input type="button" value="10" name="num1">
      <input type="button" value="11" name="num1">
      <input type="button" value="12" name="num1">
      <input type="button" value="13" name="num1">
      <input type="button" value="14" name="num1">
      <input type="button" value="15" name="num1"></td>
  </tr>
 


<script>
  function f(){
    $('input[name=dan]').val($('input[name=num].sel').map(function(){return this.value}).get().join(','));
    $('input[name=tuo]').val($('input[name=num1].sel').map(function(){return this.value}).get().join(','))
  }
  $('input[name=num]').click(function(){
  var t=  $(this);
    if(t.hasClass('sel'))t.removeClass('sel');
    else{
      t.addClass('sel');
       $('input[name=num1][value='+this.value+']').removeClass('sel');
    }
    f();
});
  $('input[name=num1]').click(function(){
  var t=  $(this);
    if(t.hasClass('sel'))t.removeClass('sel');
    else{
      t.addClass('sel');
       $('input[name=num][value='+this.value+']').removeClass('sel');
    }
    f();
});
</script>

关于input的一个效果的问题。

相关推荐