美文网首页前端学习模块
初次学习Js脚本及HTML、CSS的简要摘录

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

作者: 皮皮雅_ | 来源:发表于2019-01-12 17:14 被阅读0次

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>

其他属性自己看

相关文章

网友评论

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

    本文链接:https://www.haomeiwen.com/subject/mmecdqtx.html