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.动画部分用 ...

随机推荐

iOS符号表手工还原
1.通过Xcode的Device工具导出app.crash文件 2.将.crash 和 .dSYM符号 app放在同一个目录中 3.寻找symbolicatecrash,将symbolicatecra ...
python相关常见安装问题
1 Centos7安装pip 参考链接:centos7 pip升级 - fuhaizi - 博客园 (cnblogs.com) Centos7默认pip版本: 使用默认pip版本安装numpy库,会报 ...
ETL工具-nifi干货系列第八讲处理器PutDatabaseRecord 写数据库（详细）
1.本节通过一个小例子来讲解下处理器PutDatabaseRecord,该处理器的作用是将数据写入数据库. 如下流程通过处理器GenerateFlowFile 生成数据,然后通过处理器JoltTran ...
Scrapy框架(一)--初识
scrapy初识什么是框架? 所谓的框架简单通用解释就是就是一个具有很强通用性并且集成了很多功能的项目模板,该模板可被应用在不同的项目需求中. 也可被视为是一个项目的半成品. 如何学习框架? 对于刚接 ...
有点东西，template可以直接使用setup语法糖中的变量原来是因为这个
前言我们每天写vue3代码的时候都会使用到setup语法糖,那你知道为什么setup语法糖中的顶层绑定可以在template中直接使用的呢?setup语法糖是如何编译成setup函数的呢?本文将围绕 ...
Java代码规范及异常汇总非空异常 NullPointerException
Java规范及异常汇总1.java.lang.NullPointerException: nullorderReq.getId() != -1 修改为: orderReq.getId() != nul ...
Linux 增加 swap 分区
检查当前swap分区 [root@localhost ~]# free -g total used free shared buffers cached Mem: 15 0 14 0 0 0 -/+ ...
anaconda里虚拟环境安装jupyter notebook
安装jupyter notebook 打开anaconda prompt,进入虚拟环境 conda activate Pytorch_learning 下载安装jupyter notebook con ...
python重拾第八天-Socket网络编程
本节内容 Socket介绍 Socket参数介绍基本Socket实例 Socket实现多连接处理通过Socket实现简单SSH 通过Socket实现文件传送作业:开发一个支持多用户在线的FTP程 ...
Android 8.0 开机时间优化
Android 8.0 开机时间优化背景在嵌入式行业中,有些搭载了Android系统的设备由于开机时间过长而导致无法被接受. 介绍启动时间是系统性能的重要组成部分,因为用户必须等待启动完成 ...

HTML+JavaScript+CSS做一个界面

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

随机推荐

热门专题