今日的一些思考

最新推荐文章于 2024-10-18 19:19:52 发布

七坊街有为饼干

最新推荐文章于 2024-10-18 19:19:52 发布

阅读量177

点赞数

本文链接：https://blog.csdn.net/aginomoto_52/article/details/98776947

版权

今日的一些思考

经过这个周末，简单的小网站完工了，最后的效果如下图：

以上是最后的效果截图，中间的页面因为没有足够时间完成，顒是从360网站上截的图。完整的代码就不放了，很多都是重复的，而且跟之前的区别主要就是p图。

至此，html，css，JavaScript，jQuery就差不多学完了，跟实习公司的java后台聊了聊，他建议可以学一学最近比较火的vue和node.js，我一开始的打算是七月学完前端，八月开始后端，听他这么一说感觉把八月交给前端比较好，用这一整个假期去系统地学完前端也很好。

今天学了一点vue，完成了一个小小的效果，如下：
在这里插入图片描述
这张截图展示的功能是：在输入框中输入时，下方会同步出现输入的内容（右下角小狐狸是我的输入法，别在意233333），运用到了vue的双向数据绑定，代码如下（按钮是没有用的）：

<html>
	<head>
		<style>
   			p, h1{
   				color: white;
   				font-family: Comic Sans MS;
   			}
   			button{
   				font-family: Comic Sans MS;
   			}
   			input[type=text]{
   				padding: 6px;
   				width: 100px;
   				margin: 4px 1px;
   				box-sizing: border-box;
   				border: 1px solid #555;
   				border-radius: 8px;
   				outline: none;
   				-webkit-transition: width 0.5s ease-in-out;
  				transition: width 0.5s ease-in-out;
   			}
   			input[type=text]:focus {
  				background-color: lightblue;
  				width: 15%;
			}
			p.bigName{
				position: absolute;
				left: 10%;
				background: linear-gradient(to left, red, orange, yellow, green, blue, purple);
        		-webkit-background-clip: text;
        		color: transparent;
        		font-size: 150;
				opacity: 0.3;
				filter: alpha(opacity=30);
			}
		</style>
		<title> Entrance 1 </title>
	</head>

	<body bgcolor="rgb(80,200,100)">
		<div id="app">
			<p> <big> enter your name: 
				<input id="inputDemo" type="text" placeholder="输入姓名..." v-model="message">
				<button type="button" > <big> login </button> </big>
			</p>
			<p class="bigName"> {{message | addChar}} </p>
		</div>
	</body>
</html>
<script src="htmls/vue.js"> </script>
<script>
	var vm=new Vue({
  		el: '#app',
  		data:{
    		message: null
  		}
	})
</script>

p.bigName字段实现了下方浮动的字幕是彩色渐变的效果