HTML+JavaScript+CSS做一个界面

　　下面是一个web界面主要是前端没有后端功能：关于JavaScript几种比较常见的样式

Javaweb(1),html

<!DOCTYPE html>

<head>

<title>Document</title>

进入页面加载的方法

window.onload=function()

{

var date=new Date(),time=date.getTime();

setInterval(function() {set(time);time = Number(time);time += 1000;},1000);

setTodayDate(date);

}

设置日期的方法，针对年月日星期的显示

function setTodayDate(today)

{

var years,months,dates,weeks, intYears,intMonths,intDates,intWeeks,today,timeString;

intYears = today.getFullYear();//获得年

intMonths = today.getMonth() + 1;//获得月份+1

intDates = today.getDate();//获得天数

intWeeks = today.getDay();//获得星期

years = intYears + '年 ';

if(intMonths < 10){

months = '0' + intMonths + '月';

}else{

months = intMonths + '月';

}

if(intDates < 10){

dates = '0' + intDates + '日 ';

}else{

dates = intDates + '日 ';

}

var weekArray = new Array(7);

weekArray[0] = '星期日';

weekArray[1] = '星期一';

weekArray[2] = '星期二';

weekArray[3] = '星期三';

weekArray[4] = '星期四';

weekArray[5] = '星期五';

weekArray[6] = '星期六';

weeks =weekArray[intWeeks] + ' ';

timeString = years + months + dates + weeks;

document.getElementById('time').innerHTML=timeString;

}

设置北京时间的方法，针对时分秒的显示

function set(time)

{

var beijingTimeZone = 8;

var timeOffset = ((-1 * (new Date()).getTimezoneOffset()) - (beijingTimeZone * 60)) * 60000;

var now = new Date(time - timeOffset);

document.getElementById('bjtime').innerHTML = p(now.getHours())+':'+p(now.getMinutes())+':'+p(now.getSeconds());

}

格式化时间的显示方式

function p(s)

{

return s < 10 ? '0' + s : s;

}

</script>

#main-top{

width: 100%;

height: 150px;

}

#main-right{

width: 30%;

height: 950px;

float: left;

text-align: center;

/* background-color: aquamarine; */

}

#main-middle

{

float:left;

width: 70%;

height: 950px;

/* background-color: antiquewhite; */

}

#main-footer

{

width: 100%;

clear:both;/*清除左右浮动*/

margin-top:20px;

position:relative;/*避免底部留白*/

height: auto;

}

body

{

background-image: url(back.png);

}

#topnav{

width: 100%;

overflow: hidden;

background-color: white;

border: 1px solid black;

border-radius: 10px;

opacity: 0.4;

text-align: center;

}

#footer{

width: 100%;

overflow: hidden;

border-radius: 10px;

text-align: center;

}

font-size: 40px;

color: black;

text-decoration: none;

}

.afooter

{

font-size: 30px;

color:teal ;

font-weight: bold;

text-decoration: none;

}

h1{

font-size: 60px;

text-align: center;

}

ul{

background-color: white;

padding-left: 70px;

opacity: 0.4;

text-align: left;

font-size:40px ;

text-shadow: 0px 3px 5px rgba(9, 21, 61, 0.5);

list-style-type: none;

border: 1px solid white;

border-radius: 10px;

}

.a-left{

font-size: 35px ;

}

#photo{

height: 50px;

width: 50px;

}

#photo1{

height: 300px;

width: 300px;

opacity: 0.9;

border-radius: 20px;

}

.li-k{

font-size: 30px;

text-align: center;

}

.left-ul

{

background-color: white;

padding-left: 70px;

opacity: 0.4;

font-size:40px ;

width: auto;

text-shadow: 0px 3px 5px rgba(9, 21, 61, 0.5);

list-style-type: none;

border: 1px solid white;

border-radius: 10px;

}

.left-ul1

{

background-color: white;

padding-left: 70px;

opacity: 0.4;

font-size:30px ;

width: auto;

text-shadow: 0px 3px 5px rgba(9, 21, 61, 0.5);

list-style-type: none;

border: 1px solid white;

border-radius: 10px;

}

</style>

</head>

<body>

</div>

</div>

<br>

<br>

记得留言那:

</h1>

<div>

</div>

<a href="#"class="afooter">石家庄铁道大学      信息科学与技术学院      622宿舍著emm</a>

</div>

</body>

</html>

Javweb(1.1).html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<tr>

<tr>

</tr>

<tr>

<td style="width: 50%">国籍：中华人民共和国</td>

<td style="width: 50%">出生地：山东省菏泽市</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<p>江银涛于2002年9月21日出生于山东省菏泽市单县人民医院，2014年毕业天于孝义市第九中学，2017年毕业于孝义市第二中学，2020年进入了石家庄铁道大学，正式步入了自己的大学生涯。</p>

<p>由于自小身体状态不好在小学时期报名了跆拳道这一项目。训练时间长达4年，并在之中参加多次市级省级比赛并取得不错的成绩。</p>

<p>对于军旅生涯非常期望的，对于每一次军训都是十分的刻苦认真。长空砺剑洒热血，万里云天祭忠魂。</p>

</td>

</tr>

</table>

</td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

</body>

</html>

javawebwork（1.3）.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<tr> <td><p>以下内容纯属瞎造：</p>

<p> 布克奖是英国最重要的文学奖项，享有很高的声誉。这一奖项每年颁发给在过去12个月中出版杰出小说的作者。</p>

该奖项成立于1993年，由约翰·S·科恩基金会和英国艺术委员会共同颁发。这个奖项只授予英国文学，是一个非常著名的奖项。</br>

3、普利策奖</br>

普利策奖设立于1917年，由哥伦比亚大学颁发。该奖项每年在美国颁发，以表彰在写作、新闻和音乐方面的成就，它们以出版商约瑟夫·普利策的名字命名。

</br>

4、Ashok Chakra</br>

它是和平时期的军事装饰，用来奖励勇敢、勇敢或自我牺牲的行为。这是印度和平时期颁发给士兵、陆军、空军、陆军、海军和许多其他合法部队的最高奖项之一。

</br>

5、国际笔会奖

</br>

国际笔会奖于1921年在伦敦成立，由非政府组织国际笔会颁发，这个奖是世界上最古老的国际文学组织的荣誉，国际笔会有不同类型的奖项。

</br>

6、金棕榈奖

</br>

金棕榈奖成立于1955年，旨在表彰电影导演。很多颁奖典礼都是为电影明星举办的，但导演却不多，所以这是一个非常有声望的奖项。

</br>

7、拉蒙·麦格塞塞奖

</br>

拉蒙·麦格塞塞奖成立于1957年，由菲律宾颁发给已故总统拉蒙·麦格塞塞。这个奖项是授予在文学、公共服务、创意艺术、社区领导。

</br>

8、奥斯卡金像奖

</br>

奥斯卡金像奖是在1929年设立的，由电影学院和艺术与科学学院共同颁发。这是一个世界知名的电影奖项，旨在鼓励优秀电影的创作与发展。

</br>

9、卡林加奖

</br>

卡林加奖于1951年创立，该奖项由印度政府教科文组织颁发，以表彰科学的传播和普及。联合国教科文组织在每年的世界科学日上颁发这一奖项。

</br>

10、诺贝尔奖

</br>

诺贝尔奖于1901年设立，以科学家、瑞典工程师阿尔弗雷德·诺贝尔命名，诺贝尔奖是一项伟大的成就，也是在医药、和平、科学和经济领域上最令人尊敬和最有声望的奖项。

</td></tr> </table>

</div>

</div> </body>

</html>

HTML+JavaScript+CSS做一个界面的更多相关文章

【CSS】如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...
如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...
简单说用CSS做一个魔方旋转的效果
说明魔方大家应该是不会陌生的,这次我们来一起用CSS实现一个魔方旋转的特效,先来看看效果图! 解释我们要做这样的效果,重点在于怎么把6张图片,摆放成魔方的样子,而把它们摆放成魔方的样子,重点在于用 ...
CSS做一个Switch开关
本文为博主原创,转载请注明出处. Switch开关: 根据需求可知,Switch开关只有两种选择,true或false.所以我们想到HTML的checkbox控件,用它来做. <input id ...
js/html/css做一个简单的图片自动（auto）轮播效果//带注释
FF(firefox)/chrom/ie稳定暂无bug...注意:请自己建立一个images文件,放入几张900*238的图片(注意图片格式和名字与程序中一致). 1. [图片] 1.JPG 2. [ ...
C/C++编程笔记：编写完成了一个C/C++程序，如何做一个界面出来？
最简单的方法是用vc6新建一个Win32 Application空工程,然后添加一个cpp文件,输入 (注意添加对话框资源,并且在对话框上添加一个文本框) #include #include &quo ...
如何用css做一个细虚线边框表格
<style type="text/css"> <!-- .dashed_tbl { border-top: 1px dashed #333333; border ...
项目实践2:(问卷)用html和css做一个网页
好家伙,又来写项目了 1.以下是考题,姑且把他理解为甲方吧. 2.以下是附带的题目素材开干.
纯CSS做3D旋转魔方
昨天偶然看见网友(简单说用CSS做一个魔方旋转的效果)做的一个3D旋转魔方效果就是本博客右侧公告栏所示在这里把做法展现出来感兴趣的可以试试做成自己特有的魔方 <!DOCTYPE h ...
用bootstrap做一个背景可轮转的登录界面
用bootstrap做一个背景可轮转的登录界面一.总结一句话总结:用css3的动画的 @keyframes 规则,制作轮转图. 1.用bootstrap做一个背景可轮转的登录界面? a.动画部分用 ...

随机推荐

Apache 服务搭建
Apache 一.了解apache Apache(或httpd)是Internet上使用最多的Web服务器技术之一,使用的传输协议是http(Hypertext Transfer Protocol), ...
ansible list错误
[root@localhost ansible]# ansible all -list [WARNING]: * Failed to parse /etc/ansible/1.txt with ini ...
【译】Visual Studio 17.10 发布了新版扩展管理器
我们将更新的扩展管理器带给所有用户!在过去的一年里,我们已经将更新后的扩展管理器作为可选的预览功能提供,并一直期待您的反馈.基于您令人难以置信的反馈,我们现在准备从 Visual Studio 17. ...
Spring Cloud微服务核心架构分析
Spring Cloud是一个相对比较成熟的微服务框架.虽然,Spring Cloud于2016年才推出1.0的release版本, 时间最短, 但是相比Dubbo等RPC框架, Spring Clo ...
Shell读取整行
像C/C++,JAVA,Python等语言中,可以轻松地对文件进行按行读取. 那么,Shell中怎么实现对行读取呢? #!/bin/bash while read i do echo $i done ...
深度解读昇腾CANN多流并行技术，提高硬件资源利用率
本文分享自华为云社区<深度解读昇腾CANN多流并行技术,提高硬件资源利用率>,作者:昇腾CANN. 随着人工智能应用日益成熟,文本.图片.音频.视频等非结构化数据的处理需求呈指数级增长,数 ...
【资料分享】Xilinx XCZU7EV工业核心板规格书（四核ARM Cortex-A53 + 双核ARM Cortex-R5 + FPGA，主频1.5GHz）
1 核心板简介创龙科技SOM-TLZU是一款基于Xilinx UltraScale+ MPSoC系列XCZU7EV高性能处理器设计的高端异构多核SoC工业核心板,处理器集成PS端(四核ARM Cor ...
Linux系统基本介绍
一.Linux系统基本介绍 [1].Linux操作系统特点多任务的操作系统多任务操作系统严格区分大小写 Linux一切皆文件所有文件的起点都是"/"根目录对于Linux操 ...
面试官：Java类是如何被加载到内存中的？
面试连环call Java类是如何被加载到内存中的? Java类的生命周期都有哪些阶段? JVM加载的class文件都有哪些来源? JVM在加载class文件时,何时判断class文件的格式是否符合要 ...
P8571 题解
既然字符串的总长一定,不妨对于每个询问中的 $s_k$ 的长度根号分治,假定分治阈值为 $B$.下面令 $L$ 为所有串长度总和. 对于长度大于 $B$ 的字符串,这样的不同字符串至多 ...

HTML+JavaScript+CSS做一个界面

HTML+JavaScript+CSS做一个界面的更多相关文章

随机推荐

热门专题