CSS+JS,在div中显示当前时间和星期

html-css084

CSS+JS,在div中显示当前时间和星期,第1张

<!DOCTYPE html>

<html>

<head>

<script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js">

</script>

<script>

$(document).ready(function(){

  $("p").click(function(){

     var str = "今天是"+(new Date()).toLocaleString()+" 星期" + "日一二三四五六".charAt(new Date().getDay())

     $(".time").html(str)

  })

})

</script>

</head>

<body>

<p>点击我</p>

<div class="time"></div>

</body>

</html>

实现效果这样?:

今天是2018/6/12 下午1:33:05 星期二

JS代码(随便放哪里):

<script language="javascript">

<!--

var flag=false

function DrawImage(ImgD){

var image=new Image()

image.src=ImgD.src

if(image.width>0 &&image.height>0){

flag=true

if(image.width/image.height>= 180/110){

if(image.width>180){

ImgD.width=180

ImgD.height=(image.height*110)/image.width

}else{

ImgD.width=image.width

ImgD.height=image.height

}

/*ImgD.alt="bigpic" */

}

else{

if(image.height>110){

ImgD.height=110

ImgD.width=(image.width*110)/image.height

}else{

ImgD.width=image.width

ImgD.height=image.height

}

/*ImgD.alt="bigpic" */

}

}

}

//-->

</script>

图片使用的地方:

<img src="图片" border=0 width="180" height="110" onload="javascriptrawImage(this)">

width="180" height="110" 注意这里最好限定,如果不限定加载图时会成原大,然后再缩小,这个过程如果图大了很难看的.这里是宽度和高度,在前面的JS里改,这里也作相应的改.

图不会变形,只会按比列缩 alt 解决不了.

css截取多行文字可以使用容器的超出隐藏来实现,注意:多行无法截取后面不会出现省略号;

1、因为要对其设定宽高,所以设置容器为block或者inline-block;

2、设置overflow:hidden让超出内容的部分不显示;

3、为了避免长单词,长的数字不换行,还需要对该容器设置:word-break:break-allword-wrap:break-word

这样就可以实现了文字的截取效果;

具体代码如下:

<style>

.wordwrap{width:100pxheight:36pxline-height:18pxfont:400 12px/1.5 Simsunoverflow:hiddenword-break:break-allword-wrap:break-word}

</style>

<div class="wordwrap">

    <span>文字截取文字截取文字截取文字截取文字截取文字截取文字截取文字截取文字截取文字截取文字截取</span>

</div>