日常笔记

10、常用网页回顶部按钮

$(window).scroll(function () {
   if ($(this).scrollTop() > 100) {
	$('.goTop').fadeIn();
   } else {
	$('.goTop').fadeOut();
		    }
});

$('.goTop').click(function () {
	$("html, body").animate({
		scrollTop: 0
	}, 600);
	return false;
});

9、判断是否是输入邮件

$("#input").val().match(/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/)

8、监听输入框

$("#input").bind('input propertychange',  function(){   
	//输入框变化时执行  
});

7、smarty限制循环个数以及不同Type循环的标签不一样

qa_ul.html

<ul>
    <{include file='li.html' coupons=$coupon_list_slice type="qalist"}>
<ul>

qa_li.html

<{assign var='qamax' value=1}>
<{foreach from=$qa item="qa_item"}>
<{if !isset($type) && $type != "qalist"}>

<li>
    <h3><{$qa_item.question}></h3>
</li>
<{if $qamax == 3}>
<{break}>
<{/if}>

<{else}>

    <h3><{$qa_item.question}></h3>

<{/if}>
<{/foreach}>

6、 html页面的所有请求都自动将http请求转变为https请求

index.html头中有如下代码

<meta http-equiv=“Content-Security-Policy” content=“upgrade-insecure-requests”>

5、文本显示限制

p{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /*固定显示2行*/
}

4、HTMLInputElement.setSelectionRange()

输入框光标位置,可选定范围

<div class="copy_box">
   <input class="copyinput" type="text" value="XXXXX" readonly >
</div>
<script>
   $(".copyinput).click(function(e){
      e.preventDefault(),
      this.focus(),
      this.setSelectionRange(0, this.value.length)
})
</script>

3、direction: rtl

所有浏览器都支持 direction 属性。

注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 “inherit”。

把文本方向设置为“从右向左”

定义和用法

direction 属性规定文本的方向 / 书写方向。

该属性指定了块的基本书写方向,以及针对 Unicode 双向算法的嵌入和覆盖方向。不支持双向文本的用户代理可以忽略这个属性。

2、滚动条

  • ::-webkit-scrollbar 滚动条整体部分
  • ::-webkit-scrollbar-thumb  滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条)
  • ::-webkit-scrollbar-track  滚动条的轨道(里面装有Thumb)
  • ::-webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。
  • ::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)
  • ::-webkit-scrollbar-corner 边角,即两个滚动条的交汇处
  • ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

1、设置input、textarea的placeholder颜色

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
          /* WebKit browsers */
          color: #ced0d6;
        }
input:-moz-placeholder, textarea:-moz-placeholder {
          /* Mozilla Firefox 4 to 18 */
          color: #ced0d6;
        }
input::-moz-placeholder, textarea::-moz-placeholder {
          /* Mozilla Firefox 19+ */
          color: #ced0d6;
        }
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
          /* Internet Explorer 10+ */
          color: #ced0d6;
        }

发表评论

电子邮件地址不会被公开。 必填项已用*标注