初次学习Js脚本及HTML、CSS的简要摘录

1. try{

判断  抛出}

catch(err)

{ 打印到HTML中(可指向)}

11图片验证码,点击更换的代码

<imgstyle="height: 22px;" id="codeImg" onclick="this.src='verifycode?'+Math.random()"alt="点击更换" title="点击更换" src="verifycode" />

<!--onclick="this.src='verifycode?'+Math.random()" 中的 verifycode 可以换成你自己请求的地址-->

切记!!!问号要保留

2. /*是否带有小数*/

function    isDecimal(strValue )  { 

   var  objRegExp= /^\d+\.\d+$/;

   return  objRegExp.test(strValue); 

/*校验是否中文名称组成 */

function ischina(str) {

    var reg=/^[\u4E00-\u9FA5]{2,4}$/;   /*定义验证表达式*/

    return reg.test(str);     /*进行验证*/

}

/*校验是否全由8位数字组成 */

function isStudentNo(str) {

    var reg=/^[0-9]{8}$/;   /*定义验证表达式*/

    return reg.test(str);     /*进行验证*/

}

/*校验电话码格式 */

function isTelCode(str) {

    var reg= /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;

    return reg.test(str);

}

/*校验邮件地址是否合法 */

function IsEmail(str) {

    var reg=/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;

    return reg.test(str);

}

3.<button onclick="displayDate()">现在的时间是?</button>  //提交

4<form name="myform"

action="" onsubmit="return fun1()">//提交表单,用于表单验证,可参考菜鸟教程正则表达式

5.function validateForm() {

   var x = document.forms["myForm"]["fname"].value;

   if (x == null || x == "") {

       alert("需要输入名字。");

       return false;

    }

}

action为提交表单的php页面地址

6.两侧横线中间字(或者hr设置百分比调整)

<style type="text/css" media="screen">

.line_m{text-decoration:line-through}

</style>

<span class="line_m">&nbsp;</span>

文字<span class="line_m">&nbsp; </span>需要多长就多加一个(空格)。

文字出加其他标签会被线横穿!


7. <script>

document.getElementById("myBtn").onclick=function(){displayDate()};

8.box-shadow: 06px 10px lightgray;

box-shadow属性的参数设置取值:

阴影类型:此参数可选。如不设值,默认投影方式是外阴影;如取其唯一值“inset”,其投影为内阴影;

X-offset:阴影水平偏移量,其值可以是正负值。如果值为正值,则阴影在对象的右边,其值为负值时,阴影在对象的左边;

Y-offset:阴影垂直偏移量,其值也可以是正负值。如果为正值,阴影在对象的底部,其值为负值时,阴影在对象的顶部;

阴影模糊半径:此参数可选,,但其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊;

阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小;

阴影颜色:此参数可选。如不设定颜色,浏览器会取默认色,但各浏览器默认取色不一致,特别是在webkit内核下的safari和chrome浏览器下表现为透明色,在Firefox/Opera下表现为黑色(已验证),建议不要省略此参数。

9. background: #00FF00 url(bgimage.gif) no-repeat fixed top;

background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

10. animation:name duration timing-function delay iteration-count direction;同时设置多个属性

11. 下面的例子使用了 Math 对象的 floor() 方法和 random() 来返回一个介于 0 和 11 之间的随机数floor()方法为下舍入Math.floor(1.6)->1

 document.write(Math.floor(Math.random()*11));

12.可去菜鸟教程上看

13、audio标签 支持格式:ogg、wav、mp3

对应属性:

1、autoplay 自动播放。

2、controls 显示播放器 无区别

3、loop 循环播放 无区别

4、preload 预加载

5、muted 静音

解决谷歌无法自动播放的问题——>从60.X版本开始,这个选项被移除了,取而代之的是一个名为Autoplay policy的选项。我们在浏览器中输入chrome://flags/#autoplay-policy,然后在高亮的选项中,将Default换成No user gesture is required:

video标签 支持格式:ogg、mp4、webM

属性:1、width 2、height 3、Poster

要么在相应的audio和video插入src=””,或者在其下的插入<source>标签

13. 1、容器属性

display : flex

声明使用弹性盒布局

flex-direction :row | row-reverse | column | column-reverse

确定子元素排列的方向

flex-wrap : nowrap| wrap | wrap-reverse

元素超过父容器尺寸时是否换行

flex-flow :flex-direction | flex-wrap

同时设置flex-direction 和flex-wrap

justify-content :flex-start | flex-end | center | space-between | space-around

子元素的尺寸确定之后,用此属性来设置flex-direction定义方向上的分布方式

align-items :flex-start | flex-end | center | baseline | stretch

子元素的尺寸确定之后,用此属性来设置flex-direction定义方向上的垂直方向的分布方式

align-content :flex-start | flex-end | center | space-between | space-around | stretch

设置多行子元素在行方向上的对齐方式

2、条目属性

flex : none | <' flex-grow '> <' flex-shrink >'? || <'flex-basis '>

同时设置flex-grow 和 flex-shrink 以及 flex-basisflex-grow :number

表示的是当父元素有多余的空间时,这些空间在不同子元素之间的分配比例

flex-shrink:number

当父元素的空间不足时,各个子元素的尺寸缩小的比例

flex-basis :length | percentage | auto | content

用来确定弹性条目的初始主轴尺寸。

align-self :auto | flex-start | flex-end | center | baseline | stretch

覆写父元素指定的对齐方式

order : integer

改变条目在容器中的出现顺序

14.js中class属性用className,改变某个节点元素的class类

  var a=’color’;obtn.style[a]=’red’;//用点则不行,.和[]都可以操作属性,但[]可以操作变量

15. append/prepend 是在选择元素内部嵌入。

after/before 是在元素外面追加。

 $("p").remove(".italic");这是另外一个段落。

css({"propertyname":"value","propertyname":"value",...});

16. oBtn.onclick=a;

   function a()

   {oDiv.style.color='red';}//这样分开调用才有效

17zui导航条去除响应式

18. <map name="planetmap">

  <area shape="rect" coords="x1,y1,x2,y2" alt="Sun" href="sun.htm">//矩形

  <area shape="poly " coords="x1,y1,x2,y2 ......" alt="Mercury" href="mercur.htm">//多边行

  <area shape="circle" coords="x1,y1,r" alt="Venus" href="venus.htm">//圆

</map>

其他属性自己看

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,651评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,468评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,931评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,218评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,234评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,198评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,084评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,926评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,341评论 1 311
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,563评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,731评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,430评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,036评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,676评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,829评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,743评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,629评论 2 354

推荐阅读更多精彩内容

  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,887评论 0 0
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,474评论 1 45
  • JavaScript 1. type 类型判断 isString (o) {//是否字符串 returnObjec...
    Mr_ZhangH阅读 630评论 0 1
  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 2,065评论 1 10
  • 我看到你了! 你气宇轩昂,昂首阔步 你肌肤红润,光滑如玉 你身姿矫健,步伐轻快 我看到你了! 青春! 致青春 你说...
    虚拟99阅读 162评论 0 0